Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting Fullcalendar Cell Background Color

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.

like image 682
vegas2033 Avatar asked Jul 19 '13 19:07

vegas2033


People also ask

How do I change the background color on FullCalendar?

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.

How do I change my FullCalendar theme?

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'.

What is FullCalendar eventRender?

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.

How do I set events in FullCalendar?

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 } ] });


1 Answers

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.

like image 175
joni jones Avatar answered Sep 27 '22 21:09

joni jones