Jquery Calendario completo e colori dinamici degli eventi

Question

Mi piacerebbe passare i colori per gli eventi attraverso la mia fonte di eventi json per jquery fullcalendar, come faccio a ottenere questo?

Answer 1

Niente di più facile. Se controlli la documentazione di jQuery Fullcalendar Event Colors vedi che c'è un parametro className che puoi specificare per ogni oggetto evento. Il contenuto di quel parametro viene aggiunto come classe agli eventi e quindi è sufficiente specificare il css con il nome corrispondente.

Gli eventi (prendono atto del parametro className su 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 
    } 
] 

Il CSS per rendere event1 aspetto diverso

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

Controllare qui http://jsbin.com/ijasa3/96 per un campione veloce. Nota come l'evento 1 ha il colore verde come sfondo e il giallo come colore del testo.

---

Un altro modo fattibile utilizzando le opzioni descritte in jQuery Fullcalendar Event Colors potrebbe andare in questo senso:

utilizzare diversi Eventsources per gli eventi che hanno bisogno di un altro colore:

$('#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

Se si esegue l'aggiornamento alla versione 1.5, è possibile che questo non funzioni. La soluzione sembra essere quella di commentare lo stile

.fc-event-skin { } 

Answer 3

Con la versione 1.5 è possibile impostare textColor, backgroudColor e borderColor in ogni evento.

Answer 4

Per un rendering migliore, è preferibile utilizzare backgroundColor di EventObject.