Can we highlight today's day in Resource view in Fullcalendar?

78 Views Asked by At

Can we highlight today's day in Resource view in Fullcalendar? If I highlight using .fc-day-today class I'm not able to see borders for resource slot. You can see that in the CodePen link below as well. Can we do something like we have in timeGrid views?

I tried Now-Indicator Render Hooks but it just highlights the start of the day. You can see it in in this CodePen link.

CSS:

.fc-day-today {
  background: #ddd
}

JS:

document.addEventListener(
'DOMContentLoaded', function() {

  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {

    timeZone: 'UTC',
    initialView: 'peopleTimeLineMonth',
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'peopleTimeLineMonth'
    },
    views: {
      peopleTimeLineMonth: {
            type: 'resourceTimeline',
            titleFormat: { month: 'long', year: 'numeric' },
            duration: { month: 1 },
            buttonText: 'Month',
            slotLabelFormat: [{ weekday: 'short' }, { day: 'numeric' }],
            slotLabelInterval: { days: 1 },
            slotMinWidth: 40,
            eventMaxStack: 1,
            dayPopoverFormat: 'D',
            nowIndicator: true,
            now: new Date(),
            
          },
    },
    resources: [
      { id: 'a', title: 'Room A' },
      { id: 'b', title: 'Room B' }
    ],
    events: '/api/demo-feeds/events.json?with-resources=2'
  });

  calendar.render();
});

Is there a way to move the now indicator to the right considering the time of the day as well?

0

There are 0 best solutions below