在Fullcalendar中更改过去事件的颜色 [英] Change color of past events in Fullcalendar

问题描述

我正在尝试执行此解决方案，以在Fullcalendar中灰掉过去的事件，但我没有任何运气。但我并不太熟悉Javascript，所以我认为我犯了一些愚蠢的错误。

我一直在将建议的代码放入fullcalendar.js ，在第4587行附近调用了daySegHTML（segs）。

我在函数的初始var列表末尾添加了前两行（为什么不，我想） - 这是这样的：

  ... 
 var leftCol; 
 var rightCol; 
 var left; 
 var right; 
 var skinCss; 
 
 var hoy = new Date; //得到今天的日期
 hoy = parseInt（（hoy.getTime（））/ 1000）; //在unix中获得今天的日期
 
 var html =''; 
 ... 
  

然后，在下面，我在循环内添加了另外两行：
$ b $ pre $ for（i = 0; 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）; // unixevent< hoy）{classes.push（'fc-past'）;} //如果事件是旧的，则添加类

if（rtl） {
if（seg.isStart）{
classes.push（'fc-corner-right'）;
}
...


运行此代码将生成一个带有渲染日历没有事件显示和错误消息：Uncaught TypeError：无法调用null方法'getTime'

被引用的null显然是event.end.getTime （）。但我不确定我是否明白到底发生了什么问题，或者如何执行。正如所写，似乎它应该起作用。在代码中的这一点，event.end包含一个有效的IETF时间码，但由于某种原因，当我尝试通过getTime（）运行时，它不存在？

这对我来说不是一项任务关键性的调整，但仍然不错 - 我想了解发生了什么事以及我做错了什么！任何帮助我们都非常感谢！

解决方案

如果您在Google日历中使用FullCalendar2，则需要使用下面的代码版本。这使用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）; 
} 
} 
} 
  

I'm trying to implement this solution to "grey out" past events in Fullcalendar, but I'm not having any luck. I'm not too well versed in Javascript, though, so I assume I'm making some dumb mistakes.

I've been putting the suggested code into fullcalendar.js, inside the call for daySegHTML(segs) around line 4587.

I added the first two lines at the end of the function's initial var list (Why not, I figured)—so something like this:

...
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 = '';
...

Then, just below, I added the other two lines inside the loop:

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');
        }
...

Running this code results in a rendered calendar with no events displayed and an error message: Uncaught TypeError: Cannot call method 'getTime' of null

The "null" being referred to is, apparently, event.end.getTime(). But I'm not sure I understand what exactly is going wrong, or how things are being executed. As written, it seems like it should work. At this point in the code, from what I can tell, event.end contains a valid IETF timecode, but for some reason it's "not there" when I try to run it through getTime()?

This isn't a mission-critical tweak for me, but would still be nice—and I'd like to understand what's going on and what I'm doing wrong, as well! Any help greatly appreciated!

解决方案

If you are using FullCalendar2 with Google Calendar, you will need to use the version of the code below. This uses Moment.js to do some conversions, but since FC2 requires it, you'll be using it already.

        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");
                }
            }
        }

这篇关于在Fullcalendar中更改过去事件的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！