FullCalendar

Créez des calendriers jQuery à partir de vos articles, d’un agenda Google ou de la base de donnée SPIP.

Portage du FullCalendar de Adam Shaw pour SPIP.

Dépendances

-  CFG
-  JQuery UI pour SPIP
-  palette (optionnel)

Installation

  1. Téléchargez l’archive dans le dossier plugins de votre SPIP
  2. Activez le plugin depuis l’espace privé.

Description

Ce plugin permet de créer des calendriers jQuery à insérer dans vos articles et/ou rubriques grâce aux balise <fullcalendarXX> ou <minifullcalendarXX>.

La source de donnée des événements peut être :

Pour voir la démo c’est par ici => http://webtice.ac-guyane.fr/contrib/spip.php?article3

Configuration de Fullcalendar

Affichage global

Ce formulaire propose de modifier les paramètres d’affichage par défaut :

  • la vue à utiliser
  • activer l’utilisation du thème
  • le ratio hauteur / largeur du calendrier
  • affichage des week-ends
  • premier jour du calendrier

En-tête

Ce formulaire permet de préciser quels boutons on souhaite afficher dans l’entête des calendriers.

Vue mensuelle

FullCalendar possède plusieurs ’vues’, ou façon d’afficher les jours et les événements.

Voici un aperçu de la vue mensuelle :

Ce formulaire permet de modifier l’affichage des textes (titre, colonnes et heures) dans la vue mensuelle.

Vue par semaines

Il existe deux ’vues’ par semaines, l’une affichant les jours de la semaine avec les heures, l’autre avec juste les événements.

Voici un aperçu de la vue par semaine avec les heures :

Ce formulaire permet de modifier l’affichage des textes (titre, colonnes et heures) dans les vues par semaine.

Calendrier journalier

Tout comme le calendrier par semaine, il existe deux ’vues’ par jours : l’une affichant le jour et les heures, l’autre affichant uniquement les événements.

Voici un aperçu de la vue par jour avec les heures :

Ce formulaire permet de modifier l’affichage des textes (titre, colonnes et heures) dans les calendriers journaliers.

Ajoutez des styles à vos événements

Les définition de styles permettent de modifier l’apparence des événements dans les agendas qui utilisent MySQL comme source de donnée.

Vous pouvez créer autant de styles que nécessaire, que vous pourrez modifier par la suite.

Agenda MySQL

Pour créer un agenda MySQL rendez-vous dans la page de configuration globale ( menu configuration -> FullCalendar )

  1. Cliquez sur le lien “FullCalendar - Gestion” dans la partie gauche
  2. Entrez un nom pour votre nouveau calendrier
  3. Choisissez ’Base de donnée MySQL locale’ dans la liste déroulante
  4. Cliquez sur ajouter

Votre calendrier apparaît alors dans la liste de vos calendriers.

Vous pouvez dès à présent copier-coller la balise ’<fullcalendar1>’ dans un article.

La gestion des évènements

Un événement est caractérisé par:

  • son titre ou description
  • la date et heure de début
  • la date et heure de fin
  • le calendrier d’appartenance
  • un lien (optionnel)
  • un style (optionnel)

Depuis la page de gestion des calendriers, cliquez sur le nom d’un calendrier MySQL pour gérer ses événements :

  1. Cliquez sur la case à droite de ’Du’, un datepicker apparaît pour faciliter la saisie de la date de début.
  2. Un clic sur la case suivante laisse apparaître un timepicker pour saisir l’heure de début.
  3. Faites de même à droite de ’Au’ pour la date et l’heure de fin.
  4. Renseignez le nom de l’événement
  5. Cliquez sur ajouter

Le nouvel événement apparaît alors dans le calendrier et dans la liste des événements. Cliquez sur un événement du calendrier pour le modifier. Utilisez la liste des événements pour modifier, tester et effacer.

Agenda par mot clé

Dans ce mode de fonctionnement les événements correspondent aux articles (titre avec lien vers l’article) lié au mot clé sélectionné.

La date de début est la date de rédaction de l’article, la date de fin étant la date de rédaction antérieure.

Pour utiliser cette fonctionnalité vous devez :
-  activer la date de rédaction antérieure des articles (si cela n’as pas déjà été fait par votre gentil administrateur)
-  définir au moins un mot clé lié à au moins un article ayant sa date de rédaction antérieurs renseignée.

Créez votre agenda depuis la page de gestion des calendriers en spécifiant ’articles par mots clés’ comme source de donnée.

Cliquez sur son nom dans liste des calendriers disponibles.

Sélectionnez le mot clé qui permettra de filtrer les événements.

La liste des événements (articles) apparaît alors...

Tout comme les articles en cours de rédaction ou refusés, les articles n’ayant pas les deux dates renseignées ne seront pas affichés dans le calendrier (surlignés en rouge dans la liste).

Agenda d’une rubrique

Depuis la page de configuration globale ( menu configuration -> FullCalendar )

  1. Entrez un nom pour votre nouveau calendrier
  2. Choisissez ’Rubrique’ dans la liste déroulante
  3. Cliquez sur ajouter
  4. Cliquez ensuite sur le nom de ce nouveau calendrier dans le tableau.
  5. Sélectionnez le secteur source pour les évènements puis validez.

Notez que le secteur source peut être une rubrique, le plugin ira chercher les articles dans cette rubrique et dans ses sous rubriques.

Si vous utilisez sarkaspip vous devez connaitre leur principe d’agenda.

L’agenda d’une rubrique de FullCalendar est quasiment le même à la différence que la date de début de l’évènement sera la date de publication de l’article, la date de fin étant la date de rédaction antérieure.

Depuis la v0.1.4 le plugin dispose d’un squelettes pour surcharger l’agenda de sarka, donc si vous utilisez ce squelette et activez FullCalendar théoriquement vous devriez voir le mini-fullcalendar à la place du calendrier classique (si votre rubrique spéciale agenda est déclaré et qu’elle contiens des articles).

Si la surcharge ne se fait pas automatiquement (j’ai eu le cas sur certains sites) vous devrez copier le répertoire noisettes du plugin directement dans votre répertoire squelettes.

Enfin si ce comportement ne vous plaît pas et que vous souhaitez garder l’ancien agenda de sarka il vous suffit de supprimer les fichiers du répertoire noisettes du plugin.

Agenda Google

Depuis la page de configuration globale ( menu configuration -> FullCalendar )

  1. Entrez un nom pour votre nouveau calendrier
  2. Choisissez ’Google agenda publique’ dans la liste déroulante
  3. Cliquez sur ajouter
  4. Cliquez ensuite sur le nom de ce nouveau calendrier dans le tableau en bas de la page.
  5. Entrez votre clé (ID de votre agenda Google) puis validez.
  6. Copier-collez la balise fullcalendar correspondante dans un article pour afficher votre agenda Google publique.

Utilisation dans vos squelettes

Pour ajouter un ou plusieurs FullCalendar dans vos squelettes utilisez les modèles comme ceci :

[(#REM) Insertion du fullcalendar n°2]
[(#MODELE{fullcalendar}{id_fullcalendar=2})]

<...>

[(#REM) Insertion du mini-fullcalendar controlé par CFG]
[(#MODELE{minifullcalendar})]

Pour ceux qui souhaitent aller plus loin voici un exemple de boucle pour lister vos calendriers, leurs événements, liens et styles :

<B_calendrier>
<BOUCLE_calendrier(spip_fullcalendar_main)>
        <h3>#NOM</h3>
        #TYPE
        <B_evenement>  
                <ul>
                <BOUCLE_evenement(spip_fullcalendar_events){id_fullcalendar=#ID_FULLCALENDAR}>
                        <li>
                                <b>#TITRE</b>
                                #LIEN
                                 Du [(#START|affdate)] au [(#END|affdate)]
                                        <B_styles>
                                        <BOUCLE_styles(spip_fullcalendar_styles){id_style=#ID_STYLE}>
                                                <span style="
                                                        background-color:#BGCOLOR;
                                                        color:#TEXTCOLOR;
                                                        border:1px solid #BORDERCOLOR
                                                ">#TITRE</span>                                                                      
                                        </BOUCLE_styles>
                                        </B_styles>
                        </li>
                </BOUCLE_evenement>
                </ul>
        </B_evenement>
        Aucun événement dans ce calendrier ...
        <//B_evenement>
</BOUCLE_calendrier>
</B_calendrier>
Aucun calendrier trouvé !
<//B_calendrier>

Conditions d’utilisation

Ce plugin est une adaptation pour SPIP du script “FullCalendar” créé par Adam Shaw et distribué sous double licence MIT et GPL.

Pour plus d’informations, reportez-vous au site http://arshaw.com/.

Icônes splashyIcons.

Améliorations futures

-  Coupler avec agenda 2
-  Ajouter les styles dans les calendriers par mots clés
-  Calendrier par groupes de mot clés
-  Meilleure intégration à l’interface privé
-  Internationaliser l’interface
-  Modèle pour la saisie d’événements depuis l’interface publique
-  Boucle sur les événements
-  export ical

Discussion

37 discussions

  • 4

    Bonjour,

    Je recontre un problème avec ce plugin.
    Il fonctionne parfaitement sous Firefox cependant sur IE, rien ne s’affiche.

    Est-ce que quelqu’un a déjà rencontré ce souci ? Y a-t-il un moyen de le résoudre ?

    Merci d’avance de votre aide :-)

    Avalon

    • Salut,

      -  Quelle version ?
      -  Un retour dans la console d’erreur ?
      -  Quelle URL ?

      @+

    • avalon

      Bonjour ngombe,

      Je suis sur spip 2.
      Pas de message d’erreur, juste le titre de mon événement qui s’affiche mais pas le calendrier.

      Merci

      Avalon

    • Salut Avalon,

      Reprenons mais moins crispé cette fois :

      -  Quelle est la version d’Internet Explorer qui n’affiche rien ?
      -  Quelle URL (http://...) pour me permettre de constater/reproduire le bug ?

      Sans ces deux éléments je ne peux pas t’aider ...

      @+

    • Bonjour,

      Je souhaite également mettre en place ce plugin, et je me retrouve dans une situation un peu équivalente, à savoir ne fonctionne pas sous IE 7 (aucun affichage), de plus sous Firefox 4, le calendrier s’affiche bien, mais pas les évènements. J’utilise un agenda en base de données.

      Il est “visible” ici : http://alicebooking.com/Loyer.html, d’ailleurs dans la partie privée le calendrier est également vide dans l’article en question, alors que dans l’interface de cfg il fonctionne à priori correctement.

      Je vous remercie par avance pour votre aide.

      P.S. Ci joint une copie de l’écran de config du calendrier

    Reply to this message

  • 3
    grenouille

    Bonjour,

    Le plugin fonctionne nickel sous esayphp en local. En revanche, dès que je le bascule sur free, ça me donne invariablement : Erreur SQL 1146
    Table ’monsite.spip_fullcalendar_main’ doesn’t exist
    SELECT * FROM spip_fullcalendar_main

    Et je ne peux pas accéder au calendrier.

    Merci de votre aide.

    • Salut,

      As-tu envoyé le dump de ton site local sur ta base de donnée free après avoir copié le site ?

      A mon avis sur ton site en prod il te suffit de désinstaller complètement le plugin (lien [désinstaller] dans l’administration des plugins - tu devrais avoir des erreurs car il pourra pas effacer les tables qui n’existent pas) puis réactive-le... Les tables sont crées à l’installation du plugin.

      @+

    • grenouille

      Merci pour cette réponse

      J’ai installé mon site sur free comme ceci : spip, le dump, puis les plugins. Peut-être en effet aurai-je dû en effet installer les plugins avant le dump.

      Mais après, j’ai un peu tout essayé et ça ne fonctionnait plus : en désinstallant les plugins, en virant les tables via SQL, sur les deux versions (easyphp et free). J’ai même réinstallé spip depuis le début. Fullcalendar cherchait toujours ces tables qui n’existaient pas.

      Depuis, je suis passé à google agenda, avec regret, car fullcalendar me semblait plus sympa. J’ai dû faire une mauvaise manip quelque part : je pense qu’il y a effectivement un ordre à respecter pour passer du local à l’hébergeur.

    • Salut,

      A ta place je ferais ça :

      • Vérifie que tu as bien la version 0.1.3 du plugin...
      • Copie du plugin sur tonftp.free.fr puis installation depuis l’interface d’administration...
      • Dump des trois tables suivantes depuis phpmyadmin@easyphp (config avec data+drop table)
        -  spip_fullcalendar_main
        -  spip_fullcalendar_events
        -  spip_fullcalendar_styles
      • Import du dump sur mysql@free
      • Vidage de cache fais jamais de mal

      Théoriquement le fait de copier les 3 tables devrais résoudre le problème, si tu lui présente les tables qu’il cherche il devrais être content ... Maintenant c’est étrange qu’il n’arrive pas à les créer automatiquement...

      @+

    Reply to this message

  • jcdeloffre

    Le calendrier s’affiche dans la partie publique! Pourquoi? Je ne sais pas. J’ai peut-être profité d’une maintenance du serveur de l’académie, ou autre explication une mise à jour du couteau suisse?
    Bon en tous cas merci pour ce plugin indispensable.

    Reply to this message

  • Quentin

    Merci, en cours de test pour le moment parfait.

    Reply to this message

  • jcdeloffre

    j’ai testé sur un autre hébergement, tout fonctionne sans pb.
    sur l’hébergement de l’académie de grenoble qui pose pb, j’ai désactivé tous les plugins avec script jquery sans résultat.
    idem en remplaçant mon insert head par celui de la distribution.
    le souci vient donc des css de la partie publique? l’utilité de ce plugin est évidente pour les établissements scolaires (c’est surement pour cela que tu l’as créé!) et si tu peux m’aider à le mettre en place ce serait super. je contacte également l’administrateur de l’académie pour avoir des détails sur la base de données.

    Reply to this message

  • 2
    jcdeloffre

    Le plugin fonctionne sans pb dans la partie privée comme indiqué dans l’article: configuration, style des évènements,... mais rien dans la page publique!
    J’ai ajouté le modèle <fullcalendar1> dans cet article si vous avez une piste. Merci!

    • Salut,

      Je pense que les autres script JQuery “bloquent” le fullcalendar (entre autres euDock ou ton jMyCarousel) mais tu peux essayer de changer l’appel de la fonction dans le modèle comme ceci :

      plugins/auto/fullcalendar/modeles/fullcalendar.html - Ligne 157

      $(document).ready(function() {

      ... change la ligne en ...

      if (jQuery) (function($){

      Sinon tu as aussi un soucis avec la CSS de la partie publique ... Tu utilise quoi comme base de donnée ? Les CSS fonctionnent dans la partie privée ?

      @+

    • jcdeloffre

      Merci de t’occuper de mon cas! tu auras compris que je ne souhaite pas me séparer de euDock et jmycarousel, on veut tout en même temps, le fullcalendar en plus!
      j’ai désactivé eudock, jmyCarousel, supprimé dans le head le script jmycarousel. Pas de résultat. (le calendrier apparait tjrs dans la partie privée. Les CSS fonctionnent dans la partie privée ou du moins je crois(=cela s’affiche correctement)
      J’ai également modifié la ligne 167 de fullcalendar.html mais sans résultat sauf que le calendrier n’apparaît plus non plus dans la partie privée.
      pour ce qui est de la base de données nous sommes hébergés par l’académie de Grenoble et personnellement je n’y accède jamais. Merci de ton aide et de ce plugin. on va peut être y arriver!

    Reply to this message

  • Testé et approuvé :-) Merci !

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom