javascript - 将一个类附加到给定数据的 javascript 日历 (clndr.js)

Question

我希望根据值本身为出现在我的日历中的每个 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();
        }
    });
});

Answer 1

我不知道你的代码，所以我正在使用 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);
};

然后在test.html中添加一些css样式<head>只是为了清楚地看到它在工作

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