Show your event list on any website
View the Project on GitHub sugi/jquery-gcal-flow
- 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.
In the simplest way, you need to specify just calendar ID. - The sample on this page is showen by following code:
+ The sample on this page is shown by following code:<div id="#gcf-simple"></div>
<script type="text/javascript">
$(function() { $('#gcf-simple').gCalFlow({
@@ -69,12 +69,12 @@ Put your calendar event listing on any website
Customization
- 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!
CSS classes
- This plugin in uses following classes in default template. You can write CSS to override with your design.
+ 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
@@ -90,13 +90,14 @@ CSS classes
| | + .gcf-item-title
| + .gcf-item-body-block
| + .gcf-item-description
+ | + .gcf-item-location
+ .gcf-last-update-block
+ .gcf-last-update
Options
-Following options are avaiable for jQuery#gCalFlow call.
+Following options are available for jQuery#gCalFlow call.
@@ -115,19 +116,19 @@ Options
mode
string
'upcoming'
-'upcoming' for upcoming evnets, or 'updates' for events ordered by last modified.
+'upcoming' for upcoming events, or 'updates' for events ordered by last modified.
feed_url
string
(none)
-Any Atom feed URL compat with google's. If this options is specified, 'calid' and 'mode' are ignored.
+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 number.
+Limit for max number of events. You can set any number, but Google may ignore large numbers.
date_formatter
@@ -157,7 +158,7 @@ Options
link_title
boolean
true
-enable link on calenar title
+enable link on calendar title
link_item_title
@@ -175,29 +176,29 @@ Options
link_target
string
'_blank'
-target attribute of auto-genrated links
+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 usefull to chain other jQuery method or plugin (e.g. callback: function() { this.effect("highlight") })
+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") })
Template
-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.
+
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 defualt template, Keep empty target element (has no child node)!
+Note: To use the default template, keep the target element empty (no child nodes)!
Built-in template
-Here is built-in default. It's a good start point to modifiy design.
+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>
@@ -216,6 +217,8 @@ Built-in template
<div class="gcf-item-body-block">
<div class="gcf-item-description">
</div>
+ <div class="gcf-item-location">
+ </div>
</div>
</div>
</div>
@@ -226,7 +229,7 @@ Built-in template
Variable classes
-Texts of elements with follwoing classname will be replaced:
+The content of elements with following class name will be replaced:
@@ -247,7 +250,7 @@ Variable classes
gcf-link
(text is not replaced)
-This class will be set "href" attribute to calendar URL. (not used in default)
+This class will be set "href" attribute to calendar URL (not used in default).
gcf-item-container-block
@@ -262,37 +265,42 @@ Variable classes
gcf-item-daterange
Item date range
-Must be a decendant of gcf-item-block. Formatted by 'daterange_formatter' option.
+Must be a descendant of gcf-item-block. Formatted by 'daterange_formatter' option.
gcf-item-title
Item title
-Must be a decendant of gcf-item-block.
+Must be a descendant of gcf-item-block.
gcf-item-description
Item description text
-Must be a decendant of gcf-item-block.
+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 decendant of gcf-item-block. This class will be set "href" attribute to item URL. (not used in default)
+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 decendant of gcf-item-block. (not used in default)
+Must be a descendant of gcf-item-block (not used in default).
gcf-item-end-date
Item end date
-Must be a decendant of gcf-item-block. (not used in default)
+Must be a descendant of gcf-item-block (not used in default).
gcf-item-update-date
Item update date
-Must be a decendant of gcf-item-block. (not used in default)
+Must be a descendant of gcf-item-block (not used in default).
diff --git a/javascripts/jquery.gcal_flow.js b/javascripts/jquery.gcal_flow.js
index 228ed24..c467d28 100644
--- a/javascripts/jquery.gcal_flow.js
+++ b/javascripts/jquery.gcal_flow.js
@@ -1,12 +1,12 @@
-// Generated by CoffeeScript 1.3.1
+// Generated by CoffeeScript 1.6.1
(function() {
- var $, gCalFlow, log, methods, pad_zero;
+ var $, gCalFlow, log, methods, pad_zero, _ref;
$ = jQuery;
if ((typeof window !== "undefined" && window !== null) && (window._gCalFlow_debug != null) && (typeof console !== "undefined" && console !== null)) {
log = console;
- if (log.debug == null) {
+ if ((_ref = log.debug) == null) {
log.debug = log.log;
}
} else {
@@ -15,7 +15,7 @@
}
pad_zero = function(num, size) {
- var i, ret, _i, _ref;
+ var i, ret, _i, _ref1;
if (size == null) {
size = 2;
}
@@ -23,7 +23,7 @@
return num;
}
ret = "";
- for (i = _i = 1, _ref = size - ("" + num).length; 1 <= _ref ? _i <= _ref : _i >= _ref; i = 1 <= _ref ? ++_i : --_i) {
+ for (i = _i = 1, _ref1 = size - ("" + num).length; 1 <= _ref1 ? _i <= _ref1 : _i >= _ref1; i = 1 <= _ref1 ? ++_i : --_i) {
ret = ret.concat("0");
}
return ret.concat(num);
@@ -31,11 +31,9 @@
gCalFlow = (function() {
- gCalFlow.name = 'gCalFlow';
-
gCalFlow.prototype.target = null;
- gCalFlow.prototype.template = $("\n \n \n \n \n \n \n \n \n \n []\n \n \n \n \n \n \n \n \n \n \n \n \n LastUpdate: \n \n");
+ gCalFlow.prototype.template = $("\n \n \n \n \n \n \n \n \n \n []\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n LastUpdate: \n \n");
gCalFlow.prototype.opts = {
maxitem: 15,
@@ -48,7 +46,9 @@
link_item_title: true,
link_item_description: false,
link_target: '_blank',
+ item_description_in_html: false,
callback: null,
+ no_items_html: '',
date_formatter: function(d, allday_p) {
if (allday_p) {
return "" + (d.getFullYear()) + "-" + (pad_zero(d.getMonth() + 1)) + "-" + (pad_zero(d.getDate()));
@@ -58,6 +58,7 @@
},
daterange_formatter: function(sd, ed, allday_p) {
if (allday_p) {
+ ed = new Date(ed.getTime() - 86400 * 1000);
if (sd.getDate() !== ed.getDate() || sd.getMonth() !== ed.getMonth()) {
return "" + (this.date_formatter(sd, allday_p)) + " - " + (pad_zero(ed.getMonth() + 1)) + "-" + (pad_zero(ed.getDate()));
} else {
@@ -123,39 +124,45 @@
};
gCalFlow.prototype.parse_date = function(dstr) {
- var day, hour, m, min, mon, offset, ret, sec, year;
- if (m = dstr.match(/^(\d{4})-(\d{2})-(\d{2})$/)) {
- return new Date(parseInt(m[1], 10), parseInt(m[2], 10) - 1, parseInt(m[3], 10), 0, 0, 0);
- }
- offset = (new Date()).getTimezoneOffset() * 60 * 1000;
- year = mon = day = null;
- hour = min = sec = 0;
- if (m = dstr.match(/^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2}):(\d{2}(?:\.\d+)?)(Z|([+-])(\d{2}):(\d{2}))$/)) {
- year = parseInt(m[1], 10);
- mon = parseInt(m[2], 10);
- day = parseInt(m[3], 10);
- hour = parseInt(m[4], 10);
- min = parseInt(m[5], 10);
- sec = parseInt(m[6], 10);
- if (m[7] !== "Z") {
- offset += (m[8] === "+" ? 1 : -1) * (parseInt(m[9], 10) * 60 + parseInt(m[10], 10)) * 1000 * 60;
- }
+ var date, day, hour, m, min, mon, offset, ret, sec, year;
+ date = new Date(dstr);
+ if (!isNaN(date.getTime())) {
+ log.debug(date);
+ return date;
} else {
- log.warn("Time prase error! Unknown time pattern: " + dstr);
- return new Date(1970, 1, 1, 0, 0, 0);
+ if (m = dstr.match(/^(\d{4})-(\d{2})-(\d{2})$/)) {
+ return new Date(parseInt(m[1], 10), parseInt(m[2], 10) - 1, parseInt(m[3], 10), 0, 0, 0);
+ }
+ offset = (new Date()).getTimezoneOffset() * 60 * 1000;
+ year = mon = day = null;
+ hour = min = sec = 0;
+ if (m = dstr.match(/^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2}):(\d{2}(?:\.\d+)?)(Z|([+-])(\d{2}):(\d{2}))$/)) {
+ year = parseInt(m[1], 10);
+ mon = parseInt(m[2], 10);
+ day = parseInt(m[3], 10);
+ hour = parseInt(m[4], 10);
+ min = parseInt(m[5], 10);
+ sec = parseInt(m[6], 10);
+ if (m[7] !== "Z") {
+ offset += (m[8] === "+" ? 1 : -1) * (parseInt(m[9], 10) * 60 + parseInt(m[10], 10)) * 1000 * 60;
+ }
+ } else {
+ log.warn("Time parse error! Unknown time pattern: " + dstr);
+ return new Date(1970, 1, 1, 0, 0, 0);
+ }
+ log.debug("time parse (gap to local): " + offset);
+ ret = new Date(new Date(year, mon - 1, day, hour, min, sec).getTime() - offset);
+ log.debug("time parse: " + dstr + " -> ", ret);
+ return ret;
}
- log.debug("time parse (gap to local): " + offset);
- ret = new Date(Date.UTC(year, mon - 1, day, hour, min, sec) - offset);
- log.debug("time parse: " + dstr + " -> ", ret);
- return ret;
};
gCalFlow.prototype.render_data = function(data) {
- var ci, ed, ent, et, etf, feed, ic, it, items, link, sd, st, stf, t, titlelink, _i, _len, _ref, _ref1;
+ var ci, desc_body_method, ed, ent, et, etf, feed, ic, it, items, link, sd, st, stf, t, titlelink, _i, _len, _ref1, _ref2;
log.debug("start rendering for data:", data);
feed = data.feed;
t = this.template.clone();
- titlelink = (_ref = this.opts.titlelink) != null ? _ref : "http://www.google.com/calendar/embed?src=" + this.opts.calid;
+ titlelink = (_ref1 = this.opts.titlelink) != null ? _ref1 : "http://www.google.com/calendar/embed?src=" + this.opts.calid;
if (this.opts.link_title) {
t.find('.gcf-title').html($("").attr({
target: this.opts.link_target,
@@ -175,43 +182,53 @@
log.debug("item block template:", it);
items = $();
log.debug("render entries:", feed.entry);
- _ref1 = feed.entry.slice(0, this.opts.maxitem + 1 || 9e9);
- for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
- ent = _ref1[_i];
- log.debug("formatting entry:", ent);
- ci = it.clone();
- if (ent.gd$when) {
- st = ent.gd$when[0].startTime;
- sd = this.parse_date(st);
- stf = this.opts.date_formatter(sd, st.indexOf(':') < 0);
- ci.find('.gcf-item-date').html(stf);
- ci.find('.gcf-item-start-date').html(stf);
- et = ent.gd$when[0].endTime;
- ed = this.parse_date(et);
- etf = this.opts.date_formatter(ed, et.indexOf(':') < 0);
- ci.find('.gcf-item-end-date').html(etf);
- ci.find('.gcf-item-daterange').html(this.opts.daterange_formatter(sd, ed, st.indexOf(':') < 0));
- }
- ci.find('.gcf-item-update-date').html(this.opts.date_formatter(this.parse_date(ent.updated.$t), false));
- link = $('').attr({
- target: this.opts.link_target,
- href: ent.link[0].href
- });
- if (this.opts.link_item_title) {
- ci.find('.gcf-item-title').html(link.clone().text(ent.title.$t));
- } else {
- ci.find('.gcf-item-title').text(ent.title.$t);
- }
- if (this.opts.link_item_description) {
- ci.find('.gcf-item-description').html(link.clone().text(ent.content.$t));
- } else {
- ci.find('.gcf-item-description').text(ent.content.$t);
+ if (this.opts.item_description_as_html) {
+ desc_body_method = 'html';
+ } else {
+ desc_body_method = 'text';
+ }
+ if ((feed.entry != null) && feed.entry.length > 0) {
+ _ref2 = feed.entry.slice(0, +this.opts.maxitem + 1 || 9e9);
+ for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
+ ent = _ref2[_i];
+ log.debug("formatting entry:", ent);
+ ci = it.clone();
+ if (ent.gd$when) {
+ st = ent.gd$when[0].startTime;
+ sd = this.parse_date(st);
+ stf = this.opts.date_formatter(sd, st.indexOf(':') < 0);
+ ci.find('.gcf-item-date').html(stf);
+ ci.find('.gcf-item-start-date').html(stf);
+ et = ent.gd$when[0].endTime;
+ ed = this.parse_date(et);
+ etf = this.opts.date_formatter(ed, et.indexOf(':') < 0);
+ ci.find('.gcf-item-end-date').html(etf);
+ ci.find('.gcf-item-daterange').html(this.opts.daterange_formatter(sd, ed, st.indexOf(':') < 0));
+ }
+ ci.find('.gcf-item-update-date').html(this.opts.date_formatter(this.parse_date(ent.updated.$t), false));
+ link = $('').attr({
+ target: this.opts.link_target,
+ href: ent.link[0].href
+ });
+ if (this.opts.link_item_title) {
+ ci.find('.gcf-item-title').html(link.clone().text(ent.title.$t));
+ } else {
+ ci.find('.gcf-item-title').text(ent.title.$t);
+ }
+ if (this.opts.link_item_description) {
+ ci.find('.gcf-item-description').html(link.clone()[desc_body_method](ent.content.$t));
+ } else {
+ ci.find('.gcf-item-description')[desc_body_method](ent.content.$t);
+ }
+ ci.find('.gcf-item-location').text(ent.gd$where[0].valueString);
+ ci.find('.gcf-item-link').attr({
+ href: ent.link[0].href
+ });
+ log.debug("formatted item entry:", ci[0]);
+ items.push(ci[0]);
}
- ci.find('.gcf-item-link').attr({
- href: ent.link[0].href
- });
- log.debug("formatted item entry:", ci[0]);
- items.push(ci[0]);
+ } else {
+ items = $('').html(this.opts.no_items_html);
}
log.debug("formatted item entry array:", items);
ic = t.find('.gcf-item-container-block');
@@ -301,9 +318,9 @@
return methods[method].apply($(this), Array.prototype.slice.call(orig_args, 1));
});
} else if (method === 'version') {
- return "1.2.0";
+ return "1.2.2";
} else {
- return $.error("Method " + method + " dose not exist on jQuery.gCalFlow");
+ return $.error("Method " + method + " does not exist on jQuery.gCalFlow");
}
};