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 :

No Responses

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*