Kendo Calendar Datasource

9 posts, 0 answers
  1. livashini
    livashini avatar
    7 posts
    Member since:
    Jun 2014

    Posted 12 Sep 2014 Link to this post

    hi,
    how can we bind data to kendo calendar from database?, if this possible please give me any solution....

    Here's my code
     var today = new Date();
            var events = new kendo.data.DataSource({
                transport: {
                   read: {
                        url: '@Url.Action("GetCalendarDate", "Calendar")',
                        dataType: 'json'
                    }
                },
            });

            $("#calendar").kendoCalendar({
                change: onChange,
                value: today,
                dates: events,
                month: {
                    
                    content: '# if ($.inArray(+data.date, data.dates) != -1) { #' +
                                '<div class="' +
                                   '# if (data.value < 10) { #' +
                                       "exhibition" +
                                   '# } else if ( data.value< 20 ) { #' +
                                       "party" +
                                   '# } else { #' +
                                       "cocktail" +
                                   '# } #' +
                                '">#= data.value #</div>' +
                             '# } else { #' +
                             '#= data.value #' +
                             '# } #'
                }
      });
    But it doesn't work. please anyone can tel me the write way for that, Please help me.

    Thanks.










  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 17 Sep 2014 Link to this post

    Hi Livashini,

    The Kendo UI Calendar does not support data binding. As it is a static widget that offers date selection functionality there is not really a point in data bindings. If you want to show events in a Scheduler like widget, I would suggest you to take a look at the following demo:

    http://demos.telerik.com/kendo-ui/scheduler/index

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. livashini
    livashini avatar
    7 posts
    Member since:
    Jun 2014

    Posted 17 Sep 2014 in reply to Kiril Nikolov Link to this post

    thank u very much for your reply
    but i done that data binding form database to kendo calendar 

    thank you 
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 17 Sep 2014 Link to this post

    Hello Livashini,

    The Calendar does not support dataBinding, and there is no documentation or a demo article that shows such functionality. I would still suggest you to consider the Kendo UI Scheduler if you want to show events in a Calendar like widget.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Anushri
    Anushri avatar
    5 posts
    Member since:
    Oct 2015

    Posted 03 Dec 2015 in reply to livashini Link to this post

    Hi Livashini,

     

    Can you share data binding from database to kendo calendar, Please

  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 04 Dec 2015 Link to this post

    Hello Anushri,

     

    As I said in my previous response - the calendar does not support data binding.

     

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Saima
    Saima avatar
    7 posts
    Member since:
    Apr 2014

    Posted 03 Feb in reply to livashini Link to this post

    Can you plz share your code to bind to database?
  8. livashini
    livashini avatar
    7 posts
    Member since:
    Jun 2014

    Posted 04 Feb Link to this post

     I Used ajax for return data from database, after return the data i wrote following function to bind dates to calender

     function GetCal(dataCal) {
            var events = new Array();
            $.holdReady( true );
            for (i = 0; i < dataCal.length; i++) {
                events.push(+new Date(dataCal[i].YY, dataCal[i].MM, dataCal[i].DD));
            }

            $("#calendar").kendoCalendar({
                change: onChange,
                value: today,
                dates: events,
                month: {
                    // template for dates in month view
                    content: '# if ($.inArray(+data.date, data.dates) != -1) { #' +
                                '<div class="' +
                                   '# if (data.value < 10) { #' +
                                       "exhibition" +
                                   '# } else if ( data.value < 20 ) { #' +
                                       "party" +
                                   '# } else { #' +
                                       "cocktail" +
                                   '# } #' +
                                '">#= data.value #</div>' +
                             '# } else { #' +
                             '#= data.value #' +
                             '# } #'
                },
                footer: false
            });
        }

  9. Anushri
    Anushri avatar
    5 posts
    Member since:
    Oct 2015

    Posted 04 Feb in reply to livashini Link to this post

    Thanks for reply but i did that.
Back to Top