Change the color of a specific time slot in Fullcalendar

Question

I’m working with the view scheduleDay on Fullcalendar. I have a function that blocks when the user clicks on specific time slots on specific days (these values are recorded in the bank). I wonder how I can set a different color only for certain time slots in a day, specifically for the blocked lines. How can I identify a specific timeline to change its color?

Answer 1

Maybe use the Annotations can serve for what you need.

To add the Annotations:

$('#calendar').fullCalendar({
    ....
    events: [
        {
            title: 'All Day Event',
            start: new Date(y, m, 1)
        }
    ],
    annotations: [{
        start: new Date(y, m, d, 13, 0),
        end: new Date(y, m, d, 15, 30),
        title: 'My 1st annotation', //OPCIONAL
        cls: 'open', //OPCIONAL
        color: '#777777', //OPCIONAL
        background: '#eeeeff' //OPCIONAL
    }, { proxima annotation }, ...]        
});

More examples and the support files for this link: https://github.com/elhigu/fullcalendar/blob/master/demos/annotations.html

Final result:

Answer 2

The solution that best met my problem was the one suggested in this link of Stackoverflow in English: https://stackoverflow.com/questions/29473143/set-different-color-to-specific-time-slots-in-fullcalendar.

I used a javascript function more or less like the one below. To work it is necessary to configure the time slots range in order to display the time label for the lines. Since if we put the slots duration as 00:15:00 or 00:00:30:00, 00:45:00 the labels of the lines do not appear, one should add 1 second at the end of the slot duration: 00:15:01. Follow the suggested code:

$('tr').find('span').each( function(){
   var timeSlot = $(this).text();
   if(timeSlot> 13 && timeSlot < 18)    //Change 13 and 18 according to what you need
   $(this).closest('tr').css('background-color', '#000');
});