带有约会查看器的剑道日历

Question

您好，有什么方法可以在 Kendo 日历控件中显示所选日期的约会？

例如，如果我在 1 月 1 日有约会，我的日历应该会显示一条消息以及日期（在同一个剑道日历控件中）。剩下的日期只会是普通的样式。

Answer 1

您可以通过在声明日历时定义模板函数来在每个日期显示自定义内容。将为日历中显示的每个日期调用此函数。以下示例显示了如何执行此操作：

// 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;
}