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

您可以使用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

这些都不适用于＆gt; = 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

您可以在fullcalendar .fc-event类的基础上添加类，但这不是直接的方法，而是它的工作原理。

Fiddle demo

   $(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，适用于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');
    }
},

突出显示活动的所有日子。

example fullcalendar day highlight

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

9 个答案: