在Fullcalendar中更改过去事件的颜色

Question

我正在尝试实现这个解决方案,以便在Fullcalendar中"灰显"过去的事件,但我没有任何运气.不过,我不太熟悉Javascript,所以我假设我犯了一些愚蠢的错误.

我一直把建议的代码放到fullcalendar.js中,在第4587行的daySegHTML(segs)调用中.

我在函数的初始var列表的末尾添加了前两行(为什么不,我想) - 这样的事情:

...
var leftCol;
var rightCol;
var left;
var right;
var skinCss;

var hoy = new Date;// get today's date
hoy = parseInt((hoy.getTime()) / 1000); //get today date in unix

var html = '';
...

然后,就在下面,我在循环中添加了另外两行:

for (i=0; i<segCnt; i++) {
    seg = segs[i];
    event = seg.event;
    classes = ['fc-event', 'fc-event-skin', 'fc-event-hori'];
    if (isEventDraggable(event)) {
        classes.push('fc-event-draggable');
    }

    unixevent = parseInt((event.end.getTime()) / 1000); //event date in Unix
    if (unixevent < hoy) {classes.push('fc-past');} //add class if event is old

    if (rtl) {
        if (seg.isStart) {
            classes.push('fc-corner-right');
        }
...

运行此代码会导致呈现的日历没有显示任何事件,并显示错误消息:Uncaught TypeError:无法调用null的方法'getTime'

提到的"null"显然是event.end.getTime().但我不确定我明白究竟出了什么问题,或者事情是如何被执行的.如上所述,它似乎应该有效.在代码的这一点上,从我所知道的,event.end包含一个有效的IETF时间码,但由于某种原因,当我尝试通过getTime()运行它时,它"不存在"？

对我来说,这不是一个关键任务调整,但仍然很好 - 我想了解发生了什么以及我做错了什么!任何帮助非常感谢!

Answer 1

如果您将FullCalendar2与Google日历一起使用,则需要使用以下代码的版本.这使用Moment.js进行一些转换,但由于FC2需要它,你将会使用它.

        eventRender: function(event, element, view) {                   
            var ntoday = new Date().getTime();
            var eventEnd = moment( event.end ).valueOf();
            var eventStart = moment( event.start ).valueOf();
            if (!event.end){
                if (eventStart < ntoday){
                    element.addClass("past-event");
                    element.children().addClass("past-event");
                }
            } else {
                if (eventEnd < ntoday){
                    element.addClass("past-event");
                    element.children().addClass("past-event");
                }
            }
        }

Answer 2

无需摆弄 fullcalendar.js。只需添加一个回调，例如：

    eventRender: function(calev, elt, view) {
      if (calev.end.getTime() < sometime())
        elt.addClass("greyclass");
    },

您只需为 .greyclass 定义正确的 CSS 即可。