Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Modified the code to style todays date cell and entries from differen…

…t calendars differently.
  • Loading branch information...
commit 09174b5e33e08e7970cc57d370f516b3a66e4bf1 1 parent 449ec30
@eamonnl eamonnl authored committed
Showing with 141 additions and 223 deletions.
  1. +89 −63 calvis-core.js
  2. +0 −157 calvis.js
  3. +51 −1 default.css
  4. +1 −2  demo1.html
View
152 calvis-core.js
@@ -16,6 +16,7 @@
/**
* @fileoverview This file contains the core implementation for CalVis.
+ * @author eamonnlinehan@gmail.com (Eamonn Linehan)
* @author api.austin@google.com (Austin Chau)
*/
@@ -48,8 +49,7 @@ calvis.columnHeadingClass = 'columnHeading';
calvis.weekViewCellClass = 'weekViewCell';
calvis.monthViewCellClass = 'monthViewCell';
calvis.contentCellClass = 'contentCell';
-calvis.eventMouseOutClass = 'eventMouseOut';
-calvis.eventMouseOverClass = 'eventMouseOver';
+calvis.eventClass = 'eventItem';
// string labels
calvis.AppStringLabel = 'Generic-Calendar-Container-1.0';
@@ -99,6 +99,11 @@ calvis.Calendar = function() {
// The current view mode of the container
this.currentViewMode = null;
+
+ //Cache todays date
+ this.currentDateCellID = [new Date().getFullYear(),
+ calvis.padZero(new Date().getMonth() + 1),
+ calvis.padZero(new Date().getDate())].join('');
};
/**
@@ -405,7 +410,11 @@ calvis.Calendar.prototype.updateWeekView = function() {
var dateHtml = [];
dateHtml.push('<div class="');
- dateHtml.push(calvis.weekViewCellClass);
+
+ // add a class to todays date cell
+ if (dateCellId == this.currentDateCellID) dateHtml.push(calvis.weekViewCellClass + ' today');
+ else dateHtml.push(calvis.weekViewCellClass);
+
dateHtml.push('" id=');
dateHtml.push(dateCellId);
dateHtml.push('>');
@@ -435,7 +444,7 @@ calvis.Calendar.prototype.updateWeekView = function() {
var feedUriArray = this.getFeedUrls();
calendar = this;
for( var i=0; i<feedUriArray.length; i++ ) {
- calendar.overlayGData( firstDate, lastDate, feedUriArray[i] );
+ calendar.overlayGData( firstDate, lastDate, feedUriArray[i], i );
}
};
@@ -617,7 +626,7 @@ calvis.Calendar.prototype.initMonthGrid = function() {
for (var j=0; j<7 ;j++ )
{
monthViewHtml.push('<td id="date' + index + '">');
- monthViewHtml.push('&nbsp;');
+ // monthViewHtml.push('&nbsp;'); Allow empty rows to collapse
monthViewHtml.push('</td>');
index++;
}
@@ -661,7 +670,11 @@ calvis.Calendar.prototype.updateMonthView = function() {
var dateHtml = [];
dateHtml.push('<div class="');
- dateHtml.push(calvis.monthViewCellClass);
+
+ // add a class to todays date cell
+ if (dateCellId == this.currentDateCellID) dateHtml.push(calvis.monthViewCellClass + ' today');
+ else dateHtml.push(calvis.monthViewCellClass);
+
dateHtml.push('" id=');
dateHtml.push(dateCellId);
dateHtml.push('>');
@@ -689,7 +702,7 @@ calvis.Calendar.prototype.updateMonthView = function() {
var feedUriArray = this.getFeedUrls();
calendar = this;
for( var i=0; i<feedUriArray.length; i++ ) {
- calendar.overlayGData( firstDate, lastDate, feedUriArray[i] );
+ calendar.overlayGData( firstDate, lastDate, feedUriArray[i], i );
}
};
@@ -699,10 +712,11 @@ calvis.Calendar.prototype.updateMonthView = function() {
* JavaScript client library returns the event data. It will
* then display the event title on its corresponding date cell.
* @param {string} id The date cell.
- * @param {google.gdata.calendar.CalendarEventEntry}
- * A Google Data calendar event object.
+ * @param {google.gdata.calendar.CalendarEventEntry} A Google Data calendar event object.
+ * @param {string} label A div ID identifying so that each calendar may have a different style attached to its events
+ *
*/
-calvis.Calendar.prototype.appendEvent = function(id, event) {
+calvis.Calendar.prototype.appendEvent = function(id, event, label) {
var eventTime = /T(\d\d):(\d\d)/.exec( event.gd$when[0].startTime );
var eTime = '';
@@ -740,8 +754,7 @@ calvis.Calendar.prototype.appendEvent = function(id, event) {
if (cell.length == 0) {
return;
}
-
- var cellHeight = jQuery('.' + calvis.contentCellClass).parent().height();
+ var cellHeight = cell.parent().height();
var cellWidth = cell.width();
var contentFontHeight = parseInt(cell.css('font-size'));
@@ -750,8 +763,7 @@ calvis.Calendar.prototype.appendEvent = function(id, event) {
var bottomMargin = 5;
if (cellHeight < currentContentHeight + contentFontHeight + bottomMargin) {
- // The contentCell is overflowing, too many events
- if (cell.get(0).lastChild.innerHTML == calvis.moreLabel) {
+ if (cell.get(0).lastChild != null && cell.get(0).lastChild.innerHTML == calvis.moreLabel) {
// Can return right away, there is already a "more" link
return;
}
@@ -761,7 +773,7 @@ calvis.Calendar.prototype.appendEvent = function(id, event) {
var moreHtml = [];
moreHtml.push('<div align="right" class="');
- moreHtml.push(calvis.eventMouseOutClass);
+ moreHtml.push(calvis.eventClass + ' more');
moreHtml.push('">');
moreHtml.push(calvis.moreLabel);
moreHtml.push('</div>');
@@ -774,51 +786,64 @@ calvis.Calendar.prototype.appendEvent = function(id, event) {
calendar.initWeekView();
});
- moreDiv.bind('mouseover', function() {
- moreDiv.removeClass(calvis.eventMouseOutClass);
- moreDiv.addClass(calvis.eventMouseOverClass);
- });
-
- moreDiv.bind('mouseout', function() {
- moreDiv.removeClass(calvis.eventMouseOverClass);
- moreDiv.addClass(calvis.eventMouseOutClass);
- });
-
cell.append(moreDiv);
} else {
- var eventHtml = [];
- eventHtml.push('<div id="');
- eventHtml.push(eventId);
- eventHtml.push('" class="');
- eventHtml.push(calvis.eventMouseOutClass);
- eventHtml.push('">');
- eventHtml.push(calendar.fitText('&nbsp;' + eTime + title, cellWidth));
- eventHtml.push('</div>');
-
- var eventDiv = jQuery(eventHtml.join(''));
-
- eventDiv.bind(this.eventTrigger, function() {
- if (calendar.eventCallback) {
- calendar.eventCallback(event);
- } else {
- calendar.defaultEventCallback(event);
- }
- });
-
- eventDiv.bind('mouseover', function() {
- eventDiv.removeClass(calvis.eventMouseOutClass);
- eventDiv.addClass(calvis.eventMouseOverClass);
- });
-
- eventDiv.bind('mouseout', function() {
- eventDiv.removeClass(calvis.eventMouseOverClass);
- eventDiv.addClass(calvis.eventMouseOutClass);
- });
-
- cell.append(eventDiv);
+ // if greater than a single day then copy into next cell
+ var times = event.getTimes();
+ for (i = 0; i < times.length; i++) {
+
+ var days = Math.floor(times[i].getEndTime().getDate() - times[i].getStartTime().getDate()) / (1000*60*60*24);
+
+ for (j = 0; j < days; j++) {
+ var date = times[i].getStartTime().getDate();
+ date.setDate(date.getDate() + j);
+
+ var id = [];
+ id.push('content');
+ id.push(date.getFullYear());
+ id.push(calvis.padZero(date.getMonth() + 1));
+ id.push(calvis.padZero(date.getDate()));
+ id = id.join('');
+
+ var cell = jQuery('#' + id);
+
+ var eventHtml = [];
+ eventHtml.push('<div id="');
+ eventHtml.push('cal' + label); // Eamonn 'eventId'
+ eventHtml.push('" class="');
+
+ if (days > 1) {
+ if (j == 0) eventHtml.push(calvis.eventClass + ' first');
+ else if (j == days - 1) eventHtml.push(calvis.eventClass + ' last');
+ else eventHtml.push(calvis.eventClass + ' middle');
+ } else {
+ eventHtml.push(calvis.eventClass);
+ }
+
+ eventHtml.push('">');
+ eventHtml.push(calendar.fitText('&nbsp;' + eTime + title, cellWidth));
+ eventHtml.push('</div>');
+
+ var eventDiv = jQuery(eventHtml.join(''));
+
+ eventDiv.bind(this.eventTrigger, function() {
+ if (calendar.eventCallback) {
+ calendar.eventCallback(event);
+ } else {
+ calendar.defaultEventCallback(event);
+ }
+ });
+
+ cell.append(eventDiv);
+ }
+
+ }
+
+
}
+
};
/**
@@ -848,7 +873,7 @@ calvis.Calendar.prototype.createMoreMenu = function(id) {
});
return moreDiv;
-}
+};
/**
* This creates a dummy span that is used to calculate whether
@@ -860,15 +885,16 @@ calvis.Calendar.prototype.createFittingSpan = function() {
span.css({'visibility': 'hidden'});
jQuery(document.body).append(span);
this.fittingSpan = span;
-}
+};
/**
* This method overlays the event data between two dates and append
* these events on their appropriate date cells.
* @param {Date} startDate The start date that will be used for data query.
* @param {Date} endDate The end date that will be used for data query.
+ * @param {string} label An identifer used to style events per calendar
*/
-calvis.Calendar.prototype.overlayGData = function(startDate, endDate, feedUri) {
+calvis.Calendar.prototype.overlayGData = function(startDate, endDate, feedUri, label) {
var calendar = this;
@@ -917,11 +943,11 @@ calvis.Calendar.prototype.overlayGData = function(startDate, endDate, feedUri) {
id.push(calvis.padZero(date.getDate()));
id = id.join('');
- calendar.appendEvent(id, event);
+ calendar.appendEvent(id, event, label);
}
}
jQuery('#' + calendar.statusControlId).html('');
- }
+ };
jQuery('#' + calendar.statusControlId).html(calvis.loadingLabel);
calendar.calendarService.getEventsFeed(query, callback, calvis.handleError);
@@ -1033,7 +1059,7 @@ calvis.fixIE = function() {
}
}
return index;
- }
+ };
}
// inject "console.log" to emulate Firefox firebug.
@@ -1045,7 +1071,7 @@ calvis.fixIE = function() {
var messageDiv = document.createElement('div');
messageDiv.innerHTML = message;
body.insertBefore(messageDiv, body.lastChild);
- }
+ };
}
-};
+};
View
157 calvis.js
@@ -1,157 +0,0 @@
-/**
- * Copyright 2008 Google Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * @fileoverview This file contains the dynamic loader for CalVis.
- * @author api.austin@google.com (Austin Chau)
- */
-
-// Namespace to protect this library from conflicting with external.
-var calvis = {};
-
-// URL paths of scripts to be loaded -- CHANGE TO REFERENCE YOUR SITE
-calvis.baseUrl = 'http://www.example.com/calvis/';
-calvis.gdataUrl = calvis.baseUrl + 'gdata.js';
-calvis.jqueryUrl = calvis.baseUrl + 'jquery.js';
-calvis.coreUrl = calvis.baseUrl + 'calvis-core.js';
-
-/**
- * This method loads all the dependent scripts for Calvis and invoke
- * the callback method when the loading is done.
- * @param {Function} callback The callback method that will be invoked when
- * loading is completed.
- */
-calvis.ready = function(callback) {
-
- if (calvis.isTokenRedirect()) {
- // this is a authsub session
- calvis.scriptLoad(calvis.gdataUrl, function() {
- if (typeof google.gdata.onLoad == 'undefined') {
- if ((/MSIE/).test(navigator.userAgent)) {
- // manually trigger window load event, in IE, this doesn't work
- } else {
- // manually trigger window load event in non-IE browsers
- var event = document.createEvent('HTMLEvents');
- event.initEvent('load', true, false);
- window.dispatchEvent(event);
- }
-
- } else {
- google.gdata.onLoad();
- }
-
- });
- } else {
- // this is a normal loading
- calvis.fixIE();
- if (typeof window.jQuery == 'undefined') {
- calvis.scriptLoad(calvis.jqueryUrl, function() {
- calvis.scriptLoad(calvis.gdataUrl, function() {
- calvis.scriptLoad(calvis.coreUrl, callback);
- });
- });
- } else {
- calvis.scriptLoad(calvis.gdataUrl, function() {
-
- calvis.scriptLoad(calvis.coreUrl, callback);
- });
- }
- }
-};
-
-/**
- * This method dynamically loads a script from an URL via script tag injection
- * @param {string} url The URL of the script to be loaded
- * @param {Function} callback The callback method that will be invoked when
- * loading is completed.
- */
-calvis.scriptLoad = function(url, callback) {
-
- //console.log('loading ' + url);
- var script = document.createElement('script');
- script.src = url;
-
- var heads = document.getElementsByTagName('head');
-
- if (heads.length > 0) {
- head = heads[0];
- head.appendChild(script);
- } else {
- head = document.createElement('head');
- head.appendChild(script);
- document.body.parentNode.appendChild(head);
- }
-
- // most browsers
- script.onload = callback;
-
- // IE 6 & 7
- script.onreadystatechange = function() {
- if (script.readyState == 'loaded' || script.readyState == 'complete') {
- callback();
- //console.log(url + ' is loaded, state= ' + script.readyState);
- }
- };
-
-};
-
-/**
- * Check to see if this is a authsub token redirect session
- * @return {boolean} True/false to indicate if this is a token redirect session
- */
-calvis.isTokenRedirect = function() {
-
- var status = false;
- var url = window.location.href;
- var matchArr = url.match(/#2/);
-
- if (matchArr != null)
- status = true;
-
- return status;
-};
-
-/**
- * This method fixes IE specific issues
- */
-calvis.fixIE = function() {
- if (!Array.indexOf) {
- Array.prototype.indexOf = function(arg) {
-
- var index = -1;
- for (var i = 0; i < this.length; i++){
- var value = this[i];
- if (value == arg) {
- index = i;
- break;
- }
- }
- return index;
- }
- }
-
- if (!window.console) {
-
- window.console = {};
- window.console.log = function(message) {
- var body = document.getElementsByTagName('body')[0];
- var messageDiv = document.createElement('div');
- messageDiv.innerHTML = message;
- body.insertBefore(messageDiv, body.lastChild);
- }
- }
-
-};
View
52 default.css
@@ -1,3 +1,17 @@
+@CHARSET "UTF-8";
+
+#cal0 { background-color: green; }
+#cal1 { background-color: red; }
+#cal2 { background-color: blue; }
+#cal3 { background-color: purple; }
+#cal4 { background-color: orange; }
+#cal5 { background-color: yellow; }
+
+.today { background-color: #FFF7D7; border-color: #FAD163; }
+
+.more { background-color: #DDDDDD; color: white; }
+.more:hover, .more:active, .more:focus { background-color: #CCCCCC; }
+
/* optional styling */
#loginControlDiv {
font-size: 13px;
@@ -85,4 +99,40 @@
color: blue;
background: white;
font-family: arial;
-}
+}
+
+.contentCell div {
+ color: white;
+ padding: 2px;
+ border-radius: 5px;
+ margin-bottom: 1px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+}
+
+.contentCell .middle {
+ border-radius: 0px;
+ -moz-border-radius: 0px;
+ -webkit-border-radius: 0px;
+}
+
+.contentCell .first {
+ -moz-border-radius-topright: 0px;
+ -webkit-border-top-right-radius: 0px;
+ border-top-right-radius: 0px;
+ -moz-border-radius-bottomright: 0px;
+ -webkit-border-bottom-right-radius: 0px;
+ border-bottom-right-radius: 0px;
+ background: url(right-arrow.gif) no-repeat right center;
+}
+
+.contentCell .last {
+ -moz-border-radius-topleft: 0px;
+ -webkit-border-top-left-radius: 0px;
+ border-top-left-radius: 0px;
+ -moz-border-radius-bottomleft: 0px;
+ -webkit-border-bottom-left-radius: 0px;
+ border-bottom-left-radius: 0px;
+ background: url(left-arrow.gif) no-repeat left center;
+ padding-left: 8px;
+}
View
3  demo1.html
@@ -107,7 +107,6 @@
var eventHtml = [];
eventHtml.push(displayDate);
- eventHtml.push(displayDate);
eventHtml.push('<p>');
eventHtml.push('<b>Event:</b> ');
eventHtml.push(title);
@@ -158,4 +157,4 @@
</table>
</div>
</body>
-</html>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.