Fullcalendar: Change the color for specific days
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/
Change Day background color in Full Calendar using Angular
We use below in Angular to show saturday and sunday in different colors in a month view
dayRender: function (dayRenderInfo) {
let dateMoment = moment(dayRenderInfo.date);
if (dateMoment.day() === 6 || dateMoment.day() === 0) {
dayRenderInfo.el.style.backgroundColor = '#d6e7e1';
}
else {
dayRenderInfo.el.style.backgroundColor = 'white';
}
return dayRenderInfo;
}
How to change the background color of a specific day in FullCalendar 5 with js?
The color of a day can be set by implementing the dayCellDidMount event like so:
dayCellDidMount: ({ date, el }) => {
if (date.getDate() == new Date().getDate())
el.style.backgroundColor = 'lime'
}
In this example, current day background color is set to lime.
See a working example below:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
initialView: 'dayGridMonth',
events: 'https://fullcalendar.io/api/demo-feeds/events.json',
editable: true,
selectable: true,
dayCellDidMount: ({ date, el }) => {
if (date.getDate() == new Date().getDate())
el.style.backgroundColor = 'lime'
}
});
calendar.render();
});
html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 40px auto;
}
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css">
<div id='calendar'></div>
How to change background color of selected date in FullCalendar
I have finally solved it this way:
$(document).ready(function() { $('#calendars').fullCalendar({ header: { left: 'prev', center: 'title', right: 'next' }, selectable: true, });});
.fc-highlight { background: green !important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" defer/><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" defer></script><script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js" defer></script><div id="calendars"></div>
Set background color for each days of week in fullcalendar if a criteria matches?
I am not sure how optimize is my answer, but I implement it like this:
dayRender: function(date, cell) {
day = moment(date).format('ddd');
if (day == 'Sat') {
cell.css("background-color", "red");
} else if (day == 'Sun') {
cell.css("background-color", "orange");
} else if (day == 'Mon') {
cell.css("background-color", "green");
} else if (day == 'Tue') {
cell.css("background-color", "blue");
} else if (day == 'Wed') {
cell.css("background-color", "yellow");
} else if (day == 'Thu') {
cell.css("background-color", "purple");
} else {
cell.css("background-color", "pink");
}
}
here is the result of code:
Fullcalendar how to change validRange grayed days color?
Okey I found the solution. To change grayed
fields if you are using validRange as option. need to change this styles
.fc .fc-cell-shaded,
.fc .fc-day-disabled {
background: #E5E5E5;
background: #E5E5E5;
}
Change the day background color in FullCalendar
You can do it like this:
dayRender: function (date, cell) {
var today = new Date();
var end = new Date();
end.setDate(today.getDate()+7);
if (date.getDate() === today.getDate()) {
cell.css("background-color", "red");
}
if(date > today && date <= end) {
cell.css("background-color", "yellow");
}
}
http://jsfiddle.net/z8Jfx/7/
Related Topics
How to Remove Border of Drop Down List:Css
Format Text in a ≪Textarea≫
How Are the Points in CSS Specificity Calculated
Maintaining the Final State At End of a Css3 Animation
Import Regular CSS File in Scss File
Specificity of Inherited CSS Properties
Css Z-Index Lost After Webkit Transform Translate3D
How and Where to Use ::Ng-Deep
Fullcalendar: Change the Color for Specific Days
How to Fill Html5 Input[Type=Range] on the Left Side of the Thumb With CSS Only
Does Height and Width Not Apply to Span
What Are the Differences Between Flex-Basis and Width
Transparent Arrow/Triangle Indented Over an Image
Why Bottom:0 Doesn't Work With Position:Sticky
Difference Between "Screen" and "Only Screen" in Media Queries