# Google Calendar Flow plugin Examples

See http://sugi.github.io/jquery-gcal-flow/ for details.

## Simple way

<div id="gcf-simple"> </div> <script type="text/javascript"> $('#gcf-simple').gCalFlow({ calid: 'linuxfoundation.org_34363837313836302d343036@resource.calendar.google.com' }); </script>

## Change size and color by CSS and option

<style type="text/css"> #gcf-design { height: 300px; width: 500px; background: #F0FFEE; filter: none; } #gcf-design .gcf-header-block { background: green; filter:none; } </style> <div id="gcf-design"> </div> <script type="text/javascript"> $('#gcf-design').gCalFlow({ calid: 'linuxfoundation.org_34363837313836302d343036@resource.calendar.google.com', maxitem: 10 }); </script>

## Custom DOM for template and recent update mode

Your calendar name Updates:
2012-02-01 09:00: Item Title of Your event
LastUpdate: 2012-02-30 20:58
<div id="gcf-custom-template"> <div class="gcf-header-block"> <div class="gcf-title-block"> <span class="gcf-title">Your calendar name</span> updates </div> </div> <div class="gcf-item-container-block"> <div class="gcf-item-block"> <div class="gcf-item-header-block"> <div class="gcf-item-title-block"> <a class="gcf-item-link"><span class="gcf-item-update-date">2012-02-01 09:00</span>:</a> <strong class="gcf-item-title">Item Title of Your event</strong> </div> </div> </div> </div> <div class="gcf-last-update-block"> LastUpdate: <span class="gcf-last-update">2012-02-30 20:58</span> </div> </div> <script type="text/javascript"> $('#gcf-custom-template').gCalFlow({ calid: 'linuxfoundation.org_34363837313836302d343036@resource.calendar.google.com', maxitem: 50, mode: 'updates', date_formatter: function(d, allday_p) { return (d.getMonth()+1) + "/" + d.getDate() + "/" + d.getYear().toString().substr(-2) } }); </script>