How to color the working hours with fullcalendar?

I found a new way to this solution: While businessHours works I had another problem that was adding an array of business hours and it also works the opposite way as my problem was stipulated.

I found this problem in the main Stack Overflow: link

What I did was add a light green event with opacity:

events: [
    {
        start: '00:00:00+02:00',
        end: '08:00:00+02:00',
        color: 'green',
        rendering: 'background',
        dow: [1,2,3,4,5]
    },

    {
        start: '16:00:00+02:00',
        end: '24:00:00+02:00',
        color: 'green',
        rendering: 'background',
        dow: [1,2,3,4,5]
    },

    {
        start: '00:00:00+02:00',
        end: '8:00:00+02:00',
        color: 'green',
        rendering: 'background',
        dow: [6]
    },

    {
        start: '12:00:00+02:00',
        end: '24:00:00+02:00',
        color: 'green',
        rendering: 'background',
        dow: [6]
    }
]

Thanks @rnrneverdies for clarifying my doubts

Fullcalendar has a similar function incorporated, but it works in reverse of what you want. That is, it colors non-working hours.

The businessHours property sets the time range and weekdays that you want to highlight differently (non-business hours) ).

This does not create fullcalendar events, is just to show which hours are working and which are not.

To change colors, you must modify the .fc-nonbusiness style for non-working days

Unfortunately, it only allows you to configure the same pattern for each day of the week that is working.

This must be added to the fullcalendar initialization:

businessHours: {
  start: '10:00', // hora final
  end: '18:00', // hora inicial
  dow: [ 1, 2, 3, 4, 5 ] // dias de semana, 0=Domingo
}

Complete example:

$(function() {
  $('#calendar').fullCalendar({
      defaultView: 'agendaWeek',
      allDaySlot: false,
      header: {
        left: 'prev,next today myCustomButton',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      businessHours: {
        start: '10:00', // hora final
        end: '18:00', // hora inicial
        dow: [ 1, 2, 3, 4, 5 ] // dias de semana, 0=Domingo
      },
      dayClick: function(date, jsEvent, view) {
        $("#hora_seleccionada").html(date.format("MM/DD/YYYY, h:mm:ss"));
      }
  });
});

@import "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.css";

.fc-nonbusiness {
  background: #90EE90  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.js"></script>

<div id='hora_seleccionada'></div>
<hr>
<div id='calendar'></div>