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