Add events to google calendar,yahoo calendar, outlook and ical

Question

The users of my Javascript based site often need to create an event where they post an event name, event description, start time and the end time of the event along with the date. Now, they would like to add those event details to the their Google calendar or Yahoo calendar or iCal or Outlook, is their any standard library for that? I am trying to figure it out for the past 3 days though I am aware of google api's but I am not aware of iCal and Outlook or even Yahoo too. I am looking for something very similar this "http://compute2011.doattend.com/". In the right hand side you can see this "Add this to your site" part, I would like to do the same thing.

Please help me to get in hands on.

Solution 1

I've been searching for something similar tonight and found this jQuery plugin which seems that could help you out. You can directly generate .ics files "on the fly" with it which should be good for Google, Outlook, iCal and Yahoo.

http://keith-wood.name/icalendar.html

I haven't had a chance to test it myself though, but plan to do it in the next days. However HTH!

Solution 2

Here is what I use in case it helps anyone, I'm using ASP.NET MVC / C# but should give you the gist of what's required to build it yourself.

Outlook & iCal:

var icsUrl = '/todos/geticsfile/' + id;

public ActionResult GetIcsFile(string id) {
            var user = UserService.Get(UserId);
            var todo = ToDoService.Get(id);
            var content = GetOutlookFileContents(user, todo);
            var bytes = Encoding.UTF8.GetBytes(content);
            return File(bytes, "text/calendar", "housters-todo.ics");
        }

public static string GetOutlookFileContents(User user, ToDo todo) {
            var builder = new StringBuilder();

            builder.AppendLine("BEGIN:VCALENDAR");
            builder.AppendLine("METHOD:REQUEST");
            builder.AppendLine("PRODID:Microsoft Exchange Server 2010");
            builder.AppendLine("VERSION:2.0");
            builder.AppendLine("BEGIN:VTIMEZONE");
            builder.AppendLine("TZID:Eastern Standard Time");
            builder.AppendLine("BEGIN:STANDARD");
            builder.AppendLine("DTSTART:16010101T020000");
            builder.AppendLine("TZOFFSETFROM:-0700");
            builder.AppendLine("TZOFFSETTO:-0800");
            builder.AppendLine("RRULE:FREQ=YEARLY;INTERVAL=1;BYDAY=1SU;BYMONTH=11");
            builder.AppendLine("END:STANDARD");
            builder.AppendLine("BEGIN:DAYLIGHT");
            builder.AppendLine("DTSTART:16010101T020000");
            builder.AppendLine("TZOFFSETFROM:-0800");
            builder.AppendLine("TZOFFSETTO:-0700");
            builder.AppendLine("RRULE:FREQ=YEARLY;INTERVAL=1;BYDAY=2SU;BYMONTH=3");
            builder.AppendLine("END:DAYLIGHT");
            builder.AppendLine("END:VTIMEZONE");
            builder.AppendLine("BEGIN:VEVENT");
            builder.AppendLine("ORGANIZER;CN=" + user.Name + ":MAILTO:" + user.EmailAddress);
            builder.AppendLine("ATTENDEE;ROLE=REQ-PARTICIPANT;PARTSTAT=NEEDS-ACTION;RSVP=TRUE;CN=" + user.EmailAddress + ":MAILTO:" + user.EmailAddress);
            builder.AppendLine("DESCRIPTION;LANGUAGE=en-US:" + todo.Task);
            builder.AppendLine("SUMMARY;LANGUAGE=en-US:" + todo.TitleOrTask);
            builder.AppendLine("DTSTART;TZID=Eastern Standard Time:" + todo.DueDate.Value.ToString("yyyyMMdd"));
            builder.AppendLine("DTEND;TZID=Eastern Standard Time:" + todo.DueDate.Value.ToString("yyyyMMdd"));
            builder.AppendLine("UID:" + Guid.NewGuid().ToString());
            builder.AppendLine("CLASS:PUBLIC");
            builder.AppendLine("PRIORITY:5");
            builder.AppendLine("DTSTAMP:" + todo.DueDate.Value.ToString("yyyyMMdd") + "T023422Z");
            builder.AppendLine("TRANSP:OPAQUE");
            builder.AppendLine("STATUS:CONFIRMED");
            builder.AppendLine("SEQUENCE:0");
            if(todo.PropertyId != null) {
                var property = PropertyService.Get(todo.PropertyId);
                builder.AppendLine("LOCATION;LANGUAGE=en-US:" + property.FullAddress);
            }
            else {
                builder.AppendLine("LOCATION;LANGUAGE=en-US:Unknown");
            }
            builder.AppendLine("X-MICROSOFT-CDO-APPT-SEQUENCE:0");
            builder.AppendLine("X-MICROSOFT-CDO-OWNERAPPTID:2112076272");
            builder.AppendLine("X-MICROSOFT-CDO-BUSYSTATUS:TENTATIVE");
            builder.AppendLine("X-MICROSOFT-CDO-INTENDEDSTATUS:BUSY");
            builder.AppendLine("X-MICROSOFT-CDO-ALLDAYEVENT:FALSE");
            builder.AppendLine("X-MICROSOFT-CDO-IMPORTANCE:1");
            builder.AppendLine("X-MICROSOFT-CDO-INSTTYPE:0");
            builder.AppendLine("X-MICROSOFT-DISALLOW-COUNTER:FALSE");
            builder.AppendLine("BEGIN:VALARM");
            builder.AppendLine("ACTION:DISPLAY");
            builder.AppendLine("DESCRIPTION:REMINDER");
            builder.AppendLine("TRIGGER;RELATED=START:-PT15M");
            builder.AppendLine("END:VALARM");
            builder.AppendLine("END:VEVENT");
            builder.AppendLine("END:VCALENDAR");

            return builder.ToString();
        }

Google:

var text = encodeURIComponent('Housters To-Do Due: ' + self.task());
            var startDate = moment(self.dueDate()).format('YYYYMMDD');
            var endDate = moment(self.dueDate()).add('days', 1).format('YYYYMMDD');
            var details = encodeURIComponent(self.task());
            var location = encodeURIComponent(self.propertyName());
            var googleCalendarUrl = 'http://www.google.com/calendar/event?action=TEMPLATE&text=' + text + '&dates=' + startDate + '/' + endDate + '&details=' + details + '&location=' + location;

Solution 3

For those who are searching for alternatives.

http://addthisevent.com/

https://github.com/tardate/jquery.addtocalendar

Solution 4

For a pure javascript solution, there is ics.js. It generates ics files using solely javascript. The only downside is that it doesn't support older versions of IE.

Solution 5

I thinks this is the best option to do this. This plugin can create a .ics file from variables on html.

http://addtocalendar.com/

View more solutions