FullCalendar – Plugin jQuery – Créez vos propres agendas comme Google

FullCalendar est un plugin jQuery assez évolué et je dois dire : « bluffant ». En effet, vous avez été convaincu par l’accessibilité et le style d’agenda que propose Google ? Et bien, via ce plugin une grande partie du travail vous est offerte pour être intégrée à vos propres sites internet.

full-calendar

FullCalendar est donc un plugin jQuery qui offre la possibilité de réaliser un calendrier sur navigateur, utilise le drag&drop et permet une navigation aisée. Il utilise AJAX pour récupérer les événements et est facilement configurable pour utiliser le format de flux que l’on souhaite (il existe même une extension pour le célèbre Google Calendar). Il est visuellement personnalisable et utilise des hooks pour les événements déclenchés par les utilisateurs (comme cliquer ou faire glisser un événement).

Pour découvrir ce plugin, cliquez sur ce lien.

Voici un des exemples d’utilisation proposé :

$(document).ready(function() {

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});

});

 

On peut facilement comprendre, que l’élément :

<div id="calendar"></div>

 

se remplira du calendrier, avec une entête caractérisée via l’attribut : header. Ensuite on rend le calendrier éditable, via l’attribut : editable en true. Et à la suite on place tous les éléments souhaités sur le calendrier dans events. Vous pouvez travailler sur le titre de l’évènement, la date de début, de fin, sur un éventuel lien cliquable et bien plus encore.

Vous avez accès à toute la documentation ici : http://arshaw.com/fullcalendar/docs/
Site du plugin FullCalendar : http://arshaw.com/fullcalendar/.

Articles qui peuvent vous intéresser :

Author: Franck Pertegas

Share This Post On

Trackbacks/Pingbacks

  1. FullCalendar – Plugin jQuery – Créez vos propres agendas comme … | - [...] the original post here: FullCalendar – Plugin jQuery – Créez vos propres agendas comme … Stem of voeg toe…
  2. Pixlr – Editeur d’images en ligne – Un photoshop sur le net ? | LudiBlog - [...] FullCalendar – Plugin jQuery – Créez vos propres agendas comme Google [...]
  3. msdropdown – Plugin jQuery – Des icones dans vos balises select/option | LudiBlog - [...] FullCalendar – Plugin jQuery – Créez vos propres agendas comme Google [...]
  4. Liste de tous les plugins jQuery testés sur le blog | LudiBlog - [...] API / Utiles GMAP 3 PlupLoad FullCalendar [...]

Submit a Comment

Votre adresse e-mail ne sera pas publiée.