Adding events runtime into calendar

5 posts, 0 answers
  1. Rupali
    Rupali avatar
    4 posts
    Member since:
    Jul 2013

    Posted 22 Jul 2013 Link to this post

    hello,
    I want to add events into calendar control, and that dated are saved into database.  how I add dates into events variable?
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 24 Jul 2013 Link to this post

    Hello Rupali,

     
    The Calendar widget is designed to display days/months/years/decades and respectively to allow selection. It also allow to define a custom template. I am not sure what your scenario exactly is and I will ask you to elaborate more on it.
    As a side note, if you need to show events and allow interaction with then probably you can try our new Scheduler widget.

    Regards,
    Georgi Krustev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Rupali
    Rupali avatar
    4 posts
    Member since:
    Jul 2013

    Posted 24 Jul 2013 Link to this post

    hello,
    I want to add multiple events into calendar and that dates are highlight by color. I fetch dates from database and binding that dates into event variable. After that I binding that events variable with calendar control but only single (last date ) highlight into calendar. Please help me how I add dates into events variable. My code is as follows:

    $(document).ready(function() {
     
    for(var i=0;i<len;i++){
     
    var d_month=results.rows.item(i).Month;
    var d_year=results.rows.item(i).Year;
    var d_date=results.rows.item(i).Date;

     events = [+new Date(d_year, d_month-1, d_date)];
     } 

    $("#calendar").kendoCalendar({
    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
    });

  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 25 Jul 2013 Link to this post

    Hello again Rupali,

    I believe that you are passing the list of dates as a dates option of the calendar. If this is the case then you will need to define your logic when and whether you want hightlight the dates. The aforementioned template will check whether the current date can be found the dates list (please note that dates list actually is list of milliseconds and that is why isArray works) and then depending on the current day (data.value) shows different icon. In order to acheive your goal you will need to implement the correct content template.
     
    Regards,
    Georgi Krustev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Rupali
    Rupali avatar
    4 posts
    Member since:
    Jul 2013

    Posted 25 Jul 2013 Link to this post

    Thank you for reply....
Back to Top
Kendo UI is VS 2017 Ready