Jquery calendrier complet et couleurs d'événements dynamiques

Question

Je voudrais passer les couleurs pour les événements à travers mes événements JSON source jquery fullcalendar, comment puis-je y parvenir?

Answer 1

Rien de plus facile que cela. Si vous consultez la documentation des couleurs de l'événement jQuery Fullcalendar vous voyez qu'il ya un paramètre className vous pouvez spécifier pour chaque objet événement. Le contenu de ce paramètre est ajouté en tant que classe aux événements et donc il vous suffit de spécifier le nom correspondant avec css.

Les événements (prendre note du paramètre className 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 */
}

Cochez cette case http://jsbin.com/ijasa3/96 pour un échantillon rapide. Notez comment event1 a vert en arrière-plan et jaune comme la couleur du texte.

---

Une autre façon viable en utilisant les options décrites dans les couleurs de l'événement jQuery Fullcalendar pourrait aller de pair ces lignes:

Utilisez différentes 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

Answer 2

Avec la version 1.5, vous pouvez définir un texte en couleur, couleur de fond et couleur de la bordure dans chaque cas.

Answer 3

Si vous passez à la version 1.5, vous trouverez peut-être cela ne fonctionne pas. La solution semble être de commenter le style

.fc-event-skin { }

Answer 4

Pour un meilleur rendu, il est préférable d'utiliser backgroundColor du EventObject.