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

运行此代码会导致呈现的日历不显示任何事件并显示错误消息：未捕获的 TypeError：无法调用 null 的方法“getTime”

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

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

score 7 · Accepted Answer

如果您将 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");
                }
            }
        }

score 3 · Accepted Answer

根据 FullCalendar v1.6.4

在 CSS 中样式化过去的事件：

.fc-past{background-color:red;}

在 CSS 中设置未来事件的样式：

.fc-future{background-color:red;}

score 2 · Accepted Answer

没有必要摆弄 fullcalendar.js。只需添加一个回调，例如：

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

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

score 1 · Accepted Answer

每个事件都有一个与之关联的 ID。最好根据事件的 id 维护自己的所有事件的元信息。如果您要从后端数据库弹出事件，请在表中添加一个字段。对我来说最有效的是仅依靠回调来获取事件 ID，然后设置/重置从我自己的数据存储中获取的属性。只是为了给您一些观点，我将粘贴下面的一段代码片段。关键是针对EventDAO您的所有需求的课程。

public class EventDAO
{
    //change the connection string as per your database connection.
    //private static string connectionString = "Data Source=ASHIT\\SQLEXPRESS;Initial Catalog=amit;Integrated Security=True";

    //this method retrieves all events within range start-end
    public static List<CalendarEvent> getEvents(DateTime start, DateTime end, long nParlorID)
    {
        List<CalendarEvent> events = new List<CalendarEvent>();

        // your data access class instance
        clsAppointments objAppts = new clsAppointments();

        DataTable dt = objAppts.SelectAll( start, end);

        for(int i=0; i<dt.Rows.Count; ++i)
        {
            CalendarEvent cevent = new CalendarEvent();
            cevent.id = (int)Convert.ToInt64(dt.Rows[i]["ID"]);

                .....            

            Int32 apptDuration = objAppts.GetDuration();    // minutes
            string staffName =  objAppts.GetStaffName();
            string eventDesc = objAppts.GetServiceName();
            cevent.title = eventDesc + ":" + staffName;

            cevent.description = "Staff name: " + staffName + ", Description: " + eventDesc;

            cevent.start = (DateTime)dt.Rows[i]["AppointmentDate"];


            cevent.end = (DateTime) cevent.start.AddMinutes(apptDuration);

            // set appropriate classNames based on whatever parameters you have.
            if (cevent.start < DateTime.Now)
            {
                cevent.className = "pastEventsClass";
            }
            .....

            events.Add(cevent);
        }
    }
}

高级步骤如下：

将属性添加到您的cevent类。调用它className或任何你想要的东西。
EventDAO在获取所有事件的同时在课堂上填写。使用数据库或您维护的任何其他本地存储来获取元信息。
在您的jsonresponse.ashx中，检索className并将其添加到返回的事件中。

示例片段来自jsonresponse.ashx：

return    "{" +
    "id: '" + cevent.id + "'," +
    "title: '" + HttpContext.Current.Server.HtmlEncode(cevent.title) + "'," +
    "start:  " + ConvertToTimestamp(cevent.start).ToString() + "," +
    "end: " + ConvertToTimestamp(cevent.end).ToString() + "," +
    "allDay:" + allDay + "," +
    "className: '" + cevent.className + "'," +
    "description: '" + 
    HttpContext.Current.Server.HtmlEncode(cevent.description) + "'" +  "},";

score 1 · Accepted Answer

 eventDataTransform = (eventData) => {
       let newDate = new Date();
          if(new Date(newDate.setHours(0, 0, 0, 0)).getTime() > eventData.start.getTime()){            
              eventData.color = "grey";        
          }else{
              eventData.color = "blue";    
          }
          return eventData;
      }
//color will change background color of event
//textColor to change the text color

score 1 · Accepted Answer

改编自@MaxD 下面的代码是我用来将过去的事件涂成灰色的代码。

用于全日历拉入 Json 的 JS

 events: '/json-feed.php',
 eventRender: function(event,element,view) {
         if (event.end < new Date().getTime())
          element.addClass("past-event");   
    },
 other options ....

我的 Json 中的“event.end”是完整的日期时间“2017-10-10 10:00:00”

CSS

.past-event.fc-event, .past-event .fc-event-dot {
    background: #a7a7a7;
    border-color: #848484
}

score 0 · Accepted Answer

好的，这就是我现在所拥有的，它正在工作（有点）：

eventRender: function(calev, elt, view) {
      var ntoday = new Date();
      if (calev.start.getTime() < ntoday.getTime()){
          elt.addClass("past");
          elt.children().addClass("past");
      }
}

在我的样式表中，我发现我需要重新设置外部和内部元素的样式以更改颜色；因此elt.children().addclass加法。

我可以上班的唯一时间检查，缺少全天活动的结束时间，是查看开始时间 - 但这显然会导致多天活动出现问题。

还有另一种可能的解决方案吗？

score 0 · Accepted Answer

改编自@Jeff 原始答案，只需检查是否存在结束日期，如果确实使用它，则使用开始日期。有一个 allDay 键（真/假），但仍然可以在没有结束日期的情况下创建非 allDay 事件，因此它仍然会引发空错误。下面的代码对我有用。

eventRender: function(calev, elt, view) {
            var ntoday = new Date().getTime();
            if (!calev.end){
                if (calev.start.getTime() < ntoday){
                    elt.addClass("past");
                    elt.children().addClass("past");
                }
            } else {
                if (calev.end.getTime() < ntoday){
                    elt.addClass("past");
                    elt.children().addClass("past");
                }
            }
        }

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

8 回答 8

Related

Reference