web-dev-qa-db-fra.com

Calendrier complet jquery: définissez une couleur différente pour chaque événement à partir du front-end

Voici comment j'utilise le 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
                    }
                })
            })
        })

Et voici à quoi ça ressemble:

enter image description here

Comme vous pouvez le voir, il est un peu difficile de suivre le début et la fin d'un événement, alors je pensais à changer la couleur de chaque événement,

Le problème ici est que chaque événement peut être divisé en différentes semaines (comme dans l'exemple) et chaque semaine a un événement DOM différent (ce qui est logique) et qu'il n'a pas de classe associée,

Une idée comment puis-je coloriser différemment chaque événement?

Merci!

javascriptjquerycolorsfullcalendar
32
Toni Michel Caubet

Pour coloriser chaque événement différemment, vous pouvez adopter quelques approches pour résoudre votre problème.

  1. Mettez à jour le flux d'événements '/bookings-feed.php' et ajoutez la couleur (arrière-plan et bordure), backgroundColor, textColor ou borderColor à l'objet événement http://arshaw.com/fullcalendar/docs/event_data/Event_Object / .

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

  2. Séparez et mettez à jour les flux d'événements pour utiliser eventSources. Ce qui vous permet de regrouper les événements par couleur et couleur du texte. 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...

]
49
MarCrazyness

Vous pouvez essayer d'utiliser le rappel eventAfterRender. Vérifiez documentation .

De cette façon, vous obtiendrez l'événement `` entier '' et manipulerez sa couleur, en fonction d'un choix aléatoire.

Juste pour que vous puissiez vous faire une idée, je travaille avec ce rappel, mais la couleur est modifiée en fonction du jour de l'événement. La couleur change si l'événement est planifié, se produit ou s'est déjà produit.

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');
        }
    },
21
Boga

Objet de liste d'événements dans lequel vous avez des propriétés telles que début, fin, chevauchement, vous avez également une propriété appelée couleur dans laquelle vous pouvez spécifier la couleur de l'événement.

Regardez ci-dessous le code de démonstration dans lequel la propriété de couleur est utilisée:

        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'
            }]
2
yeisonherbert