SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 254 visiteurs en ce moment

Accueil > Dates, calendriers et agendas > Calendriers > FullCalendar > FullCalendar

FullCalendar

7 avril 2011 – par ngombe – 91 commentaires

25 votes

Portage du FullCalendar de Adam Shaw pour SPIP.

JPEG - 37.7 ko

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
JPEG - 19.8 ko

En-tête

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

JPEG - 32.9 ko

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 :

JPEG - 47.3 ko

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

JPEG - 14.1 ko

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 :

JPEG - 42.5 ko

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

JPEG - 24.7 ko

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 :

JPEG - 26.3 ko

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

JPEG - 23.9 ko

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.

JPEG - 38.7 ko

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
JPEG - 19 ko

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 :

JPEG - 31.4 ko
  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.

JPEG - 20.6 ko

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.

JPEG - 45.8 ko

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.

JPEG - 64.6 ko

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

JPEG - 17.6 ko

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.
JPEG - 58.8 ko

Utilisation dans vos squelettes

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

  1. [(#REM) Insertion du fullcalendar n°2]
  2. [(#MODELE{fullcalendar}{id_fullcalendar=2})]
  3.  
  4. <...>
  5.  
  6. [(#REM) Insertion du mini-fullcalendar controlé par CFG]
  7. [(#MODELE{minifullcalendar})]

Télécharger

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

  1. <B_calendrier>
  2. <BOUCLE_calendrier(spip_fullcalendar_main)>
  3. <h3>#NOM</h3>
  4. #TYPE
  5. <B_evenement>
  6. <ul>
  7. <BOUCLE_evenement(spip_fullcalendar_events){id_fullcalendar=#ID_FULLCALENDAR}>
  8. <li>
  9. <b>#TITRE</b>
  10. #LIEN
  11. Du [(#START|affdate)] au [(#END|affdate)]
  12. <B_styles>
  13. <BOUCLE_styles(spip_fullcalendar_styles){id_style=#ID_STYLE}>
  14. <span style="
  15. background-color:#BGCOLOR;
  16. color:#TEXTCOLOR;
  17. border:1px solid #BORDERCOLOR
  18. ">#TITRE</span>
  19. </BOUCLE_styles>
  20. </B_styles>
  21. </li>
  22. </BOUCLE_evenement>
  23. </ul>
  24. </B_evenement>
  25. Aucun événement dans ce calendrier ...
  26. <//B_evenement>
  27. </BOUCLE_calendrier>
  28. </B_calendrier>
  29. Aucun calendrier trouvé !
  30. <//B_calendrier>

Télécharger

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

Voir en ligne : http://plugins.spip.net/fullcalendar

Dernière modification de cette page le 11 juin 2012

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 18 mai à 13:28, par obiwanriko En réponse à : FullCalendar

    Bonjour

    J’utilise Agenda sur le site d’une municipalité et la demande devient forte pour avoir ces évènements généré dans une vue de calendrier (à la ical) et ce plugin correspondrait à ce besoin.
    Est-ce possible ?

    Répondre à ce message

  • Le 19 juillet 2012 à 10:22, par Olivier En réponse à : FullCalendar

    Bonjour,
    J’ai problème d’affichage pour le FullCalendar.

    Configuration : SPIP 2.1.18
    Plug-ins : Accès Restreint 3.3.1 ; FullCalendar 0.1.4 ; jQuery UI 1.8.19 ; Kit CNRS 4.0.10 ; Mediathèque 1.6.14 ; Saisies pour formulaires 1.25.13 ; SPIP Bonux 2.3.0
    Navigateur : testé sous Chrome, FF, IE.

    Le code est bien créé dans la page (script + div) mais mon calendrier Google n’apparaît pas. J’ai testé l’appel direct sous forme d’iframe, ça marche très bien, ce n’est donc pas un problème de lien avec le calendrier. Pourtant, même dans la partie privée, l’aperçu ne s’affiche pas...
    Je suspecte un problème de javascript. J’ai testé en supprimant l’appel à mes propres scripts, sans succès... J’ai essayé de désactiver les autres plug-ins un à un au cas où il y aurait conflit dans les différents js, sans succès...

    Si quelqu’un a une idée de l’origine du problème, je suis preneur.
    Merci

    • Le 8 septembre 2012 à 10:47, par L Girardeau En réponse à : FullCalendar

      Bonjour à tous
      Si j’ai tout compris [(#MODELEfullcalendarid_fullcalendar=2)] permet d’intégrer fullcalendar dans un squelette. Par contre C’est l’agenda mensuel qui s’affiche par défaut .
      Quel parametre donné à #MODELE pour avoir un affichage de la semaine en cours ( equivalent de « <fullcalendar2|defaultView=basicWeek|weekends=0|aspectRatio=4.2> » ?

      Merci pour votre aide
      L Girardeau

    • Le 23 octobre 2012 à 14:50, par Marlet En réponse à : FullCalendar

      Bonjour,

      Dans la même configuration qu’Olivier avec le Kit CNRS, le calendrier ne s’affiche pas, bien que le div correspondant et le script soient bien présents dans le code. Tous les navigateurs sont concernés (IE, FF et Chrome).
      Quelqu’un voit-il d’où pourrait venir ce bug et existerait-il un moyen qui permettrait de le corriger ?
      Merci de votre aide

    • Le 23 octobre 2012 à 17:01, par Marlet En réponse à : FullCalendar

      Je confirme que le problème vient bien du JS. Même en ajoutant une alerte js en tout début de code, celle-ci ne se lance pas. Le script est donc bien inséré dans la page mais n’est pas lu... Quand on désactive tous les autres JS, ça ne change rien, ce ne semble donc pas être un problème de conflit.

      Après quelques tests et suppression de morceaux de code ligne par ligne, j’ai pu isoler le problème :
      La ligne :

      aspectRatio: ".$aspectRatio.",

      doit être remplacée par :

      aspectRatio: '".$aspectRatio."',

      Même si la valeur est numérique, il semble qu’elle doive malgré tout être entourée par des guillemets simples... Etrange... mais au moins ça résout le bug !
      En espérant que ça serve à d’autres ;)

    Répondre à ce message

  • Le 13 septembre 2012 à 10:20, par François Daniel Giezendanner En réponse à : FullCalendar

    Hello ngombe,

    Lorsque je passe en mode semaine sur le grand agenda le titre des événements n’apparait plus. C’est fort gênant même en changeant les couleurs.

    Peux-tu ajouter une option pour fixer la largeur max du calendrier ?

    A quand une adaptation pour SPIP 3 ?

    Je suppose qu’il y a des raisons précises pour lesquelles tu n’a pas conservé le « glisser-déposer » du plugin original !?

    Cordialement et Bravo

    FDG

    Répondre à ce message

  • Le 11 septembre 2012 à 21:19, par Mib68 En réponse à : FullCalendar

    Bonjour est il possible d’afficher plusieurs calendrier sur le meme calendrier affiché ?
    J’ai le mem probleme avec l’affichage sur IE que certain autres qui on commenter, est ce que quelqu’un aurait la solution pour résoudre le problème ?

    Merci d’avance

    Répondre à ce message

  • Le 11 septembre 2012 à 15:54, par François Daniel Giezendanner En réponse à : FullCalendar

    Salut ngombe,

    Excellent ton adaptation de FullCalendar à SPIP et ton descriptif est top..

    Je viens de l’essayer avec les balises <fullcalendarXX> et <minifullcalendarXX>, ça fonctionne parfaitement « comme sur des roulettes » ici :

    Cordialement

    FDG

    Répondre à ce message

  • Le 25 juin 2012 à 16:01, par bubulbul En réponse à : FullCalendar

    Bonjour,
    Merci pour ce plugin. J’utilise spip couplé à sarka et un calendrier publique google. Tout fonctionne bien, la rubrique agenda, le mini agenda. J’aimerai mettre une liste des événements du mois en dessous du mini-calendrier. Est-ce possible ?
    Cordialement,
    bubulbul.

    Répondre à ce message

  • Le 25 mai 2012 à 02:54, par Chris En réponse à : FullCalendar

    Bonjour je n’arrive pas à afficher le calendrier dans sommaire.html. Pourtant il fonctionne très bien dans les pages article. Quelqu’un peut il m’aider. Merci

    • Le 1er juin 2012 à 16:55, par ngombe En réponse à : FullCalendar

      Salut,

      Vérifie que tu as bien les librairies javascript chargé dans ta page (inspecter l’élément dans chrome) sinon vérifie que ton squelette sommaire.html as bien la balise INSERT_HEAD ...

      @+

    Répondre à ce message

  • Le 25 mai 2012 à 11:54, par Chris En réponse à : FullCalendar

    Bonjour,

    lorsque j’utilise [(#MODELEfullcalendarid_fullcalendar=1)] dans la page article, le calendrier s’affiche sans problème. Mais dans le squellette sommaire.html ca ne marche pas. Quelqu’un a t’il une solution ?

    MErci pour votre aide

    Répondre à ce message

  • Le 22 mai 2012 à 10:42, par girardeau En réponse à : FullCalendar

    Bonjour
    Y a t-il une solution pour permettre aux redacteurs d’alimenter l’agenda tout en gardant la gestion par mysql pour disposer des css

    Merci pour votre aide
    LG

    Répondre à ce message

  • Le 13 mai 2012 à 18:59, par ? En réponse à : FullCalendar

    Bonjour,

    Je souhaite installer un calendrier pour s’organiser entre rédacteurs (voire visiteurs logés si possible ?) mais indépendant de la publication des articles.

    J’ai cru comprendre que c’était possible avec full calendar ?

    J’ai installé le plugin mais suis confronté à un problème de base :
    -   Comment appeler le calendrier pour le voir en article (ou autre interface ?)

    J’ai créé 2 calendriers (un sql / un dossier) pour tester (quelle différence ???), qui m’indiquent 2 raccourcis (<fullcalendar2>) et (<fullcalendar3>) : ou dois-je mettre ces lignes ?

    SI quelqu’un pouvait me répondre sans me renvoyer vers le manuel de référence bien trop complexe pour moi, cela serait super.
    Merci !

    • Le 15 mai 2012 à 17:25, par klaus++ En réponse à : FullCalendar

      Il faut placer les balises <fullcalendarNN>à l’endroit où on veut afficher le calendrier. C’est tout. Dans un squelette Z par exemple j’uilise [(#MODELE{fullcalendar}{id_fullcalendar=1})] pour l’afficher.

    • Le 16 mai 2012 à 19:05, par ? En réponse à : FullCalendar

      Bonsoir,
      merci beaucoup pour votre réponse.

      Mais en fait le calendrier ne servirait pas pour référencer les articles du site mais pour l’organisation interne d’une assoc. , dissocié des articles.
      L’idée est de pouvoir mutualiser les infos de chez nous , chacun rajoutant les dates et évènements sans avoir écrire un article spécifique. Bref, disposer d’un agenda collectif en ligne en partie interne.

      Je résume, si nous souhaitons :
      -  placer un calendrier dans 1 seul article (et non pas dans le squelette)
      -  que cet article soit accessible à qq personnes (géré par accès restreint)
      -  que cet agenda soit alimenté de manière collective et distinct des articles & de l’activité éditorial du site ...
      (1) Est-ce le bon plugin, ? Est-ce la bonne approche ?
      2) comment le configurer ?

      Merci beaucoup,
      Nico

      nb. j’ai beau avoir parcouru le manuel de référence, mais cela me prends des heures à comprendre ce qu’induit ce type de ligne : « [(#MODELEfullcalendar ». J’ai fais l’effort à2 ou 3 reprises, mais c’est encore très obscure .. Connaitriez- vous un site un peu didactique sur spip pour utilisateur lambda soucieux tout de même du visuel & de la foncionnalité de de son site ?
      Merci !

    • Le 16 mai 2012 à 19:10, par ? En réponse à : FullCalendar

      nb. Nous utilisons Eva spip .. peut-on envisager de le mettre en noisette ?
      Sinon faut il passer par skeleditotr ? (quel « ligne »/« bloc » ?)

    • Le 17 mai 2012 à 19:15, par klaus++ En réponse à : FullCalendar

      Si c’est pour une utilisation interne, il suffit d’utiliser l’agenda interne de SPIP, cad les annonces. On peut l’exporter dans l’espace public. On obtient (attention, il faut le tester quand même) une agenda qui ne s’affiche qu’aux visituers authentifiés, rédacteurs et admins.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Adaptive Images

    15 novembre 2013 – 66 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Métas

    8 août 2009 – 50 commentaires

    Ce petit plugin permet l’ajout, depuis l’espace privé, de metatags aux articles et rubriques de SPIP, ainsi que la mise en exergue de mots importants.

  • Brownie

    6 juillet 2012 – 43 commentaires

    Brownie est une adaptation pour Zpip du thème du même nom initialement développé par Egrappler.com. Présentation Brownie est un thème Responsive à deux colonnes. La démonstration ci-dessous utilise la version 2.0.0 de Brownie, la dist de SPIP3 (...)

  • Métas +

    3 décembre – 13 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 785 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

Ça spipe par là