如何突出显示FullCalendar.js中有事件的日子？

Question

我在我的网站上使用FullCalendar.js.我从后端设置了事件.我想改变有活动的那一天的样子.换句话说,我需要某种类,我有"fc-day"和其中的一个事件.

我的代码看起来像你在jsFiddle上看到它:

$('#calendar').fullCalendar({
    events: [{
        title: 'event1',
        start: '2013-01-01'
    }, {
        title: 'event2',
        start: '2013-12-05',
        end: '2013-12-07'
    }, {
        title: 'event3',
        start: '2013-12-15'
    }]
})

Answer 1

您可以使用Full Canendar的eventRender()属性.

这适用于fullcalendar v2:

$('#calendar').fullCalendar({
         events: [
        {
            title  : 'event1',
            start  : '2014-04-01'
        },
        {
            title  : 'event2',
            start  : '2014-04-05',
        },
        {
            title  : 'event3',
            start  : '2014-04-15'
        }
    ],
    eventRender: function (event, element, view) { 
        // like that
        var dateString = moment(event.start).format('YYYY-MM-DD');
        $('#calendar').find('.fc-day-number[data-date="' + dateString + '"]').css('background-color', '#FAA732');
     }

});

节点:你需要Moment库.

Answer 2

我找不到在Fullcalendar文档中使用的所需属性或方法.

我提出了一种混乱的解决方案:通过数据属性添加一个类:

function addClassByDate(date) {
    var dataAttr = getDataAttr(date);
    $("[data-date='" + dataAttr + "']").addClass("hasEvent");
}

function getDataAttr(date) {
    return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate().toString().length === 2 ? date.getDate() : "0" + date.getDate());
};

您在问题中提供的设置工作正常.

可以在这里找到工作示例:http://jsfiddle.net/6NShN/9/