Jquery calendrier Complet et dynamique des couleurs

Rien de plus facile que cela. Si vous vérifiez la documentation de jQuery Fullcalendar Événement De Couleurs vous voyez qu'il y a un paramètre className vous pouvez spécifier pour chaque objet de l'événement. Le contenu de ce paramètre est ajouté en tant que classe pour les événements et donc vous avez seulement besoin de spécifier le css avec le nom correspondant.

Les événements (prendre note de la className paramètre sur 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
  }
]

Le CSS pour faire event1 un aspect différent

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

Vérifier ici http://jsbin.com/ijasa3/96 pour un échantillon rapide. Notez comment event1 vert comme toile de fond et le jaune comme couleur de texte.

---

Un autre moyen viable en utilisant les options décrites dans jQuery Fullcalendar Événement De Couleurs pourrait aller le long de ces lignes:

Utiliser différents Eventsources pour les événements qui ont besoin d'une autre couleur:

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

Si vous mettez à niveau à la version 1.5, vous pouvez trouver que cela ne fonctionne pas. La solution semble être de commenter le style

.fc-event-skin { }