Recreate Calendar with Navigate event.

2 posts, 0 answers
  1. CH
    CH avatar
    48 posts
    Member since:
    Aug 2010

    Posted 29 Jun 2014 Link to this post

    Dear Expert,

    i was trying to populate dates from my server into Kendo UI Calendar. when i navigate to previous year, i would like to recreate\rebind the calendar with new dates.
    I having issue where when i tried to rebind my calendar, it will hang.
    Below are my code:


    //on PageLoad,
    01.$.ajax({
    02.         url: "/test/GetTimelogJson",
    03.         dataType: "json",
    04.        type: 'GET'
    05.     })
    06.     .fail(function () {
    07.        alert("fail");
    08.    })
    09.    .success(function (data) {
    10.        $.map(data, function (value, key) {
    11.                var d = +new Date(key);
    12.                timelogDay[d] = value;
    13.        });
    14.        $("#calTimelog").kendoCalendar({
    15.            value: Date.Today,
    16.          dates: timelogDay,
    17.          navigate: onNavigate,
    18.            month: {
    19.                content: '# if (typeof data.dates[+data.date] === "string") { #' +
    20.                        '<div class="#= data.dates[+data.date] #">' +
    21.                        '#= data.value #' +
    22.                        '</div>' +
    23.                        '# } else { #' +
    24.                        '#= data.value #' +
    25.                        '# } #'
    26.            },
    27.       });
    28.    });


    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    When user click on navigate, i will call the onNavigate function:

     
    01.function onNavigate() {
    02.    try
    03.    {
    04.         var todayDate = new Date();
    05.         //Compare date if it not equal to 2014,
    06.          if (this.current().getFullYear() != todayDate.getFullYear())
    07.           
    08.               todayDate = this.current(); //set the todayDate to selected View
    09.               reCreateCalendar(this.current());
    10.            }
    11.      }
    12.        catch (err) {
    13.         alert(err);
    14.        }
    15.     }

    //recreate the calendar
       
    01.function reCreateCalendar(compareDate) {
    02.        $('#calTimelog').data('kendoCalendar').destroy();
    03.        $('#calTimelog').empty();
    04. 
    05.        var date1 = new Date(2013, compareDate.getMonth(), 1),
    06.                     birthdays = [
    07.                        +new Date(2013,12, 3),
    08.                        +new Date(2013,12, 5),
    09.                        +new Date(2013,12, 22),
    10.                        +new Date(2013, 12, 27)
    11.                     ];
    12.    
    13.        $("#calTimelog").kendoCalendar({
    14.            value: date1,
    15.            dates: birthdays, navigate: onNavigate,
    16.            month: {
    17.                content: '# if (typeof data.dates[+data.date] === "string") { #' +
    18.                        '<div class="#= data.dates[+data.date] #">' +
    19.                        '#= data.value #' +
    20.                        '</div>' +
    21.                        '# } else { #' +
    22.                        '#= data.value #' +
    23.                        '# } #'
    24.            },
    25. 
    26.        });
    27.}
    28.    }

    Any Idea how to get the calendar working? thank you.

    Regards,

  2. CH
    CH avatar
    48 posts
    Member since:
    Aug 2010

    Posted 29 Jun 2014 in reply to CH Link to this post

    Hi all,
    I managed to solved my problem. It is because of each time when Calendar is first time loaded, it will call the Navigate event, so I did additional checking so that it will not enter into the infinite loop.

    Thanks.

    Regards,
    CH
  3. Kendo UI is VS 2017 Ready
Back to Top