I'm working with the view calendarDay in FullCalendar. I have a function that blocks when the user clicks on specific time slots on specific days (these values are written to the bank). I would like to know how I can set a different color only for certain time slots in a day, specifically, for locked lines. How can I identify a specific timeline to change its color?
Change the color of a specific time slot in FullCalendar
2
asked by anonymous 06.04.2015 / 21:32
2 answers
0
The solution that best addressed my issue was the one suggested in this Stackoverflow link in English: link .
I used a javascript function more or less like the one below. In order to work, you need to set the interval of the time slots so that the time label for the rows appears. Since we put the duration of the slots as 00:15:00 or 00: 00: 30: 00, 00:45:00 the line labels do not appear, we must add 1 second to the end of the slot duration: 00: 15:01. Here is 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');
});
22.04.2015 / 19:56
1
Perhaps using annotations might serve what you need.
To add 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 support files for this feature at this link: link
Final result:
08.04.2015 / 16:49