Vollständiger jQuery-Kalender: Legen Sie für jedes Ereignis vom Frontend aus eine andere Farbe fest

Lesezeit: 4 Minuten

Benutzer-Avatar
Toni Michel Caubet

So verwende ich das 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
            }
        })
    })
})

Und so sieht es aus:

Geben Sie hier die Bildbeschreibung ein

Wie Sie sehen können, ist es etwas schwierig zu verfolgen, wann ein Ereignis beginnt und endet, also habe ich darüber nachgedacht, die Farbe jedes Ereignisses zu ändern.

Das Problem dabei ist, dass jede Veranstaltung in verschiedene Wochen aufgeteilt werden kann (wie im Beispiel) und jede Woche eine andere DOM-Veranstaltung hat (was Sinn macht) und sie keine zugehörige Klasse haben.

Wie kann ich jedes Ereignis anders einfärben?

Benutzer-Avatar
MarVerrücktheit

Um jedes Ereignis anders einzufärben, gibt es ein paar Ansätze, mit denen Sie Ihr Problem angehen können.

  1. Aktualisieren Sie den Event-Feed „/bookings-feed.php“ und fügen Sie color(background and border), backgroundColor, textColor oder borderColor zum Event-Objekt hinzu http://arshaw.com/fullcalendar/docs/event_data/Event_Object/.

     events: [{
         title  : 'event1',
         start  : '2010-01-01',
         color  : '#000'
     }]
    
  2. Trennen und aktualisieren Sie die Ereignis-Feeds, um eventSources zu verwenden. Damit können Sie Ereignisse nach Farbe und Textfarbe gruppieren. 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...
    ]
});

  • Mein Problem hier ist, dass ich keinen Zugriff auf die Backend-Implementierung habe, also suche ich nach einer reinen Frontend-Implementierung … deshalb muss ich die DOM-Elemente auswählen … trotzdem danke! irgendwelche Ideen?

    – Toni Michel Caubet

    4. September 2013 um 18:32 Uhr

  • Sie möchten zum Beispiel für das obige Ereignis, das sich über 3 Wochen erstreckt, dass dasselbe Ereignis für jede der 3 Wochen unterschiedliche Farben hat? Oder möchten Sie nur eine Farbe für jede Veranstaltung? Möchten Sie eine Farbe für einen bestimmten Ereignistyp oder nur zufällig? Wenn Sie keinen Back-End-Zugriff haben, können Sie den Ereignis-Feed parsen und die Farbe manuell hinzufügen?

    – MarCrazyness

    4. September 2013 um 21:47 Uhr


  • Ich möchte, dass jede Instanz desselben Ereignisses eine zufällige Farbe hat (ja, die 3 Wochen, die das Ereignis dauert).

    – Toni Michel Caubet

    5. September 2013 um 7:34 Uhr

Sie könnten versuchen, den eventAfterRender-Rückruf zu verwenden. Prüfen Dokumentation.

Auf diese Weise erhalten Sie das „ganze“ Ereignis und manipulieren seine Farbe basierend auf einer zufälligen Auswahl.

Nur damit Sie sich ein Bild machen können, arbeite ich mit diesem Rückruf, aber die Farbe wird basierend auf dem Tag der Veranstaltung geändert. Die Farbe ändert sich, wenn das Ereignis geplant ist, stattfindet oder bereits stattgefunden hat.

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

  • Vielen Dank! interessant, aber wenn ich eine (zwischengespeicherte) zufällige Farbe anwende ( element.css(‘color’,mycachedrandomcolor); ) bekommt jede Zeile (auch von demselben Ereignis) eine andere Farbe; eine Ahnung warum?

    – Toni Michel Caubet

    5. September 2013 um 19:12 Uhr

  • Das ist seltsam … versuchen Sie vielleicht den eventRender-Callback Verknüpfung

    – Bogas

    5. September 2013 um 20:24 Uhr

Benutzer-Avatar
jasonherbert

Ereignislistenobjekt, in dem Sie Eigenschaften wie Start, Ende, Überlappung, Wiedergabe haben, Sie haben auch eine Eigenschaft namens Farbe, in der Sie die Farbe des Ereignisses angeben können.

Sehen Sie sich den folgenden Democode an, in dem die Farbeigenschaft verwendet wird:

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

Sie können so vorgehen. eventsArr [{id…other..color..},{},]

           var SelectedData = eventsArr.filter(function (arr) {
                return arr.id === id;
            })[0];

Nachdem Sie eine Farbe festgelegt haben, aktualisieren Sie die Farbe für das Ereignis, das dieser ID zugeordnet ist. In Ihrem Fall weisen Sie nur für jede Schleife durch diese ID unterschiedliche Farben zu.

var color = SelectedData.color;
$("#YourElementID").find("#ElementIDtoBeChanged").val(color);

1246560cookie-checkVollständiger jQuery-Kalender: Legen Sie für jedes Ereignis vom Frontend aus eine andere Farbe fest

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy