如何突出顯示 FullCalendar.js 中有事件的一天？

Question

我在我的網站上使用 FullCalendar.js。 我已經從后端設置了事件。 我想更改有活動當天的外觀。 換句話說，我需要某種 class，其中包含“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/

Answer 3

這就是我為每個事件賦予背景顏色的方式。

JS FIDDLE DEMO

events: [
     {
       title: 'Test1',
       start: new Date(2014, 2, 28, 12, 0),
       end: new Date(2014, 2, 30, 12, 0), 
       backgroundColor: '#80ACED',
     },
     {
       title: 'Test2',
       start: new Date(2014, 2, 14, 3, 55),
       end: new Date(2014, 2, 21, 12, 0), 
       backgroundColor: '#80ACED',
     },
     {
       title: 'Test3',
       start: new Date(2014, 2, 2, 12, 0),
       end: new Date(2014, 2, 2, 12, 0), 
       backgroundColor: '#E82525',
     }
       ]

希望這可以幫助。 請參閱： http : //arshaw.com/fullcalendar/docs/event_data/Event_Object/

Answer 4

最后，這對我來說是如何工作的

jsfiddle

$('#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 = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
        view.element.find('.fc-day[data-date="' + dateString + '"]').css('background-color', '#FAA732');
     }

});

Answer 5

weswesweswes幾乎是正確的view.element應該是view.el

eventRender: function (event, element, view) { 

    var dateString = moment(event.start).format('YYYY-MM-DD');

    view.el.find('.fc-day[data-date="' + dateString + '"]').addClass('fc-has-event');

}

Answer 6

這些都不適用於> = v2.0，因為fullCalendar開始使用moment.js進行日期格式化。

以下對我有用（傳遞給fullCalendar初始化函數）：

eventRender: function (event, element, view) { 

var dateString = moment(event.start).format('YYYY-MM-DD');

view.element.find('.fc-day[data-date="' + dateString + '"]').addClass('fc-has-event');

}

Answer 7

您可以在fullcalender .fc-event類的基礎上添加類，這不是直接方法，而是其工作原理。

小提琴演示

   $(document).ready(function (){ 
   $(".fc-event").addClass("myclass");
  });

Answer 8

這是另一個小提琴JS FIDDLE

只需添加

textColor: 'white',
backgroundColor:'purple' 

你可以改變風格

JS代碼：

$('#calendar').fullCalendar({

    eventSources: [

        // your event source
        {
            events: [
        {
            title  : 'event1',
            start  : '2013-01-01'
        },
        {
            title  : 'event2',
            start  : '2013-12-05',
            end    : '2013-12-07'
        },
        {
            title  : 'event3',
            start  : '2013-12-15'
        }],

            textColor: 'white',
            backgroundColor:'purple'
        }

        // any other event sources...

    ]

});

Answer 9

Fullcalendar v2，用於scheduleWeek視圖：

eventRender: function(event, element, view ){
    if(view.name=='agendaWeek') {
        var weekdays = new Array('sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat');
        var eventweekday = $.fullCalendar.moment(event.start).format('d');
        $('.fc-'+weekdays[eventweekday]).css('background-color', '#FFC');
    }
},

突出顯示所有活動日。

Answer 10

遇到了同樣的問題，並為 FullCalendar 的舊版本找到了一堆解決方案（無論如何看起來有點老套）。 但是，在 v5 中，您可以使用 eventDidMount 並將 DOM 向上遍歷到日期單元格。

JS代碼：

eventDidMount: function(info) {
    $(info.el).closest(".fc-daygrid-day").addClass("has-event");
}