Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

133
Visualizações
different header color for each resource in fullcalendar v5.9

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();
        };
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

I solved it. I add this section to fullcalendar code

  resourceLabelDidMount: function (info) {                        
      if (info.resource.id == 2)
        info.el.style.backgroundColor = 'red';                        
  },
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda