在给定数据的情况下将类附加到javascript日历(clndr.js)

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 - 文件夹“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;
}