web-dev-qa-db-fra.com

JQuery Calendrier complet et couleurs d'événement dynamique

J'aimerais passer les couleurs pour les événements à travers ma source d'événements JSON pour JQuery FullCalendar, comment puis-je y parvenir?

jqueryfullcalendar
23
Aneef

Rien de plus facile que ça. Si vous vérifiez la documentation de JQuery FullCalendar Couleurs d'événements Vous voyez qu'il existe un paramètre className vous pouvez spécifier pour chaque objet d'événement. Le contenu de ce paramètre est ajouté en classe aux événements et il vous suffit donc de spécifier le CSS avec le nom correspondant.

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 à faire event1 semble différent

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

Vérifiez ici http://jsbin.com/ijasa3/96 pour un échantillon rapide. Notez comment l'événement1 a vert comme arrière-plan et jaune comme couleur de texte.

Une autre manière viable en utilisant les options décrites dans JQuery FullCalendar couleurs d'événement pourrait suivre ces lignes:

Utilisez des événements différents 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

42
jitter

Avec la version 1.5, vous pouvez définir la couleur du texte, la couleur de fond et la couleur de la bordure dans chaque événement.

7
Joaquim Franco

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

.fc-event-skin { }
6
Leo

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

2
giuseppe