Zmień kolor poprzednich wydarzeń w Fullcalendar

Question

Próbuję zaimplementować this solution do "szarej" przeszłych wydarzeń w Fullcalendar, ale nie mam szczęścia. Nie jestem jednak zbyt dobrze zaznajomiony z Javascriptem, więc zakładam, że robię głupie błędy.

byłem oddanie sugerowany kod do fullcalendar.js wewnątrz zaproszenia do daySegHTML (Segs) wokół linii 4587.

dodałem dwie pierwsze linie na końcu początkowej listy var danej funkcji (Dlaczego nie, pomyślałem) Więc coś takiego:

... 
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 = ''; 
... 

Następnie, tuż poniżej, dodałem dwie inne linie wewnątrz pętli:

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

Running ten kod rezultaty wyrenderowany kalendarz bez wyświetlanych zdarzeń i komunikat o błędzie: Uncaught TypeError: Nie można wywołać metody "getTime" o wartości null

Wskazana wartość "null" to, najwyraźniej, event.end.getTime(). Ale nie jestem pewien, czy rozumiem, co dokładnie idzie źle, ani jak rzeczy są wykonywane. Jak napisano, wygląda na to, że powinno działać. W tym momencie kodu, z tego, co mogę powiedzieć, event.end zawiera poprawny kod czasowy IETF, ale z jakiegoś powodu jest "tam", gdy próbuję uruchomić go przez getTime()?

To nie jest dla mnie kluczowa zmiana, ale nadal będzie miło - i chciałbym zrozumieć, co się dzieje i co robię źle! Każda pomoc bardzo doceniona!

Answer 1

Nie trzeba ćwiczyć z plikiem fullcalendar.js. Wystarczy dodać wywołanie zwrotne, takie jak:

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

wystarczy, że zdefiniujesz poprawny styl CSS dla .greczlass.

Answer 2

Ok, więc tutaj jest to, co mam teraz, że działa (rodzaj):

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

W moim arkusza stylów, znalazłem, że muszę zmienić styl zewnętrzne i wewnętrzne elementy do zmiany koloru; w ten sposób dodano elt.children().addclass.

Jedynym sprawdzeniem, w czasie którego mogłem zabrać się do pracy, pozbawionym czasu zakończenia wszystkich wydarzeń całodniowych, było sprawdzenie czasu rozpoczęcia, ale oczywiście spowoduje to problemy z wydarzeniami wielodniowymi.

Czy istnieje inne możliwe rozwiązanie?

Answer 3

Każde wydarzenie ma przypisany identyfikator. Dobrym pomysłem jest utrzymywanie własnych meta-informacji o wszystkich zdarzeniach w oparciu o ich identyfikatory. Jeśli otrzymujesz zdarzenia wyskakujące z bazy danych zaplecza, dodaj pole do swojej tabeli. Najlepsze dla mnie jest poleganie na wywoływaniach zwrotnych tylko po to, aby uzyskać identyfikatory zdarzeń, a następnie ustawić/zresetować atrybuty pobrane z mojego własnego magazynu danych. Aby dać ci jakąś perspektywę, wklejam poniżej sekcję mojego fragmentu kodu. Kluczem jest kierowanie na klasę EventDAO dla wszystkich Twoich potrzeb.

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

kroki wysokiego szczebla są następujące:

1. dodać obiekt do klasy cevent. Nazwij to className lub cokolwiek innego, czego pragniesz.
2. Wypełnij go w klasie EventDAO podczas pobierania wszystkich zdarzeń. Użyj bazy danych lub dowolnego innego sklepu lokalnego, który utrzymujesz, aby uzyskać metadane.
3. W swoim jsonresponse.ashx pobierz className i dodaj go do zdarzenia zwróconego.

Przykładowy fragment z 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

Adaptacja @Jeff oryginalnej odpowiedzi po prostu sprawdzić, czy data zakończenia istnieje, jeśli nie używać go w inny sposób wykorzystywać datę rozpoczęcia. Istnieje klucz allDay (true/false), ale zdarzenia non allDay mogą być nadal tworzone bez daty zakończenia, więc nadal będą zgłaszać błąd zerowy. Poniższy kod zadziałał u mnie.

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

Zgodnie FullCalendar v1.6.4

Style ostatnich wydarzeń w CSS:

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

Style przyszłych zdarzeń w CSS:

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

Answer 6

Jeśli używasz FullCalendar2 z Google Kalendarz, będziesz musiał użyć wersji kodu poniżej. Korzysta z Moment.js do wykonywania niektórych konwersji, ale ponieważ FC2 tego wymaga, będziesz już z niego korzystać.

 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

Zaadaptowany z @MaxD Poniższy kod służy do kolorowania przeszłych wydarzeń w kolorze szarym.

JS dla fullcalendar ciągnięcie w Json

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

'event.end' w moim JSON jest pełna data czas '10.10.2017 10:00:00'

CSS

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