根據數據（clndr.js）將類追加到javascript日歷

Question

我希望根據值本身為日歷中出現的每個clndr.js事件分配一個類。 var temp顯示了接收到的數據的示例。 我想設置類型為1或2的每個事件的樣式。代碼顯示了我想要修改的默認模板，以簡單地將type傳入的值添加為一個類，以便隨后進行樣式設置。

鏈接到github上的源庫

鏈接到github上的類似問題

// This is the default calendar template. This can be overridden.
var clndrTemplate =
    "<div class='clndr-controls'>" +
        "<div class='clndr-control-button'>" +
            "<span class='clndr-previous-button'>previous</span>" +
        "</div>" +
        "<div class='month'><%= month %> <%= year %></div>" +
        "<div class='clndr-control-button rightalign'>" +
            "<span class='clndr-next-button'>next</span>" +
        "</div>" +
    "</div>" +
    "<table class='clndr-table' border='0' cellspacing='0' cellpadding='0'>" +
        "<thead>" +
            "<tr class='header-days'>" +
            "<% for(var i = 0; i < daysOfTheWeek.length; i++) { %>" +
                "<td class='header-day'><%= daysOfTheWeek[i] %></td>" +
            "<% } %>" +
            "</tr>" +
        "</thead>" +
        "<tbody>" +
        "<% for(var i = 0; i < numberOfRows; i++){ %>" +
            "<tr>" +
            "<% for(var j = 0; j < 7; j++){ %>" +
            "<% var d = j + i * 7; %>" +
                "<td class='<%= days[d].classes %>'>" +
                    "<div class='day-contents <%= days[d].type %>'><%= days[d].day %></div>" +
                "</td>" +
            "<% } %>" +
            "</tr>" +
        "<% } %>" +
        "</tbody>" +
    "</table>";

var calendars = {};
$(document).ready(function () {
    var thisMonth = moment().format('YYYY-MM');
    var eventArray = {{ data|tojson }};
    var temp = [{
        date: thisMonth + '-22',
        type: 1
    }, {
        date: thisMonth + '-27',
        type: 2
    }, {
        date: thisMonth + '-13',
        type: 1
    }];
    calendars.clndr1 = $('.cal1').clndr({
        events: eventArray,
        targets: {
            day: 'day',
        },
        clickEvents: {
            click: function (target) {
                console.log('Cal-1 clicked: ', target);
            },
            today: function () {
                console.log('Cal-1 today');
            },
            nextMonth: function () {
                console.log('Cal-1 next month');
            },
            previousMonth: function () {
                console.log('Cal-1 previous month');
            },
            onMonthChange: function () {
                console.log('Cal-1 month changed');
            },
            nextYear: function () {
                console.log('Cal-1 next year');
            },
            previousYear: function () {
                console.log('Cal-1 previous year');
            },
            onYearChange: function () {
                console.log('Cal-1 year changed');
            },
            nextInterval: function () {
                console.log('Cal-1 next interval');
            },
            previousInterval: function () {
                console.log('Cal-1 previous interval');
            },
            onIntervalChange: function () {
                console.log('Cal-1 interval changed');
            }
        },
        multiDayEvents: {
            singleDay: 'date',
            endDate: 'endDate',
            startDate: 'startDate'
        },
        showAdjacentMonths: true,
        adjacentDaysChangeMonth: false
    });
    // Bind all clndrs to the left and right arrow keys
    $(document).keydown(function (e) {
        // Left arrow
        if (e.keyCode == 37) {
            calendars.clndr1.back();
            calendars.clndr2.back();
            calendars.clndr3.back();
        }
        // Right arrow
        if (e.keyCode == 39) {
            calendars.clndr1.forward();
            calendars.clndr2.forward();
            calendars.clndr3.forward();
        }
    });
});

Answer 1

我不知道您的代碼，因此我正在使用github上的CLNDR測試-文件夾“ tests”。

添加在test.js的底部（基本上只是確保它在clndr激活之后）

var thisMonth = moment().format('YYYY-MM');

var temp = [{
    date: thisMonth + '-22',
    type: 1
}, {
    date: thisMonth + '-27',
    type: 2
}, {
    date: thisMonth + '-13',
    type: 1
}];
for (event of temp) {
    $('.calendar-day-' + event.date).addClass('ev-type-' + event.type);
};

然后將一些css樣式添加到test.html <head> ，以清楚地看到它正在工作

.ev-type-1 {
    background: #F00 !important;
    color: #fff !important;
}
.ev-type-2 {
    background: #0F0 !important;
    color: #fff !important;
}