Cambiar el color de eventos pasados ​​en Fullcalendar

Question

Estoy tratando de implementar this solution para "agotar" eventos pasados ​​en Fullcalendar, pero no estoy teniendo suerte. Aunque no estoy muy bien versado en Javascript, asumo que estoy cometiendo algunos errores tontos.

me ha estado poniendo el código sugerido en fullcalendar.js, dentro de la convocatoria de daySegHTML (segs) alrededor de la línea 4587.

añadí las dos primeras líneas al final de la lista var inicial de la función (¿Por qué no, pensé) -SO algo como esto:

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

Entonces, justo debajo, añadí las otras dos líneas dentro del ciclo:

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

al ejecutar este código da como resultado un calendario renderizado sin eventos mostrados y un mensaje de error: UnEught TypeError: no se puede llamar al método 'getTime' de null

El "nulo" al que se hace referencia es, aparentemente, event.end.getTime(). Pero no estoy seguro de entender qué es exactamente lo que está mal o cómo se están ejecutando las cosas. Como está escrito, parece que debería funcionar. En este punto del código, por lo que puedo decir, event.end contiene un código de tiempo IETF válido, pero por alguna razón no está "allí" cuando intento ejecutarlo a través de getTime()?

Este no es un cambio de misión crítica para mí, pero igual sería bueno, ¡y también me gustaría entender qué está pasando y qué estoy haciendo mal! Cualquier ayuda muy apreciada!

Answer 1

No hay necesidad de jugar con fullcalendar.js. Simplemente agregue una devolución de llamada, como:

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

solo tiene que definir el CSS correcto para .greyclass.

Answer 2

Ok, así que aquí es lo que tengo ahora, que está trabajando (tipo de):

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

En mi hoja de estilo, me encontré con que tenía que cambiar el estilo de los elementos exteriores e interiores para cambiar el color; así la adición elt.children().addclass.

La única vez que podía trabajar, sin tiempo de finalización para los eventos de todo el día, era ver la hora de inicio, pero esto obviamente causará problemas con los eventos de varios días.

¿Existe alguna otra solución posible?

Answer 3

Cada evento tiene una ID asociada. Es una buena idea mantener su propia metainformación sobre todos los eventos en función de sus ID. Si obtiene los eventos extraídos de una base de datos back-end, agregue un campo a su tabla. Lo que funcionó mejor para mí es confiar en las devoluciones de llamadas solo para obtener los identificadores de eventos y luego configurar/restablecer los atributos obtenidos de mi propio almacén de datos. Solo para darle una perspectiva, pegaré debajo de una sección de mi fragmento de código. La clave es apuntar a la clase EventDAO para todas sus necesidades.

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

Los escalones altos niveles son las siguientes:

1. añadir un alojamiento a su clase cevent. Llámalo className o cualquier otra cosa que desees.
2. Llénelo en la clase EventDAO mientras obtiene todos los eventos. Use la base de datos o cualquier otra tienda local que mantenga para obtener la metainformación.
3. En su jsonresponse.ashx, recupere el className y agréguelo al evento devuelto.

fragmento de ejemplo de 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

Adaptado de @ Jeff respuesta original simplemente comprobar para ver si existe una fecha de finalización, si lo usa de otra manera utilizar la fecha de inicio. Hay una clave allDay (verdadera/falsa) pero los eventos non allDay aún se pueden crear sin una fecha de finalización, por lo que aún generará un error nulo. El siguiente código me ha funcionado.

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

Según v1.6.4 FullCalendar eventos pasados ​​en css

Estilo:

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

estilo acontecimientos futuros en css:

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

Answer 6

Si está utilizando FullCalendar2 con Google Calendario, necesitarás usar la versión del código a continuación. Esto usa Moment.js para realizar algunas conversiones, pero como FC2 lo requiere, ya lo utilizará.

 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

Adaptado de @MaxD El siguiente código es lo que utilicé para colorear los eventos pasados ​​grises.

JS para fullcalendar que tiran en JSON

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

'event.end' en mi JSON es un tiempo de fecha completa '10/10/2017 10:00:00'

CSS

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