fullcalendar v5.9 中每个资源的不同 header 颜色

Question

我正在使用资源处理 fullcalendar v5.9，我希望每个资源都有不同的背景栏颜色或不同的背景 header 颜色。我该怎么做？

   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();
        };

Answer 1

我解决了。我将此部分添加到完整日历代码

  resourceLabelDidMount: function (info) {                        
      if (info.resource.id == 2)
        info.el.style.backgroundColor = 'red';                        
  },

fullcalendar v5.9 中每个资源的不同 header 颜色

different header color for each resource in fullcalendar v5.9

javascript

fullcalendar

fullcalendar-5