Intégrer un calendrier à votre site Web

1. Connectez-vous à votre site et accédez à la page publique souhaitée
2. Cliquez pour Modifier la section désirée de la page
3. Cliquez sur Insérer un Modèle
4. Choisissez Calendrier Intégré
5. Cliquez sur OK
6. Cliquez sur Enregistrer la Page

Le calendrier, comme tout autre modèle de section, peut être accédé en sélectionnant Modifier la section désirée, puis en choisissant l'option Insérer un Modèle dans la barre d'outils. Dans la fenêtre contextuelle, sélectionnez l'option Calendrier Intégré et cliquez sur OK. Cela insérera le calendrier de base dans la section. Par défaut, le mois complet est affiché avec la date actuelle comme date affichée par défaut.

Pour la plupart des utilisations de base, cela fonctionne. Cependant, si vous souhaitez personnaliser votre calendrier et/ou l'intégrer dans un site tiers, veuillez consulter la section Configurer votre Calendrier ci-dessous.

Les bases du calendrier incluront certains paramètres essentiels qui vous permettront de créer le calendrier souhaité. Notez que seule l'URL de l'organisation est obligatoire.

URL de l'Organisation : L'URL Uplifter de votre organisation est requise pour générer un calendrier. Elle doit inclure tout sous-domaine applicable (ex. www., register., etc.) et .com/ca/org. Veuillez noter que l'URL de votre organisation dépendra de tous les changements DNS que vous avez effectués. Ainsi, vous devrez vérifier le domaine que les navigateurs affichent lorsque les utilisateurs arrivent sur le site de votre organisation.
Vue par Défaut : La vue par défaut affichée par votre calendrier. D'autres vues peuvent être accessibles par vos utilisateurs en ajoutant des boutons de vue dans la section En-tête/Pied de page. Par défaut, Vue Mensuelle.

Les options de vue suivantes sont disponibles :
Vue Journalière : Un calendrier journalier compressé divisé par durée de créneau.
Vue Hebdomadaire : Un calendrier hebdomadaire compressé divisé par jours.
Vue Mensuelle : Un calendrier mensuel compressé divisé par jours.
Vue Journalière (Créneaux Horaires) : Un calendrier journalier étendu divisé par durée de créneau.
Vue Hebdomadaire (Créneaux Horaires) : Un calendrier hebdomadaire étendu divisé par jours.
Vue Journalière (Liste) : Une liste de tous les événements pendant la journée affichée.
Vue Hebdomadaire (Liste) : Une liste de tous les événements pendant la semaine affichée.
Vue Mensuelle (Liste) : Une liste de tous les événements pendant le mois affiché.
Vue Annuelle (Liste) : Une liste de tous les événements pendant l'année affichée.

La section Dates/Heures vous permettra d'être plus précis sur les dates affichées, la durée de chaque jour et la durée d'affichage de chaque créneau horaire.

Date par Défaut : Contrôle la date affichée par le calendrier au chargement. Par défaut, ce sera la date actuelle.
Durée du Créneau : Contrôle la durée de chaque créneau. Chaque jour est divisé en créneaux pour mieux afficher la durée des événements. Visible uniquement sur la vue Journalière. Par défaut 30 minutes.
Heure de Début de Journée : Contrôle l'heure à laquelle une « journée » commence. Visible uniquement sur la vue Journalière. Par défaut 00h00.
Heure de Fin de Journée : Contrôle l'heure à laquelle une « journée » se termine. Visible uniquement sur la vue Journalière. Par défaut 23h59.

La section Informations Affichées vous permettra d'activer et d'ajuster divers facteurs qui s'affichent sur le calendrier. Des éléments comme le coût, le libellé des boutons et l'emplacement de la légende.

Affichage des Prix : Contrôle la façon dont les prix sont affichés dans la fenêtre contextuelle de l'événement. Peut afficher le prix comme un total, comme des versements (si applicable pour le programme), ou masquer entièrement le coût. Par défaut, total.
Texte du Bouton : Contrôle le libellé du bouton « inscription » dans la fenêtre contextuelle de l'événement. Peut afficher « Inscription » ou masquer le bouton. Par défaut « Inscription ».
Position de la Légende : Contrôle l'emplacement de la légende du calendrier. Peut s'afficher au-dessus du calendrier, en dessous du calendrier, ou être masquée. Par défaut en dessous.

La section En-tête/Pied de page vous permettra de contrôler les boutons et l'interface de votre calendrier. Elle vous donne un contrôle complet sur les boutons affichés et leur emplacement. Chacun des emplacements suivants peut avoir n'importe laquelle des options listées ci-dessous, dans n'importe quel ordre. Ils peuvent être séparés par un espace (créant un petit espace entre les boutons) ou par des virgules (fusionnant les boutons en une seule série de type menu).

En-tête Gauche : Contrôle ce qui est affiché en haut à gauche du widget. Par défaut « Précédent », « Suivant », « Aujourd'hui », séparés par des virgules.
En-tête Centre : Contrôle ce qui est affiché au centre supérieur du widget. Par défaut « Titre ».
En-tête Droite : Contrôle ce qui est affiché en haut à droite du widget. Par défaut « Vue Mensuelle », « Vue Hebdomadaire », « Vue Journalière », séparés par des virgules.
Pied de page Gauche : Contrôle ce qui est affiché en bas à gauche du widget. Par défaut aucun bouton.
Pied de page Centre : Contrôle ce qui est affiché au centre inférieur du widget. Par défaut aucun bouton.
Pied de page Droite : Contrôle ce qui est affiché en bas à droite du widget. Par défaut aucun bouton.

Chaque option peut utiliser n'importe laquelle des options suivantes :
Titre : Afficher le titre du calendrier.
Précédent : Afficher un bouton Précédent pour déplacer le calendrier vers le jour/la semaine/le mois précédent.
Suivant : Afficher un bouton Suivant pour déplacer le calendrier vers le jour/la semaine/le mois suivant
Année Précédente : Afficher un bouton Année Précédente pour déplacer le calendrier vers l'année précédente.
Année Suivante : Afficher un bouton Année Suivante pour déplacer le calendrier vers l'année suivante.
Aujourd'hui : Centrer le calendrier sur la date d'aujourd'hui dans la vue actuelle.
Vue Journalière : Un calendrier journalier compressé divisé par durée de créneau.
Vue Hebdomadaire : Un calendrier hebdomadaire compressé divisé par jours.
Vue Mensuelle : Un calendrier mensuel compressé divisé par jours.
Vue Journalière (Créneaux Horaires) : Un calendrier journalier étendu divisé par durée de créneau.
Vue Hebdomadaire (Créneaux Horaires) : Un calendrier hebdomadaire étendu divisé par jours.
Vue Journalière (Liste) : Une liste de tous les événements pendant la journée affichée.
Vue Hebdomadaire (Liste) : Une liste de tous les événements pendant la semaine affichée.
Vue Mensuelle (Liste) : Une liste de tous les événements pendant le mois affiché.
Vue Annuelle (Liste) : Une liste de tous les événements pendant l'année affichée.

Votre code iFrame, une fois intégré, ouvrira une petite fenêtre dans le site web où il est placé. De l'autre côté de cette fenêtre se trouvera une image de votre site Uplifter, affichant spécifiquement le calendrier que vous avez personnalisé. Il peut être nécessaire parfois d'ajuster la taille de la fenêtre que vous affichez. De plus, en ajustant le cadre (fenêtre), vous n'ajustez pas nécessairement l'image qu'il contient. Ainsi, il y a deux zones où vous pouvez ajuster la hauteur et une où vous pouvez ajuster la largeur.

iFrame : Ajustez la hauteur et la largeur de l'iFrame en ajoutant un paramètre de hauteur et/ou de largeur à l'attribut « style ». Cela se fait en tapant height ou width, juste avant la dernière guillemet, puis deux-points, puis votre valeur désirée, puis un point-virgule.

La valeur suggérée pour « height » est « auto ». La valeur suggérée pour « width » est « 100% ».
height:auto;width:100%;

Calendrier : L'ajustement de la taille du calendrier n'aura aucun effet tant que votre iFrame n'est pas plus grand que votre calendrier. Le calendrier n'acceptera qu'une valeur de hauteur et celle-ci peut être transmise au calendrier en utilisant l'attribut « src ». Cela se fait en tapant une esperluette, puis height ou width, juste avant la dernière guillemet, puis un signe égal, puis votre valeur désirée.

La valeur suggérée pour « height » est « auto » ou votre taille préférée (convertie en pixels)
height=auto ou height=###px

Intégration Externe : Les suggestions de hauteur mentionnées ci-dessus ne fonctionneront pas lors de l'intégration de votre calendrier Uplifter dans un site externe (non-Uplifter). Au lieu de cela, vous voudrez utiliser le height="###px" directement dans l'élément iFrame.

Bien que le configurateur vous permette de basculer entre les options séparées par virgule (« , ») et séparées par espace (« »), vous pouvez mélanger et assortir ces options comme vous le souhaitez. Cela peut être fait en ajoutant vos éléments d'en-tête/pied de page désirés, en basculant les options virgule/espace comme souhaité, puis en mettant à jour les résultats du code iFrame selon vos besoins.

Après que le code soit généré, l'attribut « src » aura les éléments d'en-tête/pied de page définis, séparés par votre option sélectionnée. Vous pouvez ensuite mettre à jour n'importe lequel/tous manuellement en changeant la virgule (« , ») en un espace (« ») ou vice versa.

L'ajout de filtres personnalisés à votre calendrier nécessite que vous obteniez l'ID de l'élément que vous souhaitez filtrer. Cela se fait le plus facilement en récupérant l'ID depuis l'URL d'une page qui est filtrée de la même manière. La page des programmes est l'option la plus simple pour cela.

1. Accédez à Produits & Programmes > Programmes
2. Utilisez le(s) filtre(s) désiré(s) à gauche pour filtrer la page de la même manière que vous souhaitez filtrer votre calendrier
3. Examinez l'URL de la page pour trouver les ID de filtre
4. Utilisez cet ID de filtre dans l'URL du calendrier

Pour ajouter un filtre personnalisé, accédez d'abord à Produits & Programmes > Programmes et utilisez les filtres de page à gauche pour appliquer votre(vos) filtre(s) désiré(s). Cliquez sur Filtrer et votre page sera mise à jour. Cette mise à jour inclut un changement dans votre URL. Parcourez l'URL jusqu'à ce que vous trouviez category[]=#, ou similaire selon votre(vos) filtre(s) choisi(s). Cela indique l'ID de votre type de filtre désiré. Si vous avez filtré par plusieurs filtres, il affichera chacun comme sa propre entrée, alors assurez-vous de noter chaque ID.

Avec cet ID (ou ces ID) en main, vous pouvez maintenant filtrer votre calendrier. Cela se fait en ajoutant les filtres à l'URL « src » de votre calendrier. C'est-à-dire que votre code iFrame de calendrier complet ressemblera à ceci :

<iframe class="up-calendar" src="//democlub.uplifterinc.com/calendar/" style="border:none;overflow:hidden;width:100%"  frameborder="0" scrolling="yes"></iframe>

Parmi ce code, vous verrez un paramètre « src » avec une URL entre guillemets. À la fin de cette URL (mais toujours entre les guillemets), vous voudrez ajouter le code de filtre (comme indiqué dans le tableau ci-dessus) avec l'ID correct pour chacun des filtres souhaités que vous voulez inclure. Cela créera un code iFrame qui ressemble à ceci (simple) :

<iframe class="up-calendar" src="//democlub.uplifterinc.com/calendar/?&season[]=1"  style="border:none;overflow:hidden;width:100%" frameborder="0" scrolling="yes"></iframe>

Ou comme ceci (multiple) :

<iframe class="up-calendar" src="//democlub.uplifterinc.com/calendar/?&season[]=1&season[]=5&category[]=2&location[]=1" style="border:none;overflow:hidden;width:100%" frameborder="0" scrolling="yes"></iframe>

Veuillez noter que si vous n'avez pas encore d'autres filtres à la fin de votre URL, vous devrez préfixer votre premier filtre avec un point d'interrogation. Cela peut être vu dans les exemples ci-dessus.

Pour intégrer votre calendrier personnalisé, vous devrez d'abord copier le Code iFrame généré ci-dessus. Ensuite, accédez à la page désirée sur votre site Uplifter et sélectionnez Modifier la section préférée à l'intérieur. Sélectionnez l'icône Code Source dans la barre d'outils. S'il n'y a pas de contenu dans le code source, vous pouvez simplement coller votre Code iFrame copié. S'il y a du contenu, déterminez votre emplacement préféré et collez votre code. Il peut être utile de chercher des mots-clés de votre contenu pour déterminer où se trouve la meilleure position.

Lorsque vous avez terminé, cliquez sur OK et assurez-vous de cliquer sur Enregistrer la Page en haut à droite !

Si vous souhaitez intégrer votre calendrier dans un site non-Uplifter, vous devrez accéder au backend de votre système de contenu. De là, vous devrez soit accéder au HTML brut de votre page préférée, soit utiliser un outil d'intégration (si votre hébergeur de contenu en propose un) pour coller le code.