こんにちは、剣道カレンダー コントロールで選択した日付の予定を表示する方法はありますか?
たとえば、1 月 1 日に予定がある場合、カレンダーには日付とともにメッセージが表示されます (同じ剣道カレンダー コントロール内)。残りの日付は通常のスタイルのみとなります。
こんにちは、剣道カレンダー コントロールで選択した日付の予定を表示する方法はありますか?
たとえば、1 月 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;
}