You can make a difference in the Apple Support Community!

When you sign up with your Apple Account, you can provide valuable feedback to other community members by upvoting helpful replies and User Tips.

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

embedding iCloud'scalendar in a web page ?

Hello, please would you excuse my poor english syntax !


Yesterday, i have had a ical's calendar synchronized with a Google Calendar. From Google, i was able to copy a few lines of html code (an <iframe> tag) in order to publish that calendar in a personal page web, after pasting this code in my personal html code.


Today my ical's calendar is inClouded ;-), and the synchronization with Google Calendar was disabled (i don't want to have twice the events).


Please give me the tip: how can i embed this inclouded calendar in my web page ???


thanks for help.


Vincent.

Mac OS X (10.7.2)

Posted on Oct 19, 2011 6:07 AM

Reply
34 replies

Apr 24, 2012 9:45 PM in response to Csound1

I think we're using different terms here. Above, I said "publish", not "export". You said "export".


In OSX6, under the "Calendar" menu there is a menu item called "Change Location". Selecting that enables the user to stipulate an ftp address to which an updated .ics file is "Publish"ed every time the user modifies a calendar entry. That option is avaiable whether it is a MobileMe calendar or an OnMyMac calendar. In OSX7, that option is available for OnMyMac calendars only, and it is called "Publish", and the option appears again in the pull down menu under Calendar. As I said, the Publish option appears only for OnMyMac calendars. For iCloud calendars, the "Share Calendar" item appears in its place. One or the other - not both.


I am not looking for a solution wherein we have to manually "export" the /ics file every time the calendar is modified, followed by ftp'ing it to the website. I am simply looking for OSX6's Publish capability. It worked for MobieMe calendars. In OSX7, I want it for an iCloud calendar.

Apr 25, 2012 6:48 AM in response to Csound1

Well I accept that you did not intend to reply to me with the BusyCal point, but your April 24 response must therefore have been to Level 8 Roger Wilmut1's Feb 29 non-question advisory post, the last one prior to mine - in fact 8 weeks prior to my April 24 post. That reply, not to me, then resulted in an email to me that raised the BusyCal approach -confusing to me in that it quoted Roger Wilmut1's 8 week old post but came to me short hours after my post to a seemingly 8 week stale thread.


So in any event, your suggestion (to Roger Wilmut1 I guess) to use BusyCal was not helpful to me, whether you intended it to be or not, and that is in fact what I then said. And since I said that, this dialogue has not advanced the discussion on the underlying technology or issue at all. So if you are determined to ensure that this response does not remain the last one in this thread, please reassert your point, but I see no point in pursuing this further with you.


Signing off and giving up...

Jun 28, 2012 11:44 AM in response to vincentfrombrest

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.

Jul 30, 2012 1:57 PM in response to DavidPaterson

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?

Jul 30, 2012 2:26 PM in response to cp_whaley

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.

Jul 30, 2012 6:33 PM in response to DavidPaterson.ca

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

Aug 17, 2012 7:11 AM in response to DavidPaterson

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.).


Aug 17, 2012 1:32 PM in response to SpotsInc

Hey Spots;


Happy to hear you've tried it and gotten this far. Sorry to hear of the difficulties.


Not sure I'm in a good position to solve this for you-can't simulate it at present, but some ideas/advice:


Explanation:

Line 102:

"sed" calls up the stream editor, to edit the xxx.ics file data on the fly while assembling into the xxx.full.ics file. The -e argument simply tells it that there are additional line edits to append to this command (lines 103 thru 106). Note that the backslash "\" at the end of each line is a connector to the next line.

What these lines do, individually, is:

Line 102: Detect in the xxx.ics file any lines that begin (i.e 's/) with "SUMMARY:" (with a .* wildcard to identify any subsequent text), and replace them with "SUMMARY:Booked".

Line 103: Similarly for any line beginning with "URI", replacing with "URI:"

Line 104: Similarly for any line beginning with "DESCRIPTION:"

Line 105: Similarly for any line beginning with "LOCATION:"

Line 106: Different. Sometimes the SUMMARY line (and potentially others) may overflow into a second, third, etc line in the initial xxx.ics file. This line deletes these extra line occurrences (crude, but probably sufficient).

(SUMMARY, DESCRIPTION, URI, and LOCATION fields in the file seem to correlate with the event Title, URL, Notes, and Location fields.)

Suggestions:

Its not obvious what is happening for you and I can't really simulate or solve it but you can try modifying things somewhat and see if you can get it working. I would suggest that you:

-find/delete any copies of the xxx.full.ics file that may be accidentally left lying around

-begin with a fresh copy of the script to avoid any possible typos resulting from your earlier work

-try removing 1 line at a time. start with 103 or 104 or 105 to see if there is one particular line that is causing the syntax error. Remove one of those lines and test, then a second, then all three. At this point, I expect you will be getting those fields in your calendar, but not yet the Summary event field.

-if you then try to remove line 106 while leaving one/some previous lines in place, recognize that you will have the last existing line with a "\" connector at its end, without any following line for it to connect to. This would probably generate a syntax error. So if you remove line 106 while leaving line 102, then remove the backslash from 102 as well.


So finally, from Creighton, the suggestion:


In addition to taking out all lines 102-106 now, also remove the backslash and pipe (vertical bar) at the end of line 101.


Basically, make it look like this (ignore line #'s here):

  1. function get_events_from_file {
  2. EVENT_FILE=${1}
  3. # This script was written to take a business calendar and publish it
  4. # online to show available vs. booked times.
  5. #
  6. # For reasons of privacy, many event details are suppressed, to
  7. # let all details display, delete everything from "sed" to the end
  8. # of the command.
  9. cat ${EVENT_FILE} | \
  10. awk 'BEGIN { is_event=0 }
  11. /^BEGIN:VEVENT/ { is_event=1 }
  12. /^END:VEVENT/ { print $0; is_event=0 }
  13. { if ( 1 == is_event ) { print $0 } }'
  14. }


I'm betting Creighton's suggestion solves it. If so, apologies for my incomplete instructions in the original post. Please post your success/difficulties so that we can all know if this solves it.

Good Luck

Oct 23, 2012 11:43 PM in response to vincentfrombrest

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

Jul 16, 2013 7:32 AM in response to llihaj

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

embedding iCloud'scalendar in a web page ?

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple Account.