embedding iCloud'scalendar in a web page ?

A SOLUTION! For info to those still struggling with this issue, Creighton Paterson and I have created a solution. We provide instructions for an app which will Publish an iCloud sync'd calendar to a web site.

Terminology:

iCal supports both Syncing and Publishing of calendars.

-Syncing is a term restricted to iCloud (formerly MobileMe) calendars, and is the mechanism by which calendar entries are copied between Macs, iPhones, iPads, iPods, and the user's iCloud (MobileMe) site. When wanting to display a calendar on a web site, the web version of the calendar from iCloud is a sufficient solution for some.

-Publishing was possible prior to OSX Lion for both OnMyMac and MobileMe calendars, but as of OSX Lion it is no longer supported for iCloud (formerly MobileMe) calendars. This method was often a preferred method to place a calendar onto a website, but with OSX Lion it is not possible to use it and maintain iCloud syncing to other devices simultaneously.

It is this latter loss of functionality that I have complained about here, and that we now propose a solution for below. I was motivated to this because my wife uses her MacBook to operate a home based aesthetics spa business, and has been both syncing her calendar to her iPod and our iPad, and publishing a version of her calendar to her iWeb designed website to inform customers of potential appointment availability. The loss of this Publish functionality is 'business unfriendly', and would otherwise have forced her to decline to use iCloud (and syncing) in favour of maintaining publishing to her clients via an OnMyMac calendar going forward.

Caution 1: The "Publish" capability prior to OSX Lion operated automatically whenever a change was made to the calendar in question. The solution here is not automatic, and requires two (or one) mouse clicks to operate. Our experience with the Publish capability demonstrated that it was susceptible to failure (generally due to hasty closure of the laptop lid prior to completion of the upload routine), and so this seems an insignificant deficiency to us. The solution provides an app, whose icon can be double clicked (Desktop or Applications folder), or an alias can be placed in the Dock requiring only a single click.

Caution 2: Our intent is only to show available and booked slots on the website. Consequently we set out to create a solution that suppresses any personal client info that might be entered into the iCal event record. Others interested in using it without obscuring some of the calendar data can make minor modifications to achieve this.

Background:

Prior to Lion, Apple saved a single <calname>.ics file for each named iCal calendar, located at some depth within the user's Library folder. It had the name of the particular calendar in question, with the .ics extension, and contained ALL events for that calendar. In OSX Lion, that has changed. Now a directory structure is used (Library/calendars/<xxx>.caldav/<yyy>/…) wherein EACH EVENT is stored in a separate <mmm>.ics file, within an Events directory associated with each named calendar. An associated Info.plist file contains the name of the calendar to which the Events folder is associated. So there is no longer a distinct <calendar>.ics file which can easily be uploaded (ftp) to a web host. There is a <zzz>.ics file for each event. Creating a full calendar file from these event files is required.

Solution:

We have produced and tested a 10 step Mac Automator application which finds the desired event files, concatenates them into a single <calname>.full.ics file using a shell script (by Creighton). The shell script is embedded within one of the Automator actions, and another action ftp's the file to an identified server. The specific Automator actions we have employed, in sequence, are:

1) Show Growl Notification - Using Growl 1.4 ($1.99 from the App Store if you don't already have it) simply for status messages to the user. This step simply tells the user "Assembling Calendar"

2) Run Shell Script - To find and concatenate the individual events into a full <calname>.full.ics file, more below (2).

3) Show Growl Notification - This step tells the user "Uploading Calendar"

4) Get Specified Finder Items - This selects the newly created <calname>.full.ics file.

5) Upload to FTP - This action is not part of the standard Automator install. It can be downloaded from http://editkid.com/upload_to_ftp, and installed. It then requires the specific ftp server address, path, and credentials for the website installation in question, the same info as required for the iCal Publish facility.

6) Get Specified Finder Items - This reselects the newly created <calname>.full.ics file again.

7) Move Finder Item to Trash - cleanup, delete the concatenated file.

8) Get Specified URLs - This defines the website URL in which the calendar is now being displayed. More below (1).

9) Show Growl Notification - This action tells the user "Calendar Uploaded - displaying"

10) Website Popup - This pops up a browser window to the Website in which the calendar is displayed, defined 2 actions previous. This allows verification of the upload. More below (1).

Obviously the Growl Notifications and the Get Specified URLs / Website Popup actions can optionally be deleted if no user feedback is required.

(1) We use phpicalendar within the website to embed the calendar within a frame on one page on the website. Much of the normal info contained within each calendar event record is obscured in the shell script for privacy reasons (e.g. Summary data which includes client name and required service, location, notes, etc). Much of the standard phpicalendar functionalty has also been disabled in order to present a simple weekly view sufficient to inform prospective clients of available and booked time slots. Some of the obscuring is also achieved within phpicalendar modifications. The result can be viewed at http://orangegrovespa.com/Availability_Hrs_Map.html.

(2) The ©CalUpload shell script is the critical piece of this app and is be made available, with free use license to anyone via http://pastebin.com/TkXyezhK. (Download and paste into the Automator Run Shell Script acton.) It contains comments for guidance to other users. Installation specific entries which must be modified by anyone intending to implement this script are at lines 27 (replace "OrangeGroveSpa" with "yourcalendarname"), and lines 102 through 106:

-Remove these lines to expose the event SUMMARY, URL, DESCRIPTION, and LOCATION information.

-Alternatively modify these lines; note that we replace SUMMARY info with "Booked".

-Line 106 deletes text for ANY fields that overflow to a second line, and will do so even if you remove that line from the script.).

The calendar .ics file uploaded will be named yourcalendarname.full.ics.

The ©CalUpload shell script will not be supported beyond the embedded notes and those provided here.

Orange groves in Kanata? I used to live there, and I don't think so! ;-)

I hope implementing your solution isn't as intimidating as it looks. How difficult is installing and setting up PHPiCalendar? It was so easy with MobileMe, since you didn't have to install any calendar display code at all.

In my case, this tiny code fragment... <iframe name="calendar" style="border:0px solid black" scrolling=auto width=800 height=1200 align=top frameborder=0 src="http://ical.me.com/cwhaley/Toronto_Live_Music"></iframe>

...was all I needed to create my calendar display at my web site...

http://torontoliveclubhub.com/Club_Calendar/club_calendar.html

Everything was so smooth until MobileMe was finally cut off. All of my updates added to iCal before that fateful day about a month ago or less are still there, but obviously there's no syncing after that.

With my web-site destined calendars I could care less about iCloud and mobile syncing. I'm OK with leaving those calendars On My Mac. Does that suggest a simpler solution by any chance?

Ha! Well if I can grow a magnolia tree in the backyard, I must be in Kanata South. Besides, you haven't been to the spa so you don't really know. Of course being in Toronto now, you really know the meaning of the word tropical. ;-)

Your code fragment looks similar to what I use in iWeb to present the actual calendar data, except my src statement is obviously different. And that IS the difficulty you are concerned about.

I rejected using the MobileMe published version of the calendar from the start because of look/feel, and my need to control the weekdays/hours on display, and to obscure the private info entered into the event records. phpicalendar is an open source option that allowed me to achieve all of that. And I had NO EXPERIENCE with phpicalendar before starting that project, and was able to suss out how to modify or delete the stuff I wanted changed. That said, yes, it was a challenge, and though not a professional code monkey, I am quite technically inclined. As to the "indimidating" nature of what I have posted above, it really isn't so. I just believe in being verbose in giving instructions. The steps themselves are quite simple. It was also the first time I had attempted an Automator project. Thankfully the tough stuff, the script, was done by Creighton, and is simply a cut and paste with minor edits.

Well, thanks once again for posting your solution, Dave!

I haven't used Automator myself, but I was certainly intrigued with the possibilities when it first arrived.

I'd actually like a little more control over my web calendar format too, so PHPiCalendar sounds like a good way to go.

Meanwhile, if anyone else has found other solutions to this common problem, I'm sure we'd all like to hear what you have to say.

It's great to know that there's at least one workable solution. Thanks, Dave!

...Charles

David, great script! Everything works nicely for me except that it's removing all info from the events when I leave lines 102 through 106 in. So as you directed, I removed them but now I get a syntax error at line 173 ( which looks like the end of the script). I'm not enough of a scripter to identfiy what the problem is…

… lines 102 through 106:

-Remove these lines to expose the event SUMMARY, URL, DESCRIPTION, and LOCATION information.

-Alternatively modify these lines; note that we replace SUMMARY info with "Booked".

-Line 106 deletes text for ANY fields that overflow to a second line, and will do so even if you remove that line from the script.).

Duh! Yep, that does the same thing. Well spotted. Great that you've got it to that stage. Good luck with phpicalendar - a bit of a challenge, but very flexible if you can stand all the embedded options you have to deal with.

Would love to see your final calendar URL when you're done.

Here's the FREE WAY... you must have iCal & Gmail Account.

Open iCal and connect your gmail calendar account

iCal/Preferences/Accounts/(add your gmail account)

Open Safari

Log onto your google calendar https://www.google.com/calendar

Settings/Calendars/Sharing(edit settings)/

Select make this calendar public box and choose "Show all event details"

SAVE

Select Calendar details and copy the code and embed the calendar code to your website.

You can now make deletions editions on your iCal and it will update. (i've rarely noticed at times that the update delay can be 1hr) If you have 2+ computers or operators needding access simply log in to iCal with the multiple computers/ipads/iphones and easily make changes to that google calendar via your devices calendar application.

If you only see "busy" displayed without details this is a google setting that must be changed in the control panel. under settings/calendar with a Google Apps for Busisness Account. (free also)

Ex:

http://www.smokinthighs.com/calendarschedule.html

There is actually a way of setting up your iCloud calendar to appear on your website if you have a Wordpress website by using a Wordpress plugin and syncronizing your iCloud calendar with this.

I've put together a tutorial on how to do this:

http://yotike.com.au/2013/05/07/displaying-your-icloud-calendar-on-your-wordpres s-website/

Jeff;

I'm afraid we are not able to provide much support for this solution. It was offered only as an example of how to resolve the problem as described with the limited flexibility mentioned in the postings. We had no need to build in greater flexibility for ourselves.

We have continued to use it for over a year now, including through the OS upgrade to Mountain Lion but cannot offer customized implementations. (Mountain Lion stores event records somewhat differently than Lion did; each event results in a separate file now. However, CalUpload posesses the flexibility to cope with this.)

It may be possible for someone proficient in Unix to modify the script to filter the calendar entries to accomplish what you have suggested. Alternatively you could try using it as offered and set your iCal preferences (Advanced) to then delete all events 30 days after they have passed.

Good luck

/david

Apple don't mark posts as solved - only the person who started the thread can do that, and that is what has happened here. The post he marked as a solution was made before a number of other suggestions were made, though I don't know how effective they are. Part of the problem is that a CalDav server may be required, and these are difficult to find (MobileMe was one such but at we know that's long since gone). It's possible to run your own, but only if you have suitable equipment and the knowledge to do this. (My own post on page 1 was made before MobileMe closed and is of course no longer applicable.)

Here's a simple solution (relatively speaking):

Log into iCloud and get the public share address for your calendar. Something like this... webcal://p03-calendarws.icloud.com/ca/subscribe/1/246COWhNqrt3AaAhx237JSnsjsnSJ nsjdfkjsbdfmXad8Y_pUx-WcSdrUxhHzdfbzcvbxfvbzdfbzcvbczvbgrVVYfcEaUODr048_uVBPMumF BNoDAqSE0

Plug that URL into THIS site: https://icaltogcal.com because Apple won't let Google read the iCloud feed directly, you need a proxy.

Take the resulting output which will look something like this: webcal://icaltogcal.com/share.php?c=27da9e203cd8a0a67bSDFDfJFhHFHFdhshdf53c01ff ad8fa09.04380390

Log into Google calendar and on the left side under "Other Calendars" select "Add by URL" and paste in that second webcal address. Select "Make public" and click "Add Calendar"

There you go. You are now subscribed to a read-only copy of your iCloud on Google. You can now share or embed this in a webpage like any other Google Calendar. The only caveat is when you make changes to your calendar events in iCloud it can sometimes take a few hours for the Google Calendar to refresh the feed from iCloud… but there is a solution for this as well which I have NOT YET TRIED. https://scheduleshare.net claims to be able to force Google to refresh the feed every single time it's called… for a fee.

Apple should allow read-only embedding of iCloud calendars. The fact that we have to go through all this is just stupid.

This scenario is not possible. You can only use www.icloud.com to see and edit your iCloud calendar, but you can not take that and "embedd" it on external sites.

Thank you vincentfrombrest for reminding me about my Spanning Sync account! It works like a charm. 🙂

iCal can export an ics file, just about everything can come to think of it, why would you need BusyCal?

To be clear, I do not recommend that you use BusyCal.