html - página - ¿Cómo creo un enlace para agregar una entrada a un calendario?

hipervinculos en html ejemplos

Question

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

Pude averiguar cómo crear un calendario, pero luego se agregará como un nuevo calendario, pero lo bueno es que las personas pueden "suscribirse a eventos", pero es bastante complicado tener un calendario para cada evento. Entonces me gustaría saber cómo implementar una función que les permita agregarla fácilmente a su calendario principal. Piensa como un mailto: enlace pero para calendarios si eso es posible.

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

Answer 1

Aquí hay un servicio Agregar al calendario para servir el propósito de 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 " Añadir 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 modernos, tabletas y dispositivos móviles, y con el calendario de Apple, 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>

Answer 2

La ventaja de una suscripción a su calendario de eventos, como usted dice, es que puede cambiar las fechas / horas / información y deben reflejarse en todos sus suscriptores. ¿Por qué creas un calendario separado para cada evento en lugar de uno?

¿Estás familiarizado con las API para Google Calendar y Facebook?

En cuanto a la última pregunta, ¿tiene la intención de mantener dos feeds de eventos separados en Wordpress y Facebook? Podría tener Wordpress agarrando el feed de Facebook. ¿Tal vez algún tipo de CMS de eventos que publica en Facebook luego actualiza el feed de Wordpress?

Answer 3

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>

los parámetros son:

• acción = PLANTILLA (requerido)
• texto (url codificado nombre del evento)
• fechas (formato de fecha ISO, fecha de inicio / finalización - deben tener tanto tiempo de inicio como de finalización - el generador de botones le permitirá dejar el tiempo de finalización en blanco, pero debe tenerlo o no funcionará).
  • para usar la zona horaria del usuario: 20131208T160000 / 20131208T180000
  • para usar la hora global, convertir a UTC, luego usar 20131208T160000Z / 20131208T180000Z
  • todos los 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 la fecha de finalización de un evento de un día durante todo el día, o de +1 día para lo que quiera que sea la fecha de finalización.
• detalles (URL Descripción del evento codificada / detalles)
• ubicación (ubicación codificada por URL del evento: asegúrese de que sea una dirección que google maps pueda leer fácilmente)

Actualización feb 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 la 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 / finalización - deben tener tanto la hora de inicio como la de finalización)
  • un evento con tiempos de inicio / finalización: 20131208T160000 / 20131208T180000
  • todos los eventos del día, puede usar 20131208/20131209 - la fecha de finalización debe ser de +1 día para lo que quiera que sea la fecha de finalización .
• ctz ( timezone como America / New_York): deje en blanco para usar la zona horaria predeterminada del usuario. Muy recomendable incluir esto en casi todas las situaciones. Por ejemplo, un recordatorio para una videoconferencia: si tres personas en diferentes zonas horarias hicieron clic en este enlace y configuraron un recordatorio para su "propio" martes a las 10:00 am, esto no funcionaría bien.)
• detalles (URL Descripción del evento codificada / detalles)
• ubicación (ubicación codificada por URL del evento: asegúrese de que sea una dirección que google maps pueda leer fácilmente)

Notas:

• la vieja estructura de la url anterior ahora redirige aquí
• admite https
• ofertas w / timezones mejor
• acepta + por espacio además de %20 ( urlencode vs rawurlencode en php - ambos funcionan)

Answer 4

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

OUTLOOK CALENDAR format (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 el resumen, la ubicación y los valores de la variable de descripción.

Por el bien del conocimiento,

Formato YAHOO CALENDAR

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

Answer 5

Puede hacer que el programa cree una versión .ics (iCal) del calendario y luego puede importar este archivo .ics al 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, coméntelo si desea que le brinde un resumen de cómo hacerlo.

Answer 6

Si está buscando algo realmente simple, puede utilizar este widget http://addthisevent.com/ . Funciona muy bien y es simple de implementar. Sé que esto es viejo, pero solo si alguien está mirando.

Answer 7

ACTUALIZACIÓN (gratis para uso personal):

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

Para usarlos a través de SSL:

HTTPS no es compatible. Sin embargo, recomiendo que descargue este paquete para uso local y lo cargue en su propio servidor.

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

Para un " Agregar a mi Google Calendar ", solían tener un formulario generador de código que podrí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 necesita crear un archivo .vcs con los datos del evento, y simplemente crear un enlace a ese archivo. Instrucciones paso a paso aquí .

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