Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add .gcf-item-location to gh-pages documentation. #10

Merged
merged 3 commits into from
May 24, 2013
Merged

Add .gcf-item-location to gh-pages documentation. #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
89abe7e
Add .gcf-item-location to documentation.
torque May 24, 2013
d22cb87
Update jquery.gcal_flow.js used in documentation.
torque May 24, 2013
7f00f8e
Fix some typos and edit a few sentences.
torque May 24, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 36 additions & 28 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>gCalFlow: jQuery Google Calendar Event List Plugin</title>
<title>gCalFlow: jQuery Google Calendar Event List Plug-in</title>
<meta name="keywords" content="jQuery,google calendar,jQuery plugin">
<meta name="description" content="A widget to show list of events of your google calendar with jQuery.">
<link rel="stylesheet" href="stylesheets/styles.css">
Expand Down Expand Up @@ -35,7 +35,7 @@
<body>
<div class="wrapper">
<header>
<h1>gCalFlow: jQuery Google Calendar Event List Plugin</h1>
<h1>gCalFlow: jQuery Google Calendar Event List Plug-in</h1>
<p>Show your event list on any website</p>
<p class="view"><a href="https://github.com/sugi/jquery-gcal-flow">View the Project on GitHub <small>sugi/jquery-gcal-flow</small></a></p>
<ul>
Expand All @@ -50,14 +50,14 @@ <h1>gCalFlow: jQuery Google Calendar Event List Plugin</h1>
<h3 id="head">Put your calendar event listing on any website</h3>

<p>
jQuery Google Calendar Flow plugin provides a widget
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 desgin template.
and fully customizable HTML design template.
</p>

<p>In the simplest way, you need to specify just calendar ID.
The sample on this page is showen by following code:</p>
The sample on this page is shown by following code:</p>
<pre><code>&lt;div id="#gcf-simple"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
$(function() { $('#gcf-simple').gCalFlow({
Expand All @@ -69,12 +69,12 @@ <h3 id="head">Put your calendar event listing on any website</h3>
<h3 id="custom">Customization</h3>

<p>
jQuery Google Calendar Flow plugin is hightly configureable with CSS, Javascript option and HTML templating!
jQuery Google Calendar Flow plug-in is highly configurable with CSS, Javascript option and HTML templating!
</p>

<h4 id="css">CSS classes</h4>

<p>This plugin in uses following classes in default template. You can write CSS to override with your design.</p>
<p>This plug-in in uses following classes in default template. You can write CSS to override with your design.</p>
<p>If you need more complex change, use template.<p>
</p>
<pre><code>.gCalFlow
Expand All @@ -90,13 +90,14 @@ <h4 id="css">CSS classes</h4>
| | + .gcf-item-title
| + .gcf-item-body-block
| + .gcf-item-description
| + .gcf-item-location
+ .gcf-last-update-block
+ .gcf-last-update
</code></pre>

<h4 id="options">Options</h4>

<p>Following options are avaiable for jQuery#gCalFlow call.</p>
<p>Following options are available for jQuery#gCalFlow call.</p>

<table border="1">
<tr>
Expand All @@ -115,19 +116,19 @@ <h4 id="options">Options</h4>
<td>mode</td>
<td>string</td>
<td>'upcoming'</td>
<td>'upcoming' for upcoming evnets, or 'updates' for events ordered by last modified.</td>
<td>'upcoming' for upcoming events, or 'updates' for events ordered by last modified.</td>
</tr>
<tr>
<td>feed_url</td>
<td>string</td>
<td>(none)</td>
<td>Any Atom feed URL compat with google's. If this options is specified, 'calid' and 'mode' are ignored.</td>
<td>Any Atom feed URL compatible with google's. If this option is specified, 'calid' and 'mode' are ignored.</td>
</tr>
<tr>
<td>maxitem</td>
<td>int</td>
<td>15</td>
<td>Limit for max number of events. You can set any number, but Google may ignore large number.</td>
<td>Limit for max number of events. You can set any number, but Google may ignore large numbers.</td>
</tr>
<tr>
<td>date_formatter</td>
Expand Down Expand Up @@ -157,7 +158,7 @@ <h4 id="options">Options</h4>
<td>link_title</td>
<td>boolean</td>
<td>true</td>
<td>enable link on calenar title</td>
<td>enable link on calendar title</td>
</tr>
<tr>
<td>link_item_title</td>
Expand All @@ -175,29 +176,29 @@ <h4 id="options">Options</h4>
<td>link_target</td>
<td>string</td>
<td>'_blank'</td>
<td>target attribute of auto-genrated links</td>
<td>target attribute of auto-generated links</td>
</tr>
<tr>
<td>callback</td>
<td>function</td>
<td>null</td>
<td>callback function when finish rendering. In this function, a jQuery object contains target node is assigned to 'this'. This is usefull to chain other jQuery method or plugin (e.g. callback: function() { this.effect("highlight") })</td>
<td>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") })</td>
</tr>
</table>


<h4 id="template">Template</h4>

<p>If target element has any child node, it will be treat as custom template.
Google Calendar Flow plugin will replace text of elements by its classname.
You can use any design by appling your template.
<p>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.

</p>
<p>Note: <em>To use defualt template, Keep empty target element (has no child node)!</em></p>
<p>Note: <em>To use the default template, keep the target element empty (no child nodes)!</em></p>

<h5 id="bultin">Built-in template</h5>

<p>Here is built-in default. It's a good start point to modifiy design.</p>
<p>Here is the built-in default. It's a good starting point for creating a modified template.</p>
<pre><code>&lt;div class="gcf-header-block"&gt;
&lt;div class="gcf-title-block"&gt;
&lt;span class="gcf-title"&gt;&lt;/span&gt;
Expand All @@ -216,6 +217,8 @@ <h5 id="bultin">Built-in template</h5>
&lt;div class="gcf-item-body-block"&gt;
&lt;div class="gcf-item-description"&gt;
&lt;/div&gt;
&lt;div class="gcf-item-location"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
Expand All @@ -226,7 +229,7 @@ <h5 id="bultin">Built-in template</h5>

<h5 id="vars">Variable classes</h5>

<p>Texts of elements with follwoing classname will be replaced:</P>
<p>The content of elements with following class name will be replaced:</P>

<table border="1">
<tr>
Expand All @@ -247,7 +250,7 @@ <h5 id="vars">Variable classes</h5>
<tr>
<td>gcf-link</td>
<td>(text is not replaced)</td>
<td>This class will be set "href" attribute to calendar URL. (not used in default)</td>
<td>This class will be set "href" attribute to calendar URL (not used in default).</td>
</tr>
<tr>
<td>gcf-item-container-block</td>
Expand All @@ -262,37 +265,42 @@ <h5 id="vars">Variable classes</h5>
<tr>
<td>gcf-item-daterange</td>
<td>Item date range</td>
<td>Must be a decendant of gcf-item-block. Formatted by 'daterange_formatter' option.</td>
<td>Must be a descendant of gcf-item-block. Formatted by 'daterange_formatter' option.</td>
</tr>
<tr>
<td>gcf-item-title</td>
<td>Item title</td>
<td>Must be a decendant of gcf-item-block.</td>
<td>Must be a descendant of gcf-item-block.</td>
</tr>
<tr>
<td>gcf-item-description</td>
<td>Item description text</td>
<td>Must be a decendant of gcf-item-block.</td>
<td>Must be a descendant of gcf-item-block.</td>
</tr>
<tr>
<td>gcf-item-location</td>
<td>Item location text</td>
<td>Must be a descendant of gcf-item-block.</td>
</tr>
<tr>
<td>gcf-item-link</td>
<td>(text is not replaced)</td>
<td>Must be a decendant of gcf-item-block. This class will be set "href" attribute to item URL. (not used in default)</td>
<td>Must be a descendant of gcf-item-block. This class will be set "href" attribute to item URL (not used in default).</td>
</tr>
<tr>
<td>gcf-item-date, gcf-item-start-date</td>
<td>Item start date</td>
<td>Must be a decendant of gcf-item-block. (not used in default)</td>
<td>Must be a descendant of gcf-item-block (not used in default).</td>
</tr>
<tr>
<td>gcf-item-end-date</td>
<td>Item end date</td>
<td>Must be a decendant of gcf-item-block. (not used in default)</td>
<td>Must be a descendant of gcf-item-block (not used in default).</td>
</tr>
<tr>
<td>gcf-item-update-date</td>
<td>Item update date</td>
<td>Must be a decendant of gcf-item-block. (not used in default)</td>
<td>Must be a descendant of gcf-item-block (not used in default).</td>
</tr>
</table>

Expand Down
Loading