Recreate Calendar with Navigate event.

[CH]

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,

[CH]

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