2011-12-13 21 views
16

Puede alguien decirme si hay algún plugin de jQuery para crear dinámicamente un archivo .ics con los valores procedentes de los valores de la página div como habríacrear un archivo .ics sobre la marcha usando javascript o jquery?

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

o Javascript manera de crear dinámicamente presentar una .ics? Básicamente, necesito crear un archivo .ics y extraer estos valores usando javascript o jquery. y vincular ese archivo ics creado al enlace "AGREGAR AL CALENDARIO" para que se agregue a Outlook?

Respuesta

1

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

Y el JavaScript para crear el contenido del archivo y abra el archivo:

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

Es de suponer que querría añadir que el código para el 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 ser.

Espero que esto ayude.

28

tendrá que hacerlo en formato ICS. también necesitará convertir la fecha y la zona horaria; P.EJ. 20120315T170000Z o YYYYMMDDThhmmssZ

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 su descarga. el usuario deberá abrirlo y outlock, iCal o google calendar harán el resto.

+1

FYI a cualquiera que esté buscando: a partir del 8/8/13 este código no funciona. El archivo .ics se descarga y se abre, pero iCal dice que no puede leer el archivo y los errores salen:/ NOTA: Si elimina los espacios alrededor de "\ n BEGIN: VEVENT \ n" funciona, pero SO no lo permite Me edito cualquier cosa con menos de 6 caracteres :( –

+0

Esto funcionó fantásticamente para mí ahora! – Reuben

+0

Así que esto funciona en el navegador web en iOS, pero no cuando está envuelto en phonegap ..alguna idea de cómo hacer que funcione? Para aquellos que quieran esto en una pregunta separada, aquí: http://stackoverflow.com/questions/18166561/allowing-ics-to-open-in-phonegap-app-for-ios?noredirect=1#comment26614023_18166561 – Reuben

0

Este enfoque funcionó bien, pero con IE8 el navegador no pudo reconocer el tipo de archivo y se negó a abrir como un elemento de calendario. Para evitar esto tuve que crear el código en el lado del servidor (y expuesto a través del servicio RESTful) y luego establecer 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 se puede servir llamando a window.location en la URL del servicio y funciona en Chrome, Firefox e IE8.

Espero que esto ayude.

1

Por lo que he encontrado en línea y en este sitio, no es posible hacer que funcione en IE, ya que debe 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 puede necesitar reestructurar su código para usar un lenguaje del lado del servidor para generar y descargar el archivo ICS.

Puede hallar más información en este question

0

Si bien esto es una cuestión mayor, me he estado buscando una solución de extremo frontal también. Recientemente encontré el ICS.js library que parece ser la respuesta que está buscando.

Cuestiones relacionadas