I saw several topics on how to set the background color of a cell in fullcalendar, but none of them worked for me. I guess the calendar used to list the days using their date as such .fc-day5 or .fc-day17, but in version 1.6.2 it doesn't anymore.
I have a list of several events that are being rendered and I want to set their cell color (the entire day cell, not only the event cell) to a specific color.
I use 'eventRender' to try to set a class
eventRender: function (event, element, monthView) {
if (event.className == "holiday") {
$day = $date.getDate();
$("td.fc-day-number[value='" + $day + "']").addClass("holiday");
}
},
Let me know if you have any idea on how to set the background color.
You can use any of the CSS color formats such #f00 , #ff0000 , rgb(255,0,0) , or red . This option can be overridden on a per-source basis with the backgroundColor Event Source Object option or on a per-event basis with the backgroundColor Event Object option.
It is possible to change the look of the calendar (colors, fonts, etc) by applying a theme. Renders the calendar with a given theme system. In order to correctly theme your calendar with a Bootstrap 5 theme, you must include the correct stylesheets, include the JavaScript plugin, and set themeSystem to 'bootstrap5'.
eventRender is a great way to attach effects to event elements, such as a Tooltip. js tooltip effect: var calendar = new Calendar(calendarEl, { events: [ { title: 'My Event', start: '2010-01-01', description: 'This is a cool event' } // more events here ], eventRender: function(info) { var tooltip = new Tooltip(info.
Here is an example of how to specify an array of events: var calendar = new Calendar(calendarEl, { events: [ { title : 'event1', start : '2010-01-01' }, { title : 'event2', start : '2010-01-05', end : '2010-01-07' }, { title : 'event3', start : '2010-01-09T12:30:00', allDay : false // will make the time show } ] });
You can try to set event background color. Something like this:
event.backgroundColor = 'cccccc#';
Or for cell background:
$('.fc-day[data-date="' + date + '"]').css('background', color);
date
must be date string equivalent to php Y-m-d
date format.
Style need change when calendar was rendered.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With