link - crear un archivo.ics sobre la marcha usando javascript o jquery?

google calendar button

Question

Alguien puede decirme si hay algún complemento de jquery para crear dinámicamente un archivo .ics con valores provenientes de los valores div de la página, como si hubiera

<div class="start-time">9:30am</div>
<div class="end-time">10:30am</div>
<div class="Location">California</div>

o javascript forma de crear dinámicamente un archivo .ics? ¿Básicamente necesito crear un archivo .ics y extraer estos valores usando javascript o jquery? y el enlace que creó el archivo ics al enlace "AGREGAR AL CALENDARIO" para que se agregue a Outlook?

Answer 1

Esta es una pregunta antigua, pero tengo algunas ideas que podrían ayudarlo a comenzar (oa cualquier otra persona que necesite hacer una tarea similar).

Y el JavaScript para crear el contenido del archivo, y abrir el archivo:

var filedata = $(''.start-time, .end-time, .Location'').text();
window.open( "data:text/calendar;charset=utf8," + escape( filedata ) );

Probablemente querría agregar ese código al evento onclick de un botón de formulario.

No tengo Outlook a mano, así que no estoy seguro de si reconocerá automáticamente el tipo de archivo, pero podría hacerlo.

Espero que esto ayude.

Answer 2

Este enfoque funcionó bien, sin embargo, con IE8 el navegador no pudo reconocer el tipo de archivo y se negó a abrir como un elemento del calendario. Para solucionar esto tuve que crear el código en el lado del servidor (y expuesto a través del servicio RESTful) y luego configurar los encabezados de respuesta de la siguiente manera;

@GET
@Path("generateCalendar/{alias}/{start}/{end}")
@Produces({ "text/v-calendar" })
public Response generateCalendar(
@QueryParam("alias") final String argAlias,
@QueryParam("start") final String argStart,
@QueryParam("end") final String argEnd) {
ResponseBuilder builder = Response.ok();
builder.header("content-disposition", "attachment;filename=calendar.ics");
builder.entity("BEGIN:VCALENDAR/n<........insert meeting details here......>:VCALENDAR");
return builder.build();
}

Esto puede solucionarse llamando a window.location en la URL del servicio y funciona en Chrome, Firefox e IE8.

Espero que esto ayude.

Answer 3

Por lo que he encontrado en línea y en este sitio, no es posible hacer que esto funcione en IE, ya que necesita incluir ciertos encabezados para que IE sepa que debe descargar este archivo.

El método window.open funciona para Chrome y Firefox pero no para IE, por lo que es posible que deba reestructurar su código para usar un lenguaje del lado del servidor para generar y descargar el archivo ICS.

Más se puede encontrar en esta pregunta

Answer 4

Si bien esta es una pregunta anterior, también he estado buscando una solución de front-end. Recientemente, me topé con la biblioteca ICS.js, que parece ser la respuesta que estás buscando.

Answer 5

Tendrá que hacerlo en formato ICS. también necesitarás convertir la fecha y la zona horaria; EG 20120315T170000Z o aaaammddThhmmssZ

 msgData1 = $(''.start-time'').text();
msgData2 = $(''.end-time'').text();
msgData3 = $(''.Location'').text();
var icsMSG = "BEGIN:VCALENDAR/nVERSION:2.0/nPRODID:-//Our Company//NONSGML v1.0//EN/nBEGIN:VEVENT/nUID:[email protected]/nDTSTAMP:20120315T170000Z/nATTENDEE;CN=My Self ;RSVP=TRUE:MAILTO:[email protected]/nORGANIZER;CN=Me:MAILTO::[email protected]/nDTSTART:" + msgData1 +"/nDTEND:" + msgData2 +"/nLOCATION:" + msgData3 + "/nSUMMARY:Our Meeting Office/nEND:VEVENT/nEND:VCALENDAR";
$(''.test'').click(function(){
window.open( "data:text/calendar;charset=utf8," + escape(icsMSG));
});

la muestra anterior creará un archivo ics para descargar. el usuario tendrá que abrirlo y sobresalir, iCal o google calendar se encargarán del resto.