¿Cómo creo un enlace para agregar una entrada a un calendario?

85

Estoy trabajando para este club nocturno y actualmente estoy haciendo un sitio web para ellos, tienen muchos eventos y su sitio se basa mucho en eventos, hoy hacen un evento en Facebook de cada evento, pero sería genial tener un " Agregar a mi calendario "que lo agregó a su iCal o Google Calendar (o tal vez incluso Outlook).

Me las arreglé para descubrir cómo hacer un feed de calendario, pero luego se agregará como un nuevo calendario, lo único bueno es que la gente puede "suscribirse a eventos", pero es bastante complicado tener un calendario para cada evento. Así que me gustaría saber cómo implementar una función que les permita agregarla a su calendario principal fácilmente. Piense como un enlace mailto: pero para calendarios si es posible.

Además, mientras estoy en el tema, ¿alguien sabe si es posible importar automáticamente un evento de Facebook a WordPress o exportar un evento de WordPress a Facebook? Eso sería genial, pero eso no es tan importante.

Hultner
fuente
Relacionado: stackoverflow.com/questions/22757908/…
Denilson Sá Maia

Respuestas:

53

ACTUALIZACIÓN (gratis para uso personal):
HTTPS AHORA ES COMPATIBLE

Si bien mi respuesta a continuación, que detalla cómo hacerlo para cada servicio, funcionará, en mi opinión, ahora es mucho más fácil ir con un tercero como AddThisEvent [https://addthisevent.com] . Te permite personalizar muchas opciones, así como agregarlas a Facebook y más. Desafortunadamente, ahora lo han convertido en un servicio pago para cualquier uso que no sea personal y lo hacen cumplir.

Supongo que hay otras soluciones de terceros como esta, pero solo puedo hablar con esta, y nos ha funcionado muy bien hasta ahora.


Para un " Agregar a mi Calendario de Google ", solían tener un formulario de generador de código que podía usar, pero desde entonces lo han eliminado. Para obtener más detalles sobre los enlaces de Google Calendar, consulte la respuesta de squarecandy a continuación .

Para Outlook , es un BIT más complicado, pero básicamente necesitas crear un .vcsarchivo con los datos del evento y simplemente hacer un enlace a ese archivo. Instrucciones paso a paso aquí .

Para un enlace iCal , puede usar una clase PHP como esta , o seguir las instrucciones de esta página sobre cómo crear un icsarchivo (archivo iCal).

Dave
fuente
13
Gracias, es una lástima que no exista un estándar universal para esto como con mailto: para correo electrónico.
Hultner
Parece que la página "Event Publisher Guide" de Google ya no ofrece ese formulario de generación de URL (desafortunadamente está en la naturaleza de la documentación de Google cambiar incesantemente), pero el formato de URL de @ squarecandy aún funciona bien (para Google Calendar, al menos).
chbrown
Bueno, su propio formulario ni siquiera generó enlaces que funcionaran, así que probablemente por eso lo eliminaron. :)
squarecandy
94

Los enlaces en la publicación de Dave son geniales. Solo para poner algunos detalles técnicos sobre los enlaces de Google en una respuesta aquí en SO:

Enlace de Google Calendar

<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>

siendo los parámetros:

  • acción = PLANTILLA (obligatorio)
  • texto (nombre codificado en URL del evento)
  • fechas (formato de fecha ISO, fecha de inicio / fecha de finalización; debe tener tanto la hora de inicio como la de finalización; el generador de botones le permitirá dejar la hora de finalización en blanco, pero debe tener una o no funcionará).
    • para usar la zona horaria del usuario: 20131208T160000 / 20131208T180000
    • para usar la hora global, conviértalo a UTC, luego use 20131208T160000Z / 20131208T180000Z
    • eventos de todo el día, puede usar 20131208/20131209 ; tenga en cuenta que el generador de botones se equivoca. Debe usar la siguiente fecha como fecha de finalización para un evento de un día durante todo el día, o +1 día para la fecha de finalización que desee.
  • detalles (descripción / detalles del evento codificado en URL)
  • ubicación (ubicación codificada en URL del evento; asegúrese de que sea una dirección que Google Maps pueda leer fácilmente)

Actualización de febrero de 2018:

Aquí hay una nueva estructura de enlaces que parece ser compatible con la nueva versión de Google del calendario de Google sin requerir interacción de 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

Nueva URL base: https://calendar.google.com/calendar/r/eventedit

Nuevos parámetros:

  • texto (nombre del evento)
  • fechas (formato de fecha ISO, fecha de inicio / fecha de finalización; debe tener tanto la hora de inicio como la de finalización)
    • un evento con horas de inicio / finalización: 20131208T160000 / 20131208T180000
    • eventos de todo el día, puede usar 20131208/20131209 - la fecha de finalización debe ser +1 día a la fecha de finalización que desee .
  • ctz ( zona horaria como América / New_York: déjela en blanco para utilizar la zona horaria predeterminada del usuario. Se recomienda encarecidamente incluirla en casi todas las situaciones. Por ejemplo, un recordatorio para una videoconferencia: si tres personas en diferentes zonas horarias hacen clic en este enlace y establecen una recordatorio para su "propio" martes a las 10:00 a. m., esto no funcionaría bien).
  • detalles (descripción / detalles del evento codificado en URL)
  • ubicación (ubicación codificada en URL del evento; asegúrese de que sea una dirección que Google Maps pueda leer fácilmente)
  • agregar (lista de correos electrónicos separados por comas: agrega invitados a su nuevo evento)

Notas:

  • la antigua estructura de la URL anterior ahora redirige aquí
  • admite https
  • mejores ofertas con zonas horarias
  • acepta +espacio además de %20( urlencodevs rawurlencodeen php - ambos funcionan)
caramelos cuadrados
fuente
2
Si alguien está interesado, creé una función php que construirá este tipo de enlace de calendario de Google: gist.github.com/squarecandy/26611bbcfc63f9c7e3a7dc45e9145133
squarecandy
2
También vale la pena señalar que la zona horaria no se está configurando para mí, a menos que especifique tanto las fechas de la zona horaria como el parámetro ctz. Más información aquí: zaclee.net/php/…
Zachary Schuessler
@squarecandy ¿alguna idea de cómo hacer que esto establezca varias fechas a la vez? Por ejemplo, si tiene un rango como martes - jueves, pero desea mostrarlo en el calendario como 3 eventos separados.
garek007
@ garek007 No creo que eso sea posible. Eso tendría que ser 3 eventos diferentes. Si hay una tarea que no puede realizar en la versión en línea de la pantalla "agregar evento" del calendario de Google, no puede usar esta técnica para ello. Probablemente puedas descubrir cómo agregar 3 eventos a la vez con la API de Google Calendar, pero esto solo enlaza con el "evento de agregar" para un solo evento.
squarecandy
@squarecandy También quiero actualizar el organizador, ¿hay alguna forma en la que pueda agregar detalles del organizador también, en este enlace de creación de evento?
Nikunj Undhad
11

Para agregar a la contribución del calendario de google de squarecandy, aquí el nuevo

Formato de CALENDARIO DE PERSPECTIVAS (Sin necesidad de crear .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>

Pruébalo

Lo mejor sería url_encode los valores de la variable de resumen, ubicación y descripción.

Por el bien del conocimiento,

Formato de CALENDARIO YAHOO

<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>

Pruébalo

Hacerlo sin un tercero tiene muchas ventajas, por ejemplo, usarlo en correos electrónicos.

Email
fuente
7
Parece que el enlace de Outlook ya no funciona. Agrega la ubicación y muestra el formulario Nuevo evento, pero no completa ningún otro campo.
Steve
10
Para ampliar el comentario de @ Steve, el enlace de Outlook ya ni siquiera se resuelve en un servidor: aparece un error de resolución de DNS.
Owen Blacker
4
Lo sentimos, esta respuesta debe actualizarse para que sea válida, se votó en contra.
webaholik
8

Aquí hay un servicio Agregar al calendario que sirve para agregar un evento en

  1. Calendario de Apple
  2. calendario de Google
  3. panorama
  4. Outlook en línea
  5. Yahoo! Calendario

El botón " Agregar al calendario " para eventos en sitios web y calendarios es fácil de instalar, independiente del idioma, zona horaria y compatible con DST. Funciona perfectamente en todos los navegadores, tabletas y dispositivos móviles modernos, y con Apple Calendar, Google Calendar, Outlook, Outlook.com y 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>

ingrese la descripción de la imagen aquí

jGupta
fuente
1
Absolutamente genial. Bastante similar a addevent.com, pero creo que aún más opciones de estilo y tiene licencia del MIT. Por lo tanto, esta es definitivamente mi elección. Gracias por ese enlace.
Arvid
9
Esto ahora se ha fusionado con addevent.com
Separatrix
-4

Puede hacer que el programa cree una versión .ics (iCal) del calendario y luego puede importar este .ics en cualquier programa de calendario que desee: Google, Outlook, etc.

Sé que esta publicación es bastante antigua, así que no me molestaré en ingresar ningún código. Pero, por favor, comente sobre esto si desea que le proporcione un resumen de cómo hacerlo.

Fishcx
fuente
7
Realmente agradecería un ejemplo de este código si puede, tratando de hacer exactamente esto con Outlook, Gmail e iCal
KidCache