Cette contribution est un portage du FullCalendar de Adam Shaw pour SPIP.
Dépendances
- CFG
- JQuery UI pour SPIP
- palette (optionnel)
Installation
- Téléchargez l’archive dans le dossier plugins de votre SPIP
- 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 :
- la base de donnée MySQL de SPIP
- les articles filtrés par un mot clé
- une rubrique contenant des articles
- un agenda Google publique
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 )
- Cliquez sur le lien « FullCalendar - Gestion » dans la partie gauche
- Entrez un nom pour votre nouveau calendrier
- Choisissez ’Base de donnée MySQL locale’ dans la liste déroulante
- 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 :
- Cliquez sur la case à droite de ’Du’, un datepicker apparaît pour faciliter la saisie de la date de début.
- Un clic sur la case suivante laisse apparaître un timepicker pour saisir l’heure de début.
- Faites de même à droite de ’Au’ pour la date et l’heure de fin.
- Renseignez le nom de l’événement
- 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 )
- Entrez un nom pour votre nouveau calendrier
- Choisissez ’Rubrique’ dans la liste déroulante
- Cliquez sur ajouter
- Cliquez ensuite sur le nom de ce nouveau calendrier dans le tableau.
- 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 )
- Entrez un nom pour votre nouveau calendrier
- Choisissez ’Google agenda publique’ dans la liste déroulante
- Cliquez sur ajouter
- Cliquez ensuite sur le nom de ce nouveau calendrier dans le tableau en bas de la page.
- Entrez votre clé (ID de votre agenda Google) puis validez.
- 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
Discussions par date d’activité
37 discussions
Bonjour,
La boucle évènement utilisée ne semble plus être correcte avec SPIP 4 et Agenda 4.3.9.
Le code agenda.json.htlm donne une erreur maintenant.
#HTTP_HEADERContent-Type : application/json ; charset=#CHARSET
#SETstart,#ENVstart|strtotime
#SETend,#ENVend|strtotime
[ {agendafull date_debut,date_fin, periode,
#VAL{Y}|date{#GET{start}}, #VAL{m}|date{#GET{start}}, #VAL{d}|date{#GET{start}},
#VAL{Y}|date{#GET{end}}, #VAL{m}|date{#GET{end}}, #VAL{d}|date{#GET{end}}}
>
[(#ARRAY
id,#ID_EVENEMENT,
title,[(#TITRE|html2unicode|unicode2charset)],
allDay,[(#HORAIRE|==non| ?#EVALtrue,#EVALfalse)],
start,#DATE_DEBUT,
end,#DATE_FIN,
url,#URL_ARTICLE,
description,[(#DESCRIPTIF|html2unicode|unicode2charset)]
|json_encode)]
]
Pour compléter, voici le code utilisé dans la page sommaire
Répondre à ce message
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 ?
Bonjour Obiwanriko,
Je suis dans la même recherche, et malheureusement je cale (endrier ;-))
Avez-vous trouvé une solution qui vous convienne ?
Si oui, pouvez-vous en partager les principes et code ?
Merci d’avance
Bonjour,
ce n’est pas quelque chose comme ça que vous cherchez ? :
https://contrib.spip.net/Agenda-Fullcalendar-facile
En place ici : http://www.cpalb.fr/le-planning
Bonne journée
ED
Bonjour Edouard,
Effectivement, j’ai essayé ce plugin, mais, comme je viens de le poster à l’instant sur Fullcalendar, il y a un problème de duplication des événements (quand le site est multilingue) à cause justement de cette gestion des événements...
Globalement, comment fait-on pour gérer et afficher au mieux un agenda/calendrier au mieux... voilà la question ;-)
Merci en tout cas pour votre réponse rapide !!!
Bonjour
J’ai récemment solutionner le problème sur le site de la ville de Rambouillet :
www.rambouillet.fr : il est en bas de la page d’accueil
Il a également sa page dédié :
http://www.rambouillet.fr/spip.php?page=page-jour
Il est important de travailler sur cette page ’page-jour" : En effet en configurant le plugin de « cibler » cette page : beaucoup de problème d’affichage de bons résultats ont été solutionnés.
Bonjour Erick,
Merci pour votre réponse.
Dans le cas du site de Rambouillet, il semble que ce soit un calendrier-mini qui soit utilisé.
J’utilise aussi calendrier-mini, bien pratique, mais dans le cas des sites multilingues, un peu problématique puisque tous les événements du jour remontent. Comme pour Full-calendar.
Actuellement, on est obligé de composer des événements similaires à affecter à chacune des langues, ce qui n’est ni logique, ni pratique, ni efficient. Donc, il faudrait pouvoir composer 1 événement et que l’événement soit (automatiquement ?) affecté à toutes les traductions...
J’ai passé 2 jours là-dessus pour voir les solutions pour avoir un full-calendar approprié, mais sans succès. Il y a toujours un problème quelque part quand on est en multilingue.
Affaire à suivre !
Oui c’est bien un calendrier mini qui est utilisé.
En ce qui concerne le multi lingue, j’avoue ne plus être au goût du jour, le dernier site multilingue fait avec SPIP remonte à la version 2
;-)
Pour ma part, je ne crée quasiment que des sites multilingues, et je pense sincèrement que c’est l’avenir (un site internet franco-français sans ne serait-ce que l’anglais me semble de plus en plus un anachronisme). Et SPIP, en la matière, a quelques évolutions à faire pour rendre le management plus facile. La gestion des événements en est un exemple, la gestion des images un autre exemple...
Merci en tout cas pour votre contribution,
Et en espérant trouver prochainement une solution originale et efficace !
(Sur le fond : non il peut y avoir des tas de raisons d’avoir des sites monolingues : tout dépend le public visé. Si mon site vise à présenter mon AMAP, mon RES local, etc, le monolinguisme est de mise).
Sur la forme : je pense que ce sont des questions qui ne sont pas reliées directement à FullCalendar. je suggère :
- pour ce qui concerne Agenda, de poster la question avec des pistes d’améliorations, sur le forum du plugin agenda
- pour les documents, comem c’est natif SPIP, d’ouvrir un ticket (avec des propositions pour la gestion concrète....)
D’accord sur le point du Monolingue ...
Un site de municipalité doit surtout être en Français avant tout, l’anglais est certes oui presque incontournable mais cette tâche est déjà pris en charge par le site internet de L’office de Tourisme de la Ville ;-)
Mais là on s’éloigne du sujet ...
A Eric : Oui, on s’éloigne... sorry ;-)
A Maïeul : Pas de problème, je suis tout à fait enclin à faire remonter des problématiques, et proposer des pistes de réflexion... où dois-je ouvrir un ticket ?
Sur https://core.spip.net/
Répondre à ce message
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
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
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
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 :
doit être remplacée par :
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
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
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
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 :http://icp.ge.ch/sem/cms-spip/spip.php?article1717
http://icp.ge.ch/sem/cms-spip/spip.php?article1716
Cordialement
FDG
Répondre à ce message
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
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
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
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
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
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
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.
Suivre les commentaires : |