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,
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
When user click on navigate, i will call the onNavigate function:
//recreate the calendar
Any Idea how to get the calendar working? thank you.
Regards,
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,