Background color on calendar specific days and times

Question

I have this calendar as shown in the image:

I intended every Tuesday from 2:30 to 5:30 and Thursday from 10:30 to 12:00 to appear with a different background color than the rest of the days. This is the code of the calendar:

<script>

    $(document).ready(function() {

       var date = new Date();
       var yyyy = date.getFullYear().toString();
       var mm = (date.getMonth()+1).toString().length == 1 ? "0"+(date.getMonth()+1).toString() : (date.getMonth()+1).toString();
       var dd  = (date.getDate()).toString().length == 1 ? "0"+(date.getDate()).toString() : (date.getDate()).toString();
       var dia = yyyy+"-"+mm+"-"+dd;
        $('#calendar').fullCalendar({
            header: {
                language: 'PT',
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek',

            },
            defaultDate: dia,
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            selectable: true,
            selectHelper: true,
            select: function(start, end) {

                $('#ModalAdd #start').val((start).format('YYYY-MM-DD HH:mm:ss'));
                $('#ModalAdd #end').val((end).format('YYYY-MM-DD HH:mm:ss'));
                $('#ModalAdd').modal('show');
            },
            eventRender: function(event, element) {
                element.bind('dblclick', function() {
                    $('#ModalEdit #id').val(event.id);
                    $('#ModalEdit #title').val(event.title);
                    $('#ModalEdit #nome').val(event.nome);
                    $('#ModalEdit #contact').val(event.contact);
                    $('#ModalEdit #color').val(event.color);
                    $('#ModalEdit #start').val(moment(event.start).format('YYYY-MM-DD HH:mm:ss'));
                    $('#ModalEdit #end').val(moment(event.end).format('YYYY-MM-DD HH:mm:ss'));                  
                    $('#ModalEdit').modal('show');
                });
            },
            eventDrop: function(event, delta, revertFunc) { // si changement de position

                edit(event);

            },
            eventResize: function(event,dayDelta,minuteDelta,revertFunc) { // si changement de longueur

                edit(event);

            },
            events: [
            <?php foreach($events as $event): 

                $start = explode(" ", $event['start']);
                $end = explode(" ", $event['end']);
                if($start[1] == '00:00:00'){
                    $start = $start[0];
                }else{
                    $start = $event['start'];
                }
                if($end[1] == '00:00:00'){
                    $end = $end[0];
                }else{
                    $end = $event['end'];
                }
            ?>
                {
                    id: '<?php echo $event['id']; ?>',
                    title: '<?php echo $event['title']; ?>',
                    nome: '<?php echo $event['nome']; ?>',
                    contact: '<?php echo $event['contact']; ?>',
                    start: '<?php echo $start ?>',
                    end: '<?php echo $end ?>',
                    color: '<?php echo $event['color']; ?>',
                },
            <?php endforeach; ?>
            ]
        });

        function edit(event){
            start = event.start.format('YYYY-MM-DD HH:mm:ss');
            if(event.end){
                end = event.end.format('YYYY-MM-DD HH:mm:ss');
            }else{
                end = start;
            }

            id =  event.id;

            Event = [];
            Event[0] = id;
            Event[1] = start;
            Event[2] = end;

            $.ajax({
             url: './updatehoradataeventoLar',
             type: "POST",
             data: {Event:Event},
             success: function(rep) {
                    if(rep == 'OK'){
                        alert('Atividade Guardada correctamente');
                    }else{
                        alert('Tente novamente!'); 
                    }
                }
            });
        }

    });

</script>

Answer 1

You need to generate the event and add the property rendering: 'background', this will make him have a differentiated fund.

To set the color you want, overwrite the class "Fc-bgevent".
Example:

events: [
    {
      title: 'teste',
      start: '2018-09-10T10:00:00',
      end: '2018-09-10T16:00:00',
      rendering: 'background'
    }
  ]

And the css:

.fc-bgevent {
  background-color: yellow
}

See here an example working: http://jsfiddle.net/xpvt214o/767562/

And here the documentation: https://fullcalendar.io/docs/background-events

Answer 2

With the help of Ricardo Pontual I managed to solve my problem as follows:

$('#calendar').fullCalendar({
            defaultView: 'agendaWeek',
            businessHours: [ // specify an array instead
  {
    dow: [ 2 ], // Monday, Tuesday, Wednesday
    start: '14:30', // 8am
    end: '17:30' // 6pm
  },
  {
    dow: [ 4 ], // Thursday, Friday
    start: '10:30', // 10am
    end: '12:00' // 4pm
  }
],

and then with the following script:

<script language="javascript">
$(function() {

  $('#calendar').fullCalendar({

    businessHours: true
  });

});
</script>

I show the result in the image: Here is the documentation https://fullcalendar.io/docs/businessHours