jQuery Calendrier complet: mettez une couleur différente à chaque événement de l'avant

Question

jQuery Calendrier complet: mettez une couleur différente à chaque événement de l'avant

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 c'est à quoi il ressemble:

enter image description here

comme vous pouvez le voir, il est un peu difficile de suivre quand un événement commence et se termine, donc je pensais changer la couleur de chaque événement,

le problème ici est que chaque événement peut être divisé en semaines différentes (comme dans l'exemple) et chaque semaine a un événement DOM différent (ce qui a du sens) et ils n'ont aucun lien classe,

N'importe quelle idée comment puis-je coloriser différemment chaque événement?

Merci!

28

colors fullcalendar javascript jquery

demandé sur Toni Michel Caubet 2013-09-04 21:09:06

3 réponses

score 44 · Answer 1

pour coloriser chaque événement différemment il ya un couple d'approches que vous pouvez prendre pour s'attaquer à votre problème.

mise à jour du flux d'événements / réservations-flux.php' et ajouter de la couleur(fond et bord), backgroundColor, textColor, ou borderColor de l'objet d'événement http://arshaw.com/fullcalendar/docs/event_data/Event_Object/.
```
events: [{
    title  : 'event1',
    start  : '2010-01-01',
    color  : '#000'
}]
```

séparer et mettre à jour les flux d'événements pour utiliser eventSources. Ce qui vous permet de grouper des événements par la couleur et la couleur du texte. http://arshaw.com/fullcalendar/docs/event_data/events_array/.

$('#agenda").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...

]

score 21 · Answer 2

Vous pouvez essayer d'utiliser le callback eventAfterRender. Vérifier documentation.

de cette façon, vous obtiendrez l'événement 'entier', et manipulerez sa couleur, basé sur 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 prévu, se produit, ou s'il 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');
        }
    },

score 1 · Answer 3

liste des événements objet dans lequel vous avez des propriétés comme start, end, overlap,, Rendu vous avez aussi une propriété appelée color 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é color 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'
            }]

Las etiquetas más populares

jQuery Calendrier complet: mettez une couleur différente à chaque événement de l'avant

3 réponses