Как выделить день, в котором есть событие в 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

Heres другой Fiddle 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

Ни один из них не будет работать в течение> = v2.0, так как fullCalendar начал используя момент.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

Вы можете использовать eventRender() свойство Full Canendar.

Это работает для меня с 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.

не