更改Fullcalendar中過去事件的顏色

Question

我試圖實施this solution以在Fullcalendar中「灰掉」過去的事件，但我沒有任何運氣。儘管如此，我並不太熟悉Javascript，所以我認爲我犯了一些愚蠢的錯誤。

我已經把建議代碼到fullcalendar.js，呼籲daySegHTML（SEGS）內圍繞線4587.

我加在函數的最初變種列表的末尾前兩行（爲什麼不，我想通） - 所以是這樣的：

... 
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

有沒有必要擺弄fullcalendar.js。只需添加一個回調，如：

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

，你只需要定義.greyclass正確的CSS。

Answer 2

好了，這裏就是我現在得到，這是工作（種）：

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 3

每個事件都有一個與其關聯的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); 
     } 
    } 
} 

的高級步驟如下：

1. 屬性添加到您的cevent類。稱之爲className或其他任何你想要的東西。
2. 在獲取所有事件的同時在EventDAO課程中填寫。使用數據庫或您維護的任何其他本地商店來獲取元信息。
3. 在您的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 4

從@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 5

按FullCalendar v1.6.4

風格CSS往事：

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

風格未來的CSS事件：

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

Answer 6

如果您使用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 7

改編自@MaxD下面的代碼是我用來爲過去的事件着色的灰色。

JS的fullcalendar在我的Json以JSON拉動

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

'event.end' 是一個完整的日期時間 '2017年10月10日10:00:00'

CSS

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