jQuery Forum

I came up with a work around for this delema for the iPad/iPhone users. I created an ajax call to send the ics file to the logged in users' email and not have the ics file directly sent to the device.

As you have noticed, Mobile Safari simply does not support importing .ics files to calendar. But it does support importing them via email.

Maybe I'm misunderstanding this thread, but we have a JQuery Mobile app that allows .ics files to be downloaded with Mobile Safari on an iPhone into the iOS Calendar app:

Jody,

I’ll try to help, but I think what I’ve done might be different from what you’re trying to do. I'm dynamically creating an ics file and making it available for download. The consumption of my ics file is automatically handled by the Safari Mobile browser and the iOS Calendar app.

My development environment is:

• ASP.NET MVC 4
• C#
• Visual Studio Ultimate (Academic Edition)
• Microsoft SQL Server
• Free DDay.iCal library for creating the ics file
• jQuery 1.9.1
• jQuery Mobile 1.3.2

To create the ics file, I use the following code (which is almost entirely copied from http://rbalajiprasad.blogspot.com/2012/11/mvc-c-create-ical-calendar-ics-feed.html):

1. /// <summary>
   /// This action method is almost entirely copied from this article: http://rbalajiprasad.blogspot.com/2012/11/mvc-c-create-ical-calendar-ics-feed.html
   /// </summary>
   /// <param name="bookId"></param>
   /// <returns></returns>
   public FileResult DownloadEventIcsFile(int bookId)
   {
       iCalendar iCalendar = new iCalendar();
       Event iCalEvent = iCalendar.Create<Event>();
       anderson_mobile_view emsEvent = EventSystemContextSingleton.Instance.SingleEvent(bookId);
       iCalEvent.Start = new iCalDateTime(emsEvent.TimeEventStart);
       iCalEvent.End = new iCalDateTime(emsEvent.TimeEventEnd);
       iCalEvent.Summary = emsEvent.EventName;
       iCalEvent.Location = emsEvent.RoomDesc;
       List<string> contacts = new List<string>();
       contacts.Add(emsEvent.Contact);
       iCalEvent.Contacts = contacts;
       iCalEvent.Description = emsEvent.GroupName + " " + emsEvent.EventTypeDesc;
    
       ISerializationContext serializationContext = new SerializationContext();
       ISerializerFactory serializerFactory = new DDay.iCal.Serialization.iCalendar.SerializerFactory();
       IStringSerializer serializer = serializerFactory.Build(iCalendar.GetType(), serializationContext) as IStringSerializer;
    
       string output = serializer.SerializeToString(iCalendar);
       var contentType = "text/calendar";
       var bytes = Encoding.UTF8.GetBytes(output);
    
       return File(bytes, contentType, "ems-book-id-" + bookId + ".ics");
   }

On the server-side of your app, you might want to somehow consume the ics file and then display the data within your web client. I'm not sure how your "subscribe via ics" feature works.

I hope this helps.

Jim

 

Hi Jim - you're right, I think what you're doing is different than what I'm trying to do. Rather than create an .ics file that can be downloaded, I'm trying to figure out a way to grab an existing .ics file from the web and display its data in my jQm web app. Thanks a lot for your thorough response, though. I appreciate you taking the time to explain it to me.

Here you go... good luck! (It's a bit lengthy...)

http://www.ietf.org/rfc/rfc2445.txt

Use $.ajax to load the data into a string, and then parse away.

Thanks! That is a lot to digest, but I'll see what I can do.

Depending on which programming language you're using, there are software libraries that will do the ics parsing for you. For C#, you might want to look at DDay.iCal http://www.ddaysoftware.com/Pages/Projects/DDay.iCal/Default.aspx

Thanks for the link to DDay.iCal. Unfortunately, I started this project in jQM, just using web-based languages (HTML, CSS, some Javascript and a tiny php snippet or two). I'm too far along now to start over, but I've been wishing lately that I had started off in X-Code or something.

See if this is useful:

https://github.com/peterbraden/ical.js

Thank you! This looks very useful. After much discussion today, I *think* I might try a different tack with my web app - pulling in a "News" RSS feed rather that trying to tackle the full calendar with an .ics file. The News component will encompass upcoming events and I've already got the code to pull in and finesse RSS feeds. I think I can add a "subscribe to the full calendar" link within my "News" section, and that will give the user an option to pull in the full calendar via their iPhone calendar or whatnot.

Hello,

Very interesting thread. I have the exact same problem as the author of this post at the top, although in my case I really want to create a new event invite such as Mr Watkin does on his website.

The problem is that it does work very well in Mobile Safari but if you're in a web app (icon launched directly from the home screen) with <meta name="apple-mobile-web-app-capable" content="yes" /> then two possibilities :

1) if you put only a relative path to your .ics (generated server side) --> does not work, iOS says "cant be downloaded"
2) if you put an absolute path (with the http:// protocol) then it does exactly what the author of this post has written : --> it forces to close the session and open a new Mobile Safari tab then present the invite but when the user get out of the invite it goes back to the last Mobile Safari opened url and not the web app itself of course.

a) Has anyone found a workaround for that behaviour ?

b) Mr Watkin > Correct me if I'm wrong but your mobile website works in Mobile Safari but if the user is saving the icon on the desktop it's still open Safari and not the internal web app mechanism. So in your case you dont have the problem because AFAIK you always use a complete Mobile Safari session and not a "total" webapp. Or did you achieve the same result in a "total" web app ?

Thank you.
Guillaume

As an experiment, I just now tried it as an iOS "webapp" by using <meta name="apple-mobile-web-app-capable" content="yes"> and launching the app from a homepage icon.

Thank you very much for your test.

I'm confused about the relative path for the .ics, all my tests did not work with a relative path in a webapp (under iOS6 / iphone 4) but they did work in Safari I think. I'll redo some tests if you say it worked relatively under a webapp.

From your explanation I think you then have the same kind of problem than me, although I'm not sure I understood well what happened : once one exit the full screen mode and "accepted" the invitation, in my case it goes back to any old safari window still opened (that can be any site in the world) so that's for me worse than just exit of the full screen mode --> it completely breaks the user experience because it does not go back to the application at all, you have to manually Go back to the home screen, look again for your icon and re-launch it.

I'm wondering if the relative path made you somehow have your application opened again in the Safari standard window.

I'll make some more tests but I doubt there's a workaround to this behaviour sadly.

Many thanks.