Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fullcalendar: Change the color for specific days

I'm stuck with a project I get at work. I need to change the background color of some days. It's a calendar where the user should see, which days are available and which not. I found out that there is an attribute called "data-date", but I didn't found a possibility to use it.

Is there any way to manipulate the background of specific days?

I think there must be a way, cause the cell which shows the current date has another color too.

like image 459
Dr. Gadget Avatar asked Jul 12 '13 11:07

Dr. Gadget


People also ask

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

How do I select multiple dates in Fullcalendar?

Detect when the user clicks on dates or times. Give the user the ability to select multiple dates or time slots with their mouse or touch device. Allows a user to highlight multiple days or timeslots by clicking and dragging.

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


2 Answers

For the views month, basicWeek and basicDay you can change the rendering of the days by providing a dayRender function. E.g.:

$("#calendar").fullCalendar({
    dayRender: function (date, cell) {
        cell.css("background-color", "red");
    }
});

The documentation for dayRender is available here: http://arshaw.com/fullcalendar/docs/display/dayRender/

And here's a working example on jsfiddle: http://jsfiddle.net/kvakulo/CYnJY/4/

like image 54
Regin Larsen Avatar answered Oct 09 '22 19:10

Regin Larsen


For those looking to simply change the color of past dates, target .fc-past in your css and add a background-color property. E.g.,:

.fc-past {
    background-color: silver;
}
like image 41
Avindra Goolcharan Avatar answered Oct 09 '22 18:10

Avindra Goolcharan