Comment créer un lien pour ajouter une entrée à un calendrier ?

Question

Je travaille pour une boîte de nuit et je suis en train de créer un site web pour eux, ils ont beaucoup d'événements et leur site est construit autour des événements, aujourd'hui ils font un événement facebook de chaque événement mais ce serait génial d'avoir un bouton "Ajouter à mon calendrier" qui ajouterait l'événement à votre iCal ou Google Calendar (ou peut-être même Outlook).

J'ai réussi à comprendre comment faire un flux de calendrier mais il sera ajouté comme un nouveau calendrier, la seule bonne chose est que les gens peuvent "s'abonner aux événements" mais c'est assez désordonné d'avoir un calendrier pour chaque événement. J'aimerais donc savoir comment implémenter une fonction qui leur permette de l'ajouter facilement à leur calendrier principal. Je pense à un lien mailto : mais pour les calendriers, si c'est possible.

Et tant que j'y suis, quelqu'un sait-il s'il est possible d'importer automatiquement un événement de Facebook vers WordPress ou d'exporter un événement de WordPress vers Facebook ? Ce serait génial, mais ce n'est pas si important.

Answer 1

Les liens figurant dans le billet de Dave sont excellents. Je voudrais juste donner quelques détails techniques sur les liens Google dans une réponse ici sur SO :

Lien vers l'agenda Google

<a href="http://www.google.com/calendar/event?action=TEMPLATE&text=Example%20Event&dates=20131124T010000Z/20131124T020000Z&details=Event%20Details%20Here&location=123%20Main%20St%2C%20Example%2C%20NY">Add to gCal</a>

les paramètres étant :

• action=TEMPLATE (obligatoire)
• text (nom de l'événement encodé en url)
• dates (format de date ISO, date de début/date de fin - il doit y avoir une heure de début et une heure de fin - le générateur de boutons vous permet de laisser l'heure de fin vide, mais vous devez en avoir une, sinon cela ne fonctionnera pas).
  • pour utiliser le fuseau horaire de l'utilisateur : 20131208T160000/20131208T180000
  • pour utiliser l'heure globale, convertir en UTC, puis utiliser 20131208T160000Z/20131208T180000Z
  • les événements de toute la journée, vous pouvez utiliser 20131208/20131209 - noter que le générateur de boutons se trompe. Vous devez utiliser la date suivante comme date de fin d'un événement d'une journée, ou +1 jour par rapport à la date de fin souhaitée.
• détails (description/détails de l'événement encodés dans l'url)
• lieu (lieu de l'événement encodé en url - assurez-vous qu'il s'agit d'une adresse que Google Maps peut lire facilement)

---

Mise à jour février 2018 :

Voici une nouvelle structure de liens qui semble prendre en charge la nouvelle version du calendrier de Google sans nécessiter d'interaction avec l'API :

https://calendar.google.com/calendar/r/eventedit?text=My+Custom+Event&dates=20180512T230000Z/20180513T030000Z&details=For+details,+link+here:+https://example.com/tickets-43251101208&location=Garage+Boston+-+20+Linden+Street+-+Allston,+MA+02134

Nouvelle url de base : https://calendar.google.com/calendar/r/eventedit

Nouveaux paramètres :

• texte (nom de l'événement)
• les dates (format de date ISO, date de début/date de fin) doit ont une heure de début et une heure de fin)
  • un événement avec des heures de début et de fin : 20131208T160000/20131208T180000
  • les événements de toute la journée, vous pouvez utiliser 20131208/20131209 - la date de fin doit se situer à +1 jour de la date de fin souhaitée .
• ctz ( fuseau horaire comme America/New_York - laisser vide pour utiliser le fuseau horaire par défaut de l'utilisateur. Il est fortement recommandé d'inclure ce fuseau dans presque toutes les situations. Par exemple, un rappel pour une vidéoconférence : si trois personnes situées dans des fuseaux horaires différents cliquent sur ce lien et fixent un rappel pour leur "propre" mardi à 10h00, cela ne fonctionnera pas bien).
• détails (description/détails de l'événement encodés dans l'url)
• lieu (lieu de l'événement encodé en url - assurez-vous qu'il s'agit d'une adresse que Google Maps peut lire facilement)
• add (liste d'emails séparés par des virgules - ajoute des invités à votre nouvel événement)

Notes :

• l'ancienne structure d'url ci-dessus redirige maintenant ici
• supporte https
• mieux gérer les fuseaux horaires
• accepte + pour l'espace en plus de %20 ( urlencode vs rawurlencode en php - les deux fonctionnent)

Answer 2

MISE À JOUR (gratuite pour un usage personnel) :
HTTPS EST DÉSORMAIS PRIS EN CHARGE

Bien que ma réponse ci-dessous détaillant la marche à suivre pour chaque service SOIT valable, il est beaucoup plus facile aujourd'hui d'opter pour un tiers tel que AddThisEvent [https://addthisevent.com] . Il vous permet de personnaliser de nombreuses options ainsi que d'ajouter à Facebook et plus encore. Malheureusement, ils en ont fait un service payant pour toute utilisation autre que personnelle et appliquent cette règle.

Je suppose qu'il existe d'autres solutions tierces comme celle-ci, mais je ne peux parler que de celle-ci, qui a très bien fonctionné pour nous jusqu'à présent.

---

Pour un " Ajouter à mon agenda Google "Il existait auparavant un formulaire de génération de code que vous pouviez utiliser, mais il a été supprimé depuis. Pour plus de détails sur les liens de Google Agenda, voir Réponse de squarecandy ci-dessous .

Pour Perspectives c'est un peu plus compliqué, mais en gros, il faut créer un fichier .vcs avec les données de l'événement et créer un lien vers ce fichier. Instructions étape par étape ici .

Pour un iCal vous pouvez utiliser une classe PHP comme celui-ci ou suivre les instructions de cette page sur la façon de créer un ics (fichier iCal).

Answer 3

Pour compléter la contribution de squarecandy à google calendar, voici le tout nouveau

CALENDRIER OUTLOOK (sans qu'il soit nécessaire de créer des fichiers .ics) !

<a href="https://bay02.calendar.live.com/calendar/calendar.aspx?rru=addevent&dtstart=20151119T140000Z&dtend=20151119T160000Z&summary=Summary+of+the+event&location=Location+of+the+event&description=example+text.&allday=false&uid=">add to Outlook calendar</a>

le tester

Le mieux serait d'url_encoder les valeurs des variables summary, location et description.

Au nom de la connaissance,

CALENDRIER YAHOO format

<a href="https://calendar.yahoo.com/?v=60&view=d&type=20&title=Summary+of+the+event&st=20151119T090000&et=20151119T110000&desc=example+text.%0A%0AThis+is+the+text+entered+in+the+event+description+field.&in_loc=Location+of+the+event&uid=">add to Yahoo calendar</a>

le tester

Le fait de le faire sans tiers présente de nombreux avantages, par exemple en l'utilisant dans les courriers électroniques.

Answer 4

Voici un Ajouter au calendrier afin d'ajouter un événement à la liste des événements.

1. Calendrier Apple
2. Google Agenda
3. Perspectives
4. Outlook Online
5. Calendrier Yahoo !

Le " Ajouter au calendrier Le bouton " pour les événements sur les sites web et les calendriers est facile à installer, indépendant de la langue, compatible avec les fuseaux horaires et l'heure d'été. Il fonctionne parfaitement dans tous les navigateurs modernes, les tablettes et les appareils mobiles, ainsi qu'avec Apple Calendar, Google Calendar, Outlook, Outlook.com et Yahoo Calendar.

<div title="Add to Calendar" class="addeventatc">
    Add to Calendar
    <span class="start">03/01/2018 08:00 AM</span>
    <span class="end">03/01/2018 10:00 AM</span>
    <span class="timezone">America/Los_Angeles</span>
    <span class="title">Summary of the event</span>
    <span class="description">Description of the event</span>
    <span class="location">Location of the event</span>
</div>

Answer 5

Litmus a publié un excellent article expliquant comment élaborer une solution soignée qui fonctionne bien avec les principaux clients de messagerie et de calendrier, y compris pour les utilisateurs qui utilisent des clients de différents fournisseurs.

C'est loin d'être trivial, étant donné la nature non standardisée de cet espace, mais si vous êtes prêt à retrousser vos manches pendant quelques jours, vous pouvez obtenir quelque chose qui fonctionne bien et qui ne s'accompagne pas d'un prix mensuel et de limites d'utilisation !

https://www.litmus.com/blog/how-to-create-an-add-to-calendar-link-for-your-emails/