Question

我正试图在Fullcalendar中实现this solution以“灰显”过去的事件，但我没有运气。不过，我不太熟悉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

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

Answer 2

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

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

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

Answer 3

根据FullCalendar v1.6.4

在css中设置过去的事件：

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

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

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

Answer 4

每个事件都有一个与之关联的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) + "'" +  "},";

Answer 5

 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

Answer 6

好的，所以这就是我现在所拥有的，那是有效的（有点）：

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加法。

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

还有其他可能的解决方案吗？

Answer 7

改编自@Jeff原始答案只需检查是否存在结束日期，是否使用它，否则使用开始日期。有一个allDay键（true / false）但是仍然可以在没有结束日期的情况下创建非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");
                }
            }
        }

Answer 8

改编自@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 ....

＆＃39; event.end＆＃39;在我的Json中是一个完整的约会时间＆＃39; 2017-10-10 10：00：00＆＃39;

CSS

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

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

8 个答案: