I'm using Full Calendar in my Angular 15 project. Is it possible to set a moreLink background color if it's present in a past cell?
I'll explain better: if there's an event yesterday then the "more" should have a red background, but if the event is set for tomorrow the "more" should have a blue background. I was only capable to set a custom CSS class but this will make a unique background color for past or future events.
calendarOptions: CalendarOptions = {
eventClassNames: "fc-content",
themeSystem: "standard",
locale: "it",
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
headerToolbar: {
left: "title",
right: "prev next today"
},
slotDuration: "00:15:00",
eventOverlap: false,
initialView: "dayGridMonth",
defaultAllDay: true,
eventColor: "#5c6a9b",
weekends: true,
editable: false,
selectable: false,
selectMirror: false,
allDayText: "Intera giornata",
dayMaxEvents: 0,
moreLinkClassNames: ["btn-daily-calendar"],
dayCellDidMount: function (cellInfo) {
var today = new Date();
today.setHours(0, 0, 0, 0);
if (cellInfo.date < today && cellInfo.el) {
cellInfo.el.style.backgroundColor = "rgb(255,0,0, 0.050)";
}
},
moreLinkContent: function (arg) {
return arg.num;
},
moreLinkClick: function (arg) {
console.log(arg);
},
nowIndicator: true,
eventClick: this.handleEventClick.bind(this),
datesSet: this.handleDateSet.bind(this),
buttonText: {
today: "Oggi",
month: "Mese",
week: "Settimana",
day: "Giorno",
list: "Elenco",
allDay: "Tutto il giorno"
}
};```
You can use CSS for this, this example will look like this
.fc-day-past .fc-more-link {
background-color: red;
}
.fc-day-future .fc-more-link {
background-color: blue;
}
Demo StackBlitz