iCal
by dorenstein
HTML
<p>Join us on Australia Day.</p>
<div id="basicICal"></div>
<br/><br/><br/><br/><br/><br/>
<hr>
format
<a href="webcal://domain.com/path/calendar.ics">iCal link</a>
<hr>
BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//hacksw/handcal//NONSGML v1.0//EN
BEGIN:VEVENT
UID:[email protected]
DTSTAMP:19970714T170000Z
ORGANIZER;CN=John Doe:MAILTO:[email protected]
DTSTART:19970714T170000Z
DTEND:19970715T035959Z
SUMMARY:Bastille Day Party
END:VEVENT
END:VCALENDAR
CSS
/* jQuery iCalendar styles v1.1.1 */
.icalendar_popup_text {
cursor: pointer;
color: blue;
text-decoration: underline;
}
.icalendar_popup {
display: none;
position: absolute;
z-index: 100;
}
.icalendar_popup ul {
float: left;
width: 220px;
padding: 2px;
background-color: #eee;
border: 1px solid #aaa;
}
.icalendar_popup .icalendar_list li {
width: 50%;
margin: 0%;
padding: 2px 0px;
background-color: transparent;
border: none;
}
.icalendar_list {
display: block;
list-style-type: none;
font-size: 80%;
margin: 0px;
padding: 0px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari3/Opera9 */
.icalendar_list {
font-size: 100%;
}
}
html:first-child .icalendar_list { /* Opera */
font-size: 80%;
}
.icalendar_list li {
float: left;
width: 12%;
margin: 0px 1px;
padding: 1px;
background-color: #eee;
border: 1px outset;
}
.icalendar_compact {
background-color: #eee;
border: 1px outset;
}
.icalendar_compact li {
width: 16px;
height: 16px;
margin: 0px;
padding: 2px;
background-color: transparent;
border: none;
}
.icalendar_list a {
width: 100%;
text-decoration: none;
}
.icalendar_list span {
display: inline-block;
width: 16px;
height: 16px;
}
.icalendar_list img {
border: none;
}
JavaScript
/* http://keith-wood.name/icalendar.html
iCalendar processing for jQuery v1.1.1.
Written by Keith Wood (kbwood{at}iinet.com.au) October 2008.
Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and
MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
Please attribute the author if you use it. */
(function($) { // Hide scope, no $ conflict
var PROP_NAME = 'icalendar';
var FLASH_ID = 'icalendar-flash-copy';
/* iCalendar sharing manager. */
function iCalendar() {
this._defaults = {
sites: [], // List of site IDs to use, empty for all
icons: 'icalendar.png', // Horizontal amalgamation of all site icons
iconSize: 16, // The size of the individual icons
target: '_blank', // The name of the target window for the iCalendar links
compact: false, // True if a compact presentation should be used, false for full
popup: false, // True to have it popup on demand, false to show always
popupText: 'Send to my calendar...', // Text for the popup trigger
tipPrefix: '', // Additional text to show in the tool tip for each icon
echoUrl: '', // The URL to echo back iCalendar content, or blank for clipboard
echoField: '', // The ID of a field to copy the iCalendar definition into, or blank for clipboard
start: null, // The start date/time of the event
end: null, // The end date/time of the event
title: '', // The title of the event
summary: '', // The summary of the event
description: '', // The description of the event
location: '', // The location of the event
url: '', // A URL with more information about the event
contact: '', // An e-mail address for further contact about the event
recurrence: null, // Details about a recurring event, an object with attributes:
// dates (Date or Date[]) or times (Date or Date[]) or
// periods (Date[2] or Date[][2] or [][Date, string]) or
// freq (string - secondly, minutely, hourly, daily, weekly, monthly,...