2

I am working on fullcalendar v5.9 with resources, I want each resource has different background column color or different background header color. how can I do that?

   var calendar = new FullCalendar.Calendar(calendarEl, {

                initialView: 'resourceTimeGridTwoDay',
                initialDate: dnew Date(),
                locale: 'it',
                selectable: true,
                dayMaxEvents: true, // allow "more" link when too many events
                 
                eventTimeFormat: { // like '14:30:00'
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: false,
                    meridiem: false
                },
                slotLabelFormat: { // like '14:30:00'
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: false,
                    meridiem: false
                },
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'resourceTimeGridDay,resourceTimeGridTwoDay,resourceTimeGridWeek'
                },
                views: {
                    resourceTimeGridTwoDay: {
                        type: 'resourceTimeGrid',
                        duration: { days: 3 },
                        buttonText: '3 days',
                        slotDuration: '00:15',
                        slotMinTime: '08:00',
                        slotMaxTime: '21:15',
                    }
                },
                resources: [
                   { id: 'a', title: 'Room A' },
                   { id: 'b', title: 'Room B', eventColor: 'green' },
                   { id: 'c', title: 'Room C', eventColor: 'orange' },
                   { id: 'd', title: 'Room D', eventColor: 'red' }
                ],
                
                events: events2
                
                           
            });

            calendar.render();
        };
ADyson
  • 57,178
  • 14
  • 51
  • 63
nnmmss
  • 2,850
  • 7
  • 39
  • 67

1 Answers1

2

I solved it. I add this section to fullcalendar code

  resourceLabelDidMount: function (info) {                        
      if (info.resource.id == 2)
        info.el.style.backgroundColor = 'red';                        
  },
nnmmss
  • 2,850
  • 7
  • 39
  • 67