更改 Fullcalendar 中过去事件的颜色

2024-01-11

我正在尝试实施这个解决方案 https://stackoverflow.com/questions/4016044/adding-a-class-to-past-events-using-fullcalendar-with-google-calendar/4018216#4018216将 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: Cannot call method 'getTime' of null

显然,所指的“null”是 event.end.getTime()。但我不确定我是否明白到底出了什么问题,或者事情是如何执行的。正如所写,它似乎应该有效。在代码中的这一点上,据我所知,event.end 包含有效的 IETF 时间码,但由于某种原因,当我尝试通过 getTime() 运行它时,它“不存在”?

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


如果您将 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");
                }
            }
        }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

更改 Fullcalendar 中过去事件的颜色 的相关文章

随机推荐