更改Fullcalendar中过去事件的颜色

我试图实现在Fullcalendar中“灰显”过去的事件，但我没有任何运气。不过，我对Javascript不是很精通，所以我认为我犯了一些愚蠢的错误

我已经将建议的代码放入fullcalendar.js中，在第4587行的daySegHTML（segs）调用中

我在函数的初始变量列表的末尾添加了前两行（为什么不添加，我想），所以类似这样：

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

---

for（i=0；i无需修改fullcalendar.js。只需添加回调，如：

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

eventRender:function（calev、elt、view）{
if（calev.end.getTime（）

您只需为.greyclass定义正确的CSS即可。
好的，下面是我现在得到的，它正在工作（某种程度上）：

eventRender:function（calev、elt、view）{
var ntoday=新日期（）；
if（calev.start.getTime（）

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

我唯一能去上班的时间检查是查看开始时间，因为全天活动都没有结束时间，但这显然会导致多天活动出现问题

还有其他可能的解决方案吗？
每个事件都有一个与之关联的ID。最好根据事件ID维护您自己关于所有事件的元信息。如果您是从后端数据库弹出事件，请在表中添加一个字段。对我来说，最有效的方法是仅依靠回调来获取事件IDd然后设置/重置从我自己的数据存储中获取的属性。为了让您了解一些情况，我将粘贴在代码片段的一部分下面。关键是针对
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);
        }
    }
}

改编自@Jeff original answer，只需检查是否存在结束日期，如果它使用结束日期，则使用开始日期。有全天键（true/false），但仍然可以创建非全天事件，而无结束日期，因此它仍会抛出空错误。下面的代码对我有效

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

eventRender:function（calev、elt、view）{
var ntoday=new Date（）.getTime（）；
如果（！calev.end）{
if（calev.start.getTime（）
根据FullCalendar v1.6.4

在css中设置过去事件的样式：

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

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

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

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

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

如果您将FullCalendar2与Google Calendar一起使用，则需要使用下面的代码版本。这将使用矩.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");
                }
            }
        }

eventRender:function（事件、元素、视图）{
var ntoday=new Date（）.getTime（）；
var eventEnd=力矩（event.end）.valueOf（）；
var eventStart=时刻（event.start）.valueOf（）；
如果（！event.end）{
如果（事件开始<当天）{
元素addClass（“过去事件”）；
element.children（）.addClass（“过去的事件”）；
}
}否则{
如果（eventEnd
改编自@MaxD下面的代码是我用来将过去事件涂成灰色的代码

JS for fullcalendar拉入Json

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

太棒了！我尝试过使用回调函数，但没有完全掌握语法的窍门。（就像我说的，Javascript排骨令人尴尬地缺乏！）-不幸的是，这（当然是使用适当的“有时（）”替换）导致了“未捕获的TypeError:无法调用null的方法'getTime'”出于某种原因…据我所知，它不喜欢calev.end.getTime（）。是的，根据您的意愿定义时间/日期比较。至于calev.end为null，请使用调试器跟踪它；它应该是事件对象的属性：啊，看起来我在追逐一点小麻烦。第一个（几个）所讨论的日历上的事件是“全天”事件，因此calev.end属性显然是“null”，这停止了代码的进一步执行。我正在从Google日历中提取事件…是否还有其他东西可以用作捕获“今天”之前发生的全天事件的测试关于你的第二个答案：只需在elt中添加一个类，你就可以设置：
.pass.fc event title{color:gray；}
（或用于.fc event time等）来设置事件的样式。至于时间检查，“pass events”是什么意思，这取决于你自己……啊，谢谢你没有理解.fc event title。我希望过去的事件是什么意思“今天之前结束的活动”，但由于大多数活动都是全天活动，我可能不得不对我现在检查的方式感到高兴。您好，请查看我的答案，因为这将有助于多天活动。这是唯一有效的答案（使用FullCal v.2.0.3）。谢谢，Jaredatch。@问题27我应该在哪里添加此代码？它会出现在eventSources中吗？请注意，这会设置日历日的样式，而不是特定的事件。好的答案通常会与任何代码一起提供解释，以帮助提供上下文并解释它如何或为什么解决问题。
.past-event.fc-event, .past-event .fc-event-dot {
    background: #a7a7a7;
    border-color: #848484
}

 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