Show your event list on any website
jQuery Google Calendar Flow plug-in provides a widget to show list of upcoming or recently updated events of public google calendar with configurable options and fully customizable HTML design template.
In the simplest way, you need to specify just calendar ID. The sample on this page is shown by following code:
<div id="#gcf-simple"></div>
<script type="text/javascript">
$(function() { $('#gcf-simple').gCalFlow({
calid: 'linuxfoundation.org_34363837313836302d343036@resource.calendar.google.com'
});});
</script>
jQuery Google Calendar Flow plug-in is highly configurable with CSS, Javascript option and HTML templating!
This plug-in in uses following classes in default template. You can write CSS to override with your design.
If you need more complex change, use template.
.gCalFlow
+ .gcf-header-block
| + .gcf-title-block
| + .gcf-title
+ .gcf-item-container-block
| + .gcf-item-block
| + .gcf-item-header-block
| | + .gcf-item-date-block
| | | + .gcf-item-daterange
| | + .gcf-item-title-block
| | + .gcf-item-title
| + .gcf-item-body-block
| + .gcf-item-description
| + .gcf-item-location
+ .gcf-last-update-block
+ .gcf-last-update
Following options are available for jQuery#gCalFlow call.
| Name | Type | Default | Note |
|---|---|---|---|
| calid | string | (none) | Google Calendar ID (required if feed_url is missing) |
| mode | string | 'upcoming' | 'upcoming' for upcoming events, or 'updates' for events ordered by last modified. |
| feed_url | string | (none) | Any Atom feed URL compatible with google's. If this option is specified, 'calid' and 'mode' are ignored. |
| maxitem | int | 15 | Limit for max number of events. You can set any number, but Google may ignore large numbers. |
| date_formatter | function | ISO style formatter | This function will be called with two arguments: Date instance and "all day flag". |
| daterange_formatter | function | ISO style formatter | This function will be called with three arguments: start date, end date and "all day flag". |
| auto_scroll | boolean | true | |
| scroll_interval | int | 10 * 1000 | in milliseconds |
| link_title | boolean | true | enable link on calendar title |
| link_item_title | boolean | true | enable link on item title |
| link_item_description | boolean | false | enable link on item description |
| link_target | string | '_blank' | target attribute of auto-generated links |
| callback | function | null | callback function when finish rendering. In this function, a jQuery object contains target node is assigned to 'this'. This is useful to chain other jQuery method or plug-in (e.g. callback: function() { this.effect("highlight") }) |
| globalize_culture | string | (auto-detect) | Culture string for Globalize |
| globalize_fmt_datetime | string | 'f' | Format string of Globalize for date and time |
| globalize_fmt_date | string | 'D' | Format string of Globalize for date |
| globalize_fmt_time | string | 't' | Format string of Globalize for time |
| globalize_fmt_monthday | string | 'M' | Format string of Globalize for month and day |
If the target element has any child nodes, it will be treated as a custom template. Google Calendar Flow plug-in will replace the contents of elements based on their class name. You can use any design by creating your own template.
Note: To use the default template, keep the target element empty (no child nodes)!
Here is the built-in default. It's a good starting point for creating a modified template.
<div class="gcf-header-block">
<div class="gcf-title-block">
<span class="gcf-title"></span>
</div>
</div>
<div class="gcf-item-container-block">
<div class="gcf-item-block">
<div class="gcf-item-header-block">
<div class="gcf-item-date-block">
[<span class="gcf-item-daterange"></span>]
</div>
<div class="gcf-item-title-block">
<strong class="gcf-item-title"></strong>
</div>
</div>
<div class="gcf-item-body-block">
<div class="gcf-item-description">
</div>
<div class="gcf-item-location">
</div>
</div>
</div>
</div>
<div class="gcf-last-update-block">
LastUpdate: <span class="gcf-last-update"></span>
</div>
The content of elements with following class name will be replaced:
| Class name | Change text to... | Note |
|---|---|---|
| gcf-title | Calendar title | |
| gcf-last-update | Last update of the calendar | |
| gcf-link | (text is not replaced) | This class will be set "href" attribute to calendar URL (not used in default). |
| gcf-item-container-block | This class item container. The content of this node is cleared, then gcf-item-block element will be appended for each event item. If template dose NOT have this element, no items will be shown. | |
| gcf-item-block | This class will be treated as item template. | |
| gcf-item-daterange | Item date range | Must be a descendant of gcf-item-block. Formatted by 'daterange_formatter' option. |
| gcf-item-title | Item title | Must be a descendant of gcf-item-block. |
| gcf-item-description | Item description text | Must be a descendant of gcf-item-block. |
| gcf-item-location | Item location text | Must be a descendant of gcf-item-block. |
| gcf-item-link | (text is not replaced) | Must be a descendant of gcf-item-block. This class will be set "href" attribute to item URL (not used in default). |
| gcf-item-date, gcf-item-start-date | Item start date | Must be a descendant of gcf-item-block (not used in default). |
| gcf-item-end-date | Item end date | Must be a descendant of gcf-item-block (not used in default). |
| gcf-item-update-date | Item update date | Must be a descendant of gcf-item-block (not used in default). |
You can use Globalize to customize date format easily. Load Globalize Javascript files like following;
<script src="/path/to/your/globalize.js" type="text/javascript"></script> <script src="/path/to/your/cultures/globalize.culture.en-US.js" type="text/javascript"></script>
And customize globalize_fmt_* options (globalize_fmt_datetime, globalize_fmt_date, globalize_fmt_time, globalize_fmt_monthday) with their format string.