25

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.

atw
  • 5,428
  • 10
  • 39
  • 63
Jeevan Dongre
  • 4,627
  • 13
  • 67
  • 129

6 Answers6

12

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!

Zalakain
  • 597
  • 5
  • 9
  • Good solution.... however is there a way to add event to Outlook calendar directly from a php script, instead of generating an ics file? – shasi kanth May 13 '11 at 06:49
  • @Jeevan Dongre did that icalendar solution work for you? I am not able to download the icalendar from the link provided... please help. – shasi kanth May 13 '11 at 07:56
  • 2
    @dskanth Nope its not even working for me too. Even I am searching for alternate solutions, let me try and get back to you here. – Jeevan Dongre May 14 '11 at 05:25
  • @Jeevan Dongre I think an alternate solution would be to add event from php to an exchange server, and then sync our outlook with the exchange server, so that both will have the same events. Looking for ways to figure it out. – shasi kanth May 18 '11 at 04:59
  • Did you find a way to create a .ics file with several events using this plugin? – Azimuth Jun 16 '11 at 12:46
5

For those who are searching for alternatives.

http://addthisevent.com/

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

Praveen Vijayan
  • 6,521
  • 2
  • 29
  • 28
5

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.

InsanelyADHD
  • 548
  • 5
  • 11
5

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;
Justin
  • 17,670
  • 38
  • 132
  • 201
  • +1 this really helped me, i think your timezone data is very incorrect and it should be similar to https://gist.github.com/anonymous/e279854b37feb2c53c1d . Additionally I believe you really want `METHOD:PUBLISH` **not request** as that doesn't actually let you add the event to your calendar. – Chris Marisic Aug 15 '14 at 19:10
  • Excuse me, is Google changed the methodology to do that? I copied your solution for Google Calendar month before and works well, but now stops working... ! Thank you! – Aral Roca Oct 06 '15 at 21:13
1

for calendar events, you can use this lib https://www.npmjs.com/package/add-event-to-calendar

0

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

http://addtocalendar.com/

napstercake
  • 1,815
  • 6
  • 32
  • 57