Kendo Calender with appointment viewer - asp.net

Question

Hi is there any way to display appointments for the selected dates in the Kendo calender control?
Something like, if I've an appointment on 1st Jan my calender should show a message along with date (in the same kendo calender control). And the remaining dates would be normal style only.

Answer 1

You can show custom content on each date by defining a template function when you declare the calendar. This function will be called for each date shown in the calendar. The following example shows how to do this:
// Define dates that have appointments
var calDates = [];
calDates[+new Date(2013, 0, 1)] = [{ Description: "Appointment foo", Time: "09:00"}];
calDates[+new Date(2013, 0, 2)] = [{ Description: "Appointment bar", Time: "10:00" }, { Description: "Appointment baz", Time: "12:00"}];
// Declare Kendo Calendar
$("#div1").kendoCalendar({ "value": new Date(2013, 0, 1, 0, 0, 0, 0), "month": { "content": "#= BuildDateMarker(data) #"} });
// Template function
function BuildDateMarker(data) {
// Get any appointments for this date
var appointments = calDates[+data.date];
if (!appointments || appointments == 'undefined') {
// No appointments for this date, so return default marker (day of the month)
return data.date.getDate();
}
// Open marker
var marker = '<div class="appointments" title="' + data.date + '">';
// Add item for each of this date's appointments
for (var i = 0; i < appointments.length; i++) {
var appointment = appointments[i];
marker += '<span class="appointment">' + appointment.Description + ', at ' + appointment.Time + '</span>';
}
// Close marker
marker += '</div>';
return marker;
}