Jquery Vollkalender und dynamische Ereignisfarben

Question

Ich möchte die Farben für die Ereignisse durch meine json Ereignisse Quelle für jquery Vollkalender übergeben, wie erreiche ich dies?

Answer 1

Nichts einfacher als das. Wenn Sie die Dokumentation von jQuery Fullcalendar Event Colors überprüfen, sehen Sie, dass es einen Parameter className gibt, den Sie für jedes Ereignisobjekt angeben können. Der Inhalt dieses Parameters wird den Ereignissen als Klasse hinzugefügt und Sie müssen nur die CSS mit dem passenden Namen angeben.

Die Ereignisse (beachten Sie die className Parameter auf event1)

[ 
    { 
    title  : 'event1', 
    start  : '2012-06-10', 
    className : 'custom', 
    }, 
    { 
    title : 'event2', 
    start : '2012-06-05', 
    end : '2012-06-07' 
    }, 
    { 
    title : 'event3', 
    start : '2012-06-09 12:30:00', 
    allDay : false 
    } 
] 

Die CSS event1 anders aussehen

.custom, 
.custom div, 
.custom span { 
    background-color: green; /* background color */ 
    border-color: green;  /* border color */ 
    color: yellow;   /* text color */ 
} 

prüfen http://jsbin.com/ijasa3/96 für eine schnelle Probe zu machen. Beachten Sie, dass event1 grün als Hintergrund und gelb als Textfarbe hat.

---

Ein weiterer gangbarer Weg die Optionen beschrieben in jQuery Fullcalendar mit Event Colors in diese Richtung gehen könnte:

Verwenden Sie unterschiedliche Eventsources für die Ereignisse, die eine andere Farbe benötigen:

$('#calendar').fullCalendar({ 
... 
    eventSources: [ 
    //a full blown EventSource-Object with custom coloring 
    { 
     events: [ 
     { 
      title  : 'event1', 
      start  : '2012-06-10' 
     } 
     ], 
     backgroundColor: 'green', 
     borderColor: 'green', 
     textColor: 'yellow' 
    }, 
    //a normal events-array with the default colors used 
    [ 
     { 
     title : 'event2', 
     start : '2012-06-05', 
     end : '2012-06-07' 
     }, 
     { 
     title : 'event3', 
     start : '2012-06-09 12:30:00', 
     allDay : false 
     } 
    ] 
    ], 
    ... 
}); 

http://jsbin.com/ijasa3/99

Answer 2

Wenn Sie auf Version 1.5 aktualisieren, funktioniert das möglicherweise nicht. Die Lösung erscheint die Art

.fc-event-skin { } 

Answer 3

Mit der Version 1.5 Sie Textfarbe, backgroudColor und border setzt in jedem Fall kann kommentieren, zu sein.

Answer 4

Für ein besseres Rendering ist es besser backgroundColor des EventObject zu verwenden.