javascript - dynamically - Calendario completo de jQuery: establece un color diferente para cada evento desde el front-end

librerias javascript 2018

Question

Así es como estoy usando el plugin:

jQuery( document ).ready( function() {
            jQuery(''#booking-calendar'').fullCalendar({
                header: {
                    left: ''prev,next'',
                    center: ''title'',
                    right: ''month,basicWeek,basicDay''
                },
                editable: true,
                events: ''<?php echo get_template_directory_uri() ?>/bookings-feed.php''
            });

            jQuery( ''#apartment-selector'' ).change( function() {
                apartment = jQuery( this ).val()
                jQuery(''#booking-calendar'').fullCalendar( ''removeEvents'' )
                jQuery(''#booking-calendar'').fullCalendar( ''addEventSource'',  {
                    url: ''<?php echo get_template_directory_uri() ?>/bookings-feed.php'',
                    type: ''POST'',
                    data: {
                        apartment : apartment
                    }
                })
            })
        })

Y así es como se ve:

Como pueden ver, es un poco difícil rastrear cuándo comienza y termina un evento, así que estaba pensando en cambiar el color de cada evento.

El problema aquí es que cada evento puede dividirse en semanas diferentes (como en el ejemplo) y cada semana tiene un evento DOM diferente (lo que tiene sentido) y no tienen ninguna clase relacionada,

¿Alguna idea de cómo puedo colorear de manera diferente cada evento?

¡Gracias!

Answer 1

El objeto de la lista de eventos en el que tiene propiedades como inicio, final, superposición, lo que hace que también tenga una propiedad llamada color en la que puede especificar el color del evento.

Mire a continuación el código de demostración en el que se utiliza la propiedad de color:

        events: [
            {
                start: ''2017-11-24'',
                end: ''2017-11-28'',
                overlap: false,
                rendering: ''background'',
                color: ''#257e4a''
            },
            {
                start: ''2017-11-06'',
                end: ''2017-11-08'',
                overlap: false,
                rendering: ''background'',
                color: ''#ff9f89''
            }]

Answer 2

Para colorear cada evento de manera diferente, hay un par de enfoques que puede tomar para abordar su problema.

1. Actualice el feed de eventos ''/bookings-feed.php'' y agregue color (fondo y borde), backgroundColor, textColor o borderColor al objeto del evento http://arshaw.com/fullcalendar/docs/event_data/Event_Object/ .

   events: [{
       title  : ''event1'',
       start  : ''2010-01-01'',
       color  : ''#000''
   }]

2. Separe y actualice las fuentes de eventos para usar eventSources. Lo que te permite agrupar eventos por color y color de texto. http://arshaw.com/fullcalendar/docs/event_data/events_array/ .

   $ (''# calendar''). fullCalendar ({

   eventSources: [
   
       // your event source
       {
           events: [ // put the array in the `events` property
               {
                   title  : ''event1'',
                   start  : ''2010-01-01''
               },
               {
                   title  : ''event2'',
                   start  : ''2010-01-05'',
                   end    : ''2010-01-07''
               },
               {
                   title  : ''event3'',
                   start  : ''2010-01-09 12:30:00'',
               }
           ],
           color: ''black'',     // an option!
           textColor: ''yellow'' // an option!
       }
   
       // any other event sources...
   
   ]

Answer 3

Puedes intentar usar la devolución de llamada eventAfterRender. Revise la documentation .

De esta manera, obtendrá el evento ''completo'' y manipulará su color, basándose en una elección aleatoria.

Solo para que tengas una idea, trabajo con esta devolución de llamada, pero el color cambia según el día del evento. El color cambia si el evento está programado, está sucediendo o ya sucedió.

eventAfterRender: function (event, element, view) {
        var dataHoje = new Date();
        if (event.start < dataHoje && event.end > dataHoje) {
            //event.color = "#FFB347"; //Em andamento
            element.css(''background-color'', ''#FFB347'');
        } else if (event.start < dataHoje && event.end < dataHoje) {
            //event.color = "#77DD77"; //Concluído OK
            element.css(''background-color'', ''#77DD77'');
        } else if (event.start > dataHoje && event.end > dataHoje) {
            //event.color = "#AEC6CF"; //Não iniciado
            element.css(''background-color'', ''#AEC6CF'');
        }
    },