javascript - 根据数据(clndr.js)将类追加到javascript日历中

我想根据值本身为日历中出现的每个clndr.js事件分配一个类。 var temp显示了接收到的数据的示例。我想将每个事件的样式设置为1或2。代码显示了我想要修改的默认模板，只需将type中传递的值作为一个类添加即可，然后就可以对其进行样式设置。

link to the source library on github

link to a similar problem on 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();
        }
    });
});

最佳答案

我不知道您的代码，因此我正在从github-文件夹“tests”中进行CLNDR的测试。

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