1

Estoy usando el plugin FullCalendar, en el cual muestro los registros de asistencia de los usuarios pero solo faltas(Rojo) y retardos (Amarillo), muestro solo los datos por mes: Ejemplo En lo que tengo duda es como llenar todo el cuadro de un solo color, como ven me muestra solo una parte, no tengo una fecha/hora fin del evento solo el dia en que llegarón tarde o faltaron.

He intentado:

 $calendar.fullCalendar({
     defaultTimedEventDuration:"24:00", // Tiempo por default que dura el evento 24 hrs
     allDaySlot:true,
     forceEventDuration:true
 });

Y los datos con los cuales lleno el Calendario estan de la siguiente manera:

 var events =  {
                    title: "",
                    start:  ISODate("2017-11-15T00:00:00.122Z"),
                    allDay: true,
                    color: "#e1f40c",
                };
            );
  callback(events);

1 respuesta 1

1

Según la documentación deberías implementar el evento dayRender, el cual te pide la fecha y la celda que quieres colorear o modificar; sería algo como:

$calendar.fullCalendar({
    dayRender: function (date, cell) {
      var today = new Date();
      if(date.format("DD") == today.getDate()){
        cell.css("background-color", "red");
      }   
    }
});

Adjunto ejemplo:

$(document).ready(function(){
  $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },
    
    defaultView: 'month',
    
    dayRender: function (date, cell) {
      var today = new Date();
       if(date.format("DD") == today.getDate()){
        cell.css("background-color", "red");
      }   
    }
  })
})
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.7.0/fullcalendar.css">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.7.0/fullcalendar.js"></script>
  </head>

  <body>
    <div id='calendar'></div>
  </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.