Search code examples
angulartypescriptfullcalendar

How to change Full Calendar's moreLink appearance?


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"
    }
  };```

Solution

  • You can use CSS for this, this example will look like this

    example

    .fc-day-past .fc-more-link {
      background-color: red;
    }
    .fc-day-future .fc-more-link {
      background-color: blue;
    }
    

    Demo StackBlitz