Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin' into gh-pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@derekhu
derekhu committed Jan 12, 2015
2 parents ff09c05 + fa71e75 commit 973ab56
Show file tree
Hide file tree
Showing 4 changed files with 599 additions and 0 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
weeks
=====
220 changes: 220 additions & 0 deletions sample/gadget-year-xml-canvas.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,220 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<body>
<form style="margin:8px 0; display:block" onsubmit="return display(0);">
<button onmousedown="display(-1)">&nbsp;&laquo;&nbsp;</button>&nbsp;
<input id="yearInput" size="4" value="" style="width: 4em" maxlength="4">&nbsp;
<button onmousedown="display(1)">&nbsp;&raquo;&nbsp;</button>&nbsp;
<input type=submit value="__MSG_Labs_Go_To_Year__" onmousedown="display(0)">&nbsp;
<button onmousedown="displayCurrentYear()">__MSG_Labs_This_Year_Button__ </button>
</form>
<div id=calDiv></div>
<script>
/** The full names of the months to use as titles */
var MONTH_NAMES = ["__MSG_January__", "__MSG_February__", "__MSG_March__", "__MSG_April__", "__MSG_May__", "__MSG_June__", "__MSG_July__", "__MSG_August__", "__MSG_September__", "__MSG_October__", "__MSG_November__", "__MSG_December__"];

/** The VERY short names of the months to use as headings */
var DOW = ["__MSG_Short_Sunday__", "__MSG_Short_Monday__", "__MSG_Short_Tuesday__", "__MSG_Short_Wednesday__", "__MSG_Short_Thursday__", "__MSG_Short_Friday__", "__MSG_Short_Saturday__"];

/** The lengths of the months */
var DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var SHOW_MONTH = "__MSG_Labs_Gadget_Month_View_Tooltip__";

/**
* Given a date, check if it is a leap year.
* @param {Date} date The date in question.
* @return {boolean} Whether it is a leap year.
*/
function isLeapYear(date) {
var y = date.getFullYear();
if ((y % 4) == 0 && (y % 100) != 0) {
return true;
}
return (y % 400) == 0;
}

/**
* Get the number of days in a month.
* @param {Date} date The date in question.
* @return {number} The number of days in that month.
*/
function getDaysInMonth(date) {
var days = DAYS_IN_MONTH[date.getMonth()];
return (days == 28 && isLeapYear(date)) ? 29 : days;
}

/**
* Get the text input for the year.
* @return {HTMLElement} The element.
*/
function getYearInput() {
return document.getElementById('yearInput');
}

/**
* Display the current year.
* @param {string} opt_override An override year.
*/
function displayCurrentYear(opt_override) {
var year = opt_override || (new Date()).getFullYear();
getYearInput().value = year;
showYear(year);
}

/**
* Display a year offset from the current one.
* @param {number} delta How many years to move.
*/
function display(delta) {
var yearInput = getYearInput();
yearInput.value.replace(/[^0-9]/g, '');
var y = parseInt(yearInput.value, 10) + delta;
if (isNaN(y) || y > 9999 || y < 1) {
yearInput.value = '?';
} else {
yearInput.value = y;
showYear(y);
}
return false;
}

/**
* How many weeks does a given month overlap?
* @param {number} y The year. * @param {number} m The month.
* @return {number} The number of weeks that the month overlap.
*/
function getWeeksInMonth(y, m) {
var firstDate = new Date(y, m, 1);
var firstDayOfMonth = firstDate.getDay();
var daysInMonth = getDaysInMonth(firstDate);
return Math.ceil((firstDayOfMonth + daysInMonth) / 7)
}

/**
* Ask the calendar to go to a specific date
*/
function showDate(y, m, opt_date) {
if (google && google.calendar) {
google.calendar.showDate(y, m, opt_date || 1);
}
}

/**
* Get the HTML for a specific month.
* @param {Array<string>} out The string buffer to append the output.
* @param {number} y The year.
* @param {number} m The month.
* @param {number} opt_weeks The minimum number of weeks to display.
*/
function getMonthHtml(out, y, m, opt_weeks) {
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth();
var todayDate = today.getDate();
out.push('<table class="month" border=0 cellspacing=0>',
'<tr><td colspan=7 title="', SHOW_MONTH, '" class="monthHeader clickable" ',
'onclick="showDate(', y, ',', m + 1, ')">',
MONTH_NAMES[m], ' ', y,
'<tr>');
for (var i = 0; i < DOW.length; ++i) {
out.push('<td class="dow" style="color:black">', DOW[i]);
}
var firstDate = new Date(y, m, 1);
var firstDayOfMonth = firstDate.getDay();
var daysInMonth = getDaysInMonth(firstDate);
var i = 0;
var weeks = 0;
var minWeeks = opt_weeks || Math.ceil(daysInMonth / 7);
for (var d = 1 - firstDayOfMonth; 1; ++d) {
var dow = i++ % 7;
if (minWeeks <= weeks && dow == 0) {
break;
}
if (dow == 0) {
out.push('<tr>');
++weeks;
}
out.push('<td class="');
var c = 'normal';
if (y == todayYear && m == todayMonth && d == todayDate) {
c = 'today';
}
if ((d <= daysInMonth) && ((dow == 0) || (dow == 6))) {
c = 'weekend ';
}
out.push(c);
if (d >= 1 && d <= daysInMonth) {
out.push(' clickable" onclick="showDate(', y, ',', m + 1, ',', d, ')">', d);
} else {
out.push('">&nbsp;');
}
}
out.push('</table>');
}

/**
* This is the main drawing function. It will display a specific year.
* @param {number} year The year to draw.
*/
function showYear(y) {
var out = ['<table>'];
var weeks = 0;
for (var m = 0; m < 12; ++m) {
// Every 4 months, we start a new row.

if (m % 4 == 0) {
out.push('<tr>');
// Calculate the maximum number of weeks for the months in this row.
weeks = Math.max(getWeeksInMonth(y, m), getWeeksInMonth(y, m+1), getWeeksInMonth(y, m+2), getWeeksInMonth(y, m+3));
}
out.push('<td class="outer">');
getMonthHtml(out, y, m, weeks);
}
out.push('</table>');
document.getElementById('calDiv').innerHTML = out.join('');
}

// Setup the style + buttons
var DARK_BLUE = '#112aba';
var LIGHT_BLUE = '#e8eef7';
var WEEKEND = '#eee';
var WHITE = '#fff';
var TODAY = '#557799';
var TODAY_BORDER_DARK = '#246';
var TODAY_BORDER_LIGHT = '#9bd';
var BORDER_GREY = '#a2bbd3';
var DIVIDER = '#c3d9ff';

/**
* @return {string} A string containing the styles.
*/
function getStyles() {
var out = ['<style>'];
out.push( '.month td {text-align: center; padding:2px 4px 1px}',
'.month,td.dow,td.monthHeader {background-color:', LIGHT_BLUE, '}',
'td.normal {background-color:', WHITE, '}',
'td.weekend {background-color:', WEEKEND, '}',
'td.outer {padding-right: 4px; padding-bottom: 4px; }',
'td.dow {border-width: 0 0 1px 0; border-style:solid;', 'border-color: ', DIVIDER, '}',
'td.today {padding: 1px 3px !important; background-color:', TODAY, ';color:#fff !important; border-width: 1px; border-style:solid;', 'border-color: ', TODAY_BORDER_DARK, ' ', TODAY_BORDER_LIGHT, ' ', TODAY_BORDER_LIGHT, ' ', TODAY_BORDER_DARK, '}',
'td.monthHeader {font-weight:bold}', '.month {background-color:', LIGHT_BLUE, ';border: 1px solid ', BORDER_GREY, '}',
'body, td {font-family:Arial;font-size: 12.8px}',
'body {margin-left:10px; background-color:', WHITE, '}',
'td {vertical-align: top}',
'.clickable {cursor:pointer; color:', DARK_BLUE, '}',
'.clickable:hover {text-decoration: underline}');
out.push('</style>');
return out.join('');
}

document.write(getStyles());
var tentativeYear = gadgets.views.getParams()['year'];
displayCurrentYear(tentativeYear);

// This is here to make it look nicer for gmail
gadgets.window.adjustHeight(600);
</script>
</body>

</html>
Loading

0 comments on commit 973ab56

Please sign in to comment.