Index
Aperçu
Le calendrier Uplifter vous donne un contrôle total sur l'affichage et l'emplacement du calendrier de votre organisation. Qu'il soit centré sur quelques programmes ou sur l'ensemble de l'éventail, n'affichant qu'une heure spécifique de la journée ou les 24 heures complètes, vous contrôlez exactement ce que les utilisateurs voient.
Webinaire
Modèle de Calendrier
La méthode la plus simple pour afficher un calendrier sur votre site Uplifter est de l'insérer via la fonctionnalité Modèle.
Insertion d'un Modèle de Calendrier
- Connectez-vous à votre site et accédez à la page publique souhaitée
- Cliquez pour Modifier
la section désirée de la page
- Cliquez sur Insérer un Modèle
- Choisissez Calendrier Intégré
- Cliquez sur OK
- 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.
Génération d'un Calendrier Personnalisé
Uplifter offre une multitude d'options de configuration. Notez que la plupart de ces options ne sont pas obligatoires pour générer un calendrier. Dans le configurateur ci-dessous, vous trouverez tous les champs obligatoires indiqués comme tels avec toutes les options supplémentaires listées comme paramètres avancés.
Options de Configuration
Bases du Calendrier
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.
Dates/Heures (non requis)
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.
Informations Affichées (non requis)
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.
En-tête/Pied de page (non requis)
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.
Personnalisation Avancée
Une personnalisation supplémentaire peut être appliquée à votre calendrier en ajoutant ou ajustant les paramètres dans le code iFrame. Veuillez noter qu'ajuster manuellement le code iFrame n'aura pas d'effet sur l'exemple de calendrier.
Hauteur/Largeur
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.
Espacement des Éléments En-tête/Pied de page
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.
Configurateur de Calendrier
Veuillez noter que l'exemple de calendrier ci-dessous ne représente pas la hauteur et/ou la largeur que votre calendrier atteindra. Cela dépendra de l'emplacement où vous intégrez le code.
Filtres Personnalisés
Des filtres spécifiques au site peuvent être ajoutés à votre calendrier pour personnaliser davantage les résultats. Cela peut aider à garantir que votre calendrier n'affiche que les éléments souhaités. Actuellement, l'application de filtres personnalisés n'est pas extrêmement pratique, mais c'est assez facile à faire. Les filtres suivants sont disponibles :
| Type de Filtre | Code du Filtre |
| Catégorie | &category[]=# |
| Niveau de Catégorie | &category_level[]=# |
| Saison | &season[]=# |
| Emplacement | &location[]=# |
| Installation | &facility[]=# |
| Programme | &program[]=# |
Obtention des ID
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.
- Accédez à Produits & Programmes > Programmes
- 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
- Examinez l'URL de la page pour trouver les ID de filtre
- 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.
Intégration d'un Calendrier Personnalisé
- Copiez le contenu du Code iFrame
- Sélectionnez Modifier
- Cliquez sur Code Source
- Collez le Code iFrame à l'emplacement désiré
- Cliquez sur OK
- Cliquez sur Enregistrer la Page
En Savoir Plus
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.