Question

在我的网站上，我有四个由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);

如何使用JSON在动态生成的JavaScript日历中标记特定日期？

0 个答案: