How to increase fullCalendar time

Question

As it leaves the fullCalendar time period in four period of 15 me each. And how to start the timeline through a finished time. By default the plug comes initialized at 0:00 and end 23:00.

Another question is how I colored a certain time that will not be available in the agenda for example lunch time;

To change the color of a certain time I’m trying this way:

var calendar = new Calendar(calendarEl, {
  defaultDate: '2014-11-10',
  defaultView: 'timeGridWeek',
  events: [
    {
      start: '2014-11-10T10:00:00',
      end: '2014-11-10T16:00:00',
      rendering: 'background'
    }
  ]   

Answer 1

Duration of slots

To split the one-hour period into 4 15-minute slots, use the property slotDuration.

Example: slotDuration: '00:15:00',

Link to Documentation.

---

Start Time of the calendar

To set the start time of the calendar the property is minTime.

Example: minTime: '08:00:00',

Link to documentation.

---

Timetable for the end of the calendar

To set the calendar end time the property is maxTime

Example: maxTime: '18:00:00',

Link to documentation.

---

Working hours

To set the working hours and keep the hours out of office with another color use the property businessHours

Example: businessHours:

[ // specify an array instead
  {
    daysOfWeek: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
    startTime: '08:00', // 8am
    endTime: '18:00' // 6pm
  },
  {
    daysOfWeek: [ 4, 5 ], // Thursday, Friday
    startTime: '10:00', // 10am
    endTime: '16:00' // 4pm
  }
]

Link to documentation.

---

Change the colour of off-hours

When adding the property businessHours to div times out of time will be generated with the class='fc-nonbusiness' and will have a light gray color (#d7d7d7).

To change the color just change your css adding something like the example below:

.fc-nonbusiness {
   background: #fff
}

---

Fix formatting on the timetable grid

After placing the property slotDuration the timetable grid may not display minutes for closed hours(:00), for example 07:00 is showing 07.

I did not find in the documentation a property to configure this, I decided to make the manual adjustment in the event viewRender of the calendar, by doing a sign on the objects and correcting the texts in the property.

Following example:

viewRender: function() {
    $('tr.fc-minor').each(function() { 
        const time = $(this).attr('data-time'); 
        const a = time.split(':'); 
        const seconds = a[0] + ":" + a[1];
        $(this).find('.fc-time').html(seconds);
    });
}