FullCalendar Time Line View - html

Question

I am using Full Calendar with Time Grid plugin, all is working good. I want to change color for past date & time. By dayRender event I could change color of previous date but not time, as for example view for week starting from Sunday 8 Spetember 2019 till 14 Saturday 2019. and open page on 10 Sep 2019 at 9.00 AM, I should change color until 10 Sep 2019 at 9.00 AM but I could do it until 9 Sep 2019.
How can I include time. My code pen
https://codepen.io/milindsaraswala/pen/VwZXpRM
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'resourceTimeGrid' ],
timeZone: 'UTC',
defaultView: 'resourceTimeGridFourDay',
soltDuration: '00:30:00',
slotLabelInterval: '00:30:00',
minTime:'07:00:00',
maxTime:'24:00:00',
slotLabelFormat:{
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: 'short'
},
header: {
left: 'prev,next',
center: 'title',
right: 'resourceTimeGridDay,resourceTimeGridFourDay'
},
views: {
resourceTimeGridFourDay: {
type: 'resourceTimeGrid',
duration: { weeks:1},
buttonText: '7 days'
}
},
resources: [
{ id: 'a', title: 'Room A' },
],
//events: 'https://fullcalendar.io/demo-events.json?with-resources=2',
events:events,
dayRender:function(day){
if (moment(day.date).isBefore(moment())) {
day.el.classList.add('disabledDates');
}
}
});
calendar.render();
});

Answer 1

You can restrict the previous days must more robustly by using a validRange without an end date:
validRange: function(nowDate) {
return {
start: nowDate
};
},
As well as just visually greying out the dates this will also stop events being added or dragged onto them.
Greying out the times of the current day is much more problematic. That's because there is no single HTML element representing a "time slot" on a particular day which you can target in order to do an hour-by-hour or even minute-by-minute restriction. I think the best thing you can do here is to create a background event which covers the period of the day up until the current time:
dayRender: function(day) {
var d = moment(day.date).startOf("day");
var today = moment().startOf("day");
if (d.isSame(today)) {
var now = moment();
var evt = {
start: today.format("YYYY-MM-DD HH:mm"),
end: now.format("YYYY-MM-DD HH:mm"),
rendering: "background",
className: "disabledDates"
}
calendar.addEvent(evt);
}
}
If you then wanted to restrict the creation / dragging of other events over the background event you can do via some of the date selection settings.
Demo: https://codepen.io/ADyson82/pen/pozLWjo