Fullcalendar: Change the Color for Specific Days

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:

Sample Image

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



Leave a reply



Submit