Google Calendar Flow plugin Examples

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

Simple way

Change size and color by CSS and option

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: 'ps109x.org_rtvb06sc8nhfnehs9ob51mfado@group.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>