如何突出顯示在FullCalendar.js中有一個事件的日子？

Question

我在我的網站上使用FullCalendar.js。我從後端設置了事件。我想改變有事件的一天的外觀。換句話說，我需要某種類型的「fc-day」類和其中的事件。

My code looks like and you see it on 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

我無法找到所需的屬性或方法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 2

您可以在fullcalender .fc事件類它不是直接的方法，但其作品的基礎添加類。

Fiddle demo

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

Answer 3

繼承人另一小提琴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 4

這是我這樣做是爲了給背景顏色爲每一個事件。

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 5

最後，這是它是如何工作的，我看看這個

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 6

這些都不會爲> = 2.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

weswesweswes幾乎是正確的view.element應視圖。埃爾

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 8

Fullcalendar V2，爲agendaWeek觀點：

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 9

你可以使用全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'); 
    } 

}); 

Node: You will need Moment library for this.