JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/y4enc3buyzz2m3a/fullcalendar.css">
<script src="https://dl.dropboxusercontent.com/s/93dskqt37q1caxr/fullcalendar.min.js"></script>
<div id='calendar'></div>
CSS
.cellBg {
background: #000;
color: #fff;
}
JavaScript
var $calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'month',
dayRender: function (date, cell) {
//Month is zero-based, so, 9 is october
var holiday_date = new Date(2014,9,20);
var date_as_locale = date.toLocaleDateString();
if (date_as_locale == holiday_date.toLocaleDateString()) {
cell.css("background-color", "red");
}
holiday_date = new Date(2014,9,27);
if (date_as_locale == holiday_date.toLocaleDateString()) {
cell.css("background-color", "red");
}
var day_of_the_week = date.getDay();
if ((day_of_the_week == 0) || (day_of_the_week == 6)){
cell.css("background-color", "red");
}
}
});