gCalFlow: jQuery Google Calendar Event List Plug-in

Put your calendar event listing 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>

Google Calendar API v3 Migration Note

Old version of this plugin (< 3.0.0) uses Calendar API v2, and the API has been shutdown at 2014-11-17. Old version is not worked anymore.

Please update to 3.0.0 above for v3 API transition, and check about API key.

Customization

jQuery Google Calendar Flow plug-in is highly configurable with CSS, Javascript option and HTML templating!

CSS classes

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

Options

Following options are available for jQuery#gCalFlow call.

Use your own API key for v3 API

gCalFlow plugin now uses Google Calendar API v3. All client accesses via v3 API has been checked for quota limit of each API project. v2 has no limitation, but v3 has.

This plugin has been distributed with a API key for demo or really tiny use. If you do not specify apikey option, built-in key will be used. In this case, the widget may fail to be rendered by quota.

I recommend you to create your own API key and use it for stable functionality on your site.

To create API key, visit Google Developers Console. Then, follow bellow;

1. Create new project (or use project you created before).
2. Check "APIs & auth" -> "Credentials" on side menu.
3. Hit "Create new Key" button on "Public API access" section.
4. Choose "Browser key" and keep blank on referer limitation.

Finally, set your API key on apikey option for gCalFlow() call like following;

<div id="gcf-simple"></div>
<script type="text/javascript">
$(function() { $('#gcf-simple').gCalFlow({
  calid: 'your-calendar-id@calendar.goo...',
  apikey: 'Your-API-key-string-like-AIzaSyD0vtTU...'
});});
</script>

Template

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

Built-in template

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>

Variable classes

The content of elements with following class name will be replaced:

Date formatting with Globalize 0.x

In default, widget shows ISO style date. To customize date format easily, you can use Globalize 0.x Javascript library (Note: version 1.x alpha is not supported yet! Please use 0.x). By just loading Globalize, default date formatting will be changed to new one which includes full month and weekday names. 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>

If you'd like to customize more, tune globalize_fmt_* options (globalize_fmt_datetime, globalize_fmt_date, globalize_fmt_time, globalize_fmt_monthday) with their format string. For example, to use short month/week names and 24h format;

$('#your-widget-id').gCalFlow({
  globalize_fmt_datetime: "dddd', 'MMM' 'dd', 'yyyy' 'HH':'mm",
  globalize_fmt_date: "dddd', 'MMM' 'dd",
  globalize_fmt_time: "HH':'mm",
  globalize_fmt_monthday: "MMM' 'dd"
});

Examples

Title only updates list (template + js options)

Ticker (template + js + CSS)

Copyright

License

MIT License

Author

Tatsuki Sugiura