Mark all day in Full Calendar

Question

Mark all day in Full Calendar

Navigation

#1 by (1 votes)

1

I am using the FullCalendar plugin, in which I show the attendance records of the users but only faults (Red) and delays (Yellow) , I show only the data per month: In what I have doubts is how to fill the whole picture with a single color, as you see it shows me only one part, I do not have a date / time end of the event only the day I arrived late or missed.

I tried:

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

And the data with which I fill the Calendar are as follows:

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

javascript fullcalendar

asked by Rastalovely 16.11.2017 в 18:46

source

1 answer

How to reduce the width of the navigation bar elements created with bootstrap? Filter in DataGridView c #

score 1 · Answer 1

According to the documentation you should implement the event dayRender , which asks for the date and the cell you want to color or Modify; It would be something like:

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

Attached example:

$(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>