在我的网站上,我有四个由JavaScript生成的日历作为表格。我想知道如何使用JSON文件标记特定日期(在每个日历中单独) - 我想在存储JSON文件中提到的日期的单元格中添加适当的类。
为什么我考虑使用JSON? 因为我希望它尽可能简单 - 想要编辑这些日历的人不是程序员。
我应该如何以及在哪里实现JSON来实现这种效果? 如何告诉我的日历,例如,25.03.2017 - 30.03.2017应该在日历nr 1中标记?
这是我的JavaScript代码:
function calendar (date, config) {
config = config || {};
var Y = date.getFullYear();
var M = date.getMonth();
var D = date.getDate();
var daysInMonth = new Date(Y, M + 1, 0).getDate();
var daysInPreviousMonth = new Date(Y, M, 0).getDate();
var monthStart = new Date(Y, M, 0);
var firstDay = monthStart.getDay();
var today = new Date();
var todayY = today.getFullYear();
var todayM = today.getMonth();
var todayD = today.getDate();
// Highlight current date
if (config.highlightToday) {
config.highlightToday = Y === todayY && M === todayM;
}
// Generate calendar table
var s = '<table>';
if (config.showHead) {
s += '<tr class="first-row"><th colspan="7" class="month-name">' + Y + ' ' + calendar.monthNames[M] + '</th></tr>';
s += '<tr><th class="day-name">' + calendar.weekDayNames.join('</th><th>') + '</th></tr>';
}
var d = -firstDay + 1;
var rows = 6;
for (var row = 0; row < rows; row++) {
s += '<tr>';
for (var col = 0; col < 7; col++) {
s += '<td';
var cl = [];
if (config.highlightToday && d === todayD) {
cl.push('today');
}
if (d <= 0 || d > daysInMonth) {
cl.push('surrounding');
}
if (cl.length) {
s += ' class="' + cl.join(' ') + '"';
}
s += '>';
if (config.showSurroundingMonths && d <= 0) {
s += daysInPreviousMonth + d;
}
if (d > 0 && d <= daysInMonth) {
s += d;
}
if (config.showSurroundingMonths && d > daysInMonth) {
s += d % daysInMonth;
}
d++;
s += '</td>';
}
s += '</tr>';
}
s += '</table>';
return s;
}
calendar.weekDayNames = ['P', 'W', 'Ś', 'C', 'P', 'S', 'N'];
calendar.monthNames = ['Styczeń', 'Luty', 'Marzec',
'Kwiecień', 'Maj', 'Czerwiec',
'Lipiec', 'Sierpnień', 'Wrzesień',
'Październik', 'Listopad', 'Grudzień'];
// -------------------------------------------
var date = new Date();
function updateCalendar(cal) {
cal.innerHTML = calendar(date, {
highlightDate: true,
highlightToday: true,
showHead: true,
showSurroundingMonths: true
});
}
updateCalendar(calendar1);
updateCalendar(calendar2);
updateCalendar(calendar3);
updateCalendar(calendar4);