The JavaScript Source: Time & Date : fcp.Calendar

General

A tiny, self-contained JavaScript library which displays a Gregorian calendar. An event is triggered when a user clicks on a date. Fully customizable via CSS. (Uses a European layout, i.e., the week begins on Monday.)

Notes

Created by: Felix Plesoianu
Web Site: http://shadow-v.home.ro/index.html
Posted: December 15, 2006

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: fcp_calendar.js

// fcp.Calendar - simple Calendar control for Javascript
// Copyright (C) 2006 Felix Plesoianu
// This file is distributed under the MIT license.
// http://www.opensource.org/licenses/mit-license.php

if (!fcp)
	var fcp = new Object();
if (!fcp.msg)
	fcp.msg = new Object();

fcp.week_days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
fcp.months = ["January", "February", "March", "April", "May", "June",
	"July", "August", "September", "October", "November", "December"];
fcp.msg.prev_year = "Previous year";
fcp.msg.prev_month = "Previous month";
fcp.msg.next_month = "Next month";
fcp.msg.next_year = "Next year";

fcp.Calendar = function(element, show_clock) {
	if (!element.childNodes)
		throw "HTML element expected";
	this.element = element;
	this.selection = new Date();
	this.show_clock = show_clock;
	this.selected_cell = undefined;
	this.generate_month();
	this.render_calendar();
}

fcp.Calendar.prototype.set_date_time = function (date_time) {
	if (date_time.constructor == Date) {
		this.selection = date_time;
		this.generate_month();
		this.render_calendar();
	} else {
		throw "Date object expected (in fcp.Calendar.set_date_time)";
	}
}

fcp.Calendar.prototype.next_month = function () {
	var month = this.selection.getMonth();
	if (month == 11) {
		this.selection.setMonth(0);
		this.selection.setYear(this.selection.getFullYear() + 1);
	} else {
		this.selection.setMonth(month + 1);
	}
	this.generate_month();
	this.render_calendar();
}

fcp.Calendar.prototype.prev_month = function () {
	var month = this.selection.getMonth();
	if (month == 0) {
		this.selection.setMonth(11);
		this.selection.setYear(this.selection.getFullYear() - 1);
	} else {
		this.selection.setMonth(month - 1);
	}
	this.generate_month();
	this.render_calendar();
}

fcp.Calendar.prototype.next_year = function () {
	var is_feb29 = (this.selection.getMonth() == 1)
		&& (this.selection.getDate() == 29);
	if (is_feb29) {
		this.selection.setDate(1);
		this.selection.setMonth(2); // March
	}
	this.selection.setFullYear(this.selection.getFullYear() + 1);
	this.generate_month();
	this.render_calendar();
}

fcp.Calendar.prototype.prev_year = function () {
	var is_feb29 = (this.selection.getMonth() == 1)
		&& (this.selection.getDate() == 29);
	if (is_feb29) {
		this.selection.setDate(1);
		this.selection.setMonth(2); // March
	}
	this.selection.setFullYear(this.selection.getFullYear() - 1);
	this.generate_month();
	this.render_calendar();
}

fcp.Calendar.prototype.generate_month = function () {
	this.raw_data = new Array();
	var week = 0;
	this.raw_data[week] = new Array(7);

	var first_of_month = fcp.Calendar.clone_date(this.selection);
	first_of_month.setDate(1);
	var first_weekday = first_of_month.getDay();
	// Move Sunday last
	first_weekday = (first_weekday == 0) ? 6 : first_weekday - 1;
	// Fill in the last days from the previous month.
	for (var i = 0; i < first_weekday; i++) {
		this.raw_data[week][i] = 0;
	}

	var last_of_month = fcp.Calendar.days_in_month(
		this.selection.getYear(),
		this.selection.getMonth());
	var weekday = first_weekday;
	for (var i = 1; i <= last_of_month; i++) {
		this.raw_data[week][weekday] = i;
		weekday++;
		if (weekday > 6) {
			weekday = 0;
			week++;
			this.raw_data[week] = new Array(7);
		}
	}

	// Fill in the first days from the next month.
	for (var i = weekday; i < 7; i++) {
		this.raw_data[week][i] = 0;
	}
}

fcp.Calendar.prototype.render_calendar = function () {
	this.element.selected_cell = undefined;
	this.element.innerHTML = "";
	this.element.appendChild(this.render_month());
}

fcp.Calendar.prototype.render_heading = function () {
	var heading = document.createElement("caption");

	var prev_year = document.createElement("a");
	prev_year.href = "#";
	prev_year.calendar = this;
	prev_year.onclick = function() {
		this.calendar.prev_year();
		return false;
	};
	prev_year.innerHTML = "<<";
	prev_year.title = fcp.msg.prev_year;

	var prev_month = document.createElement("a");
	prev_month.href = "#";
	prev_month.calendar = this;
	prev_month.onclick = function() {
		this.calendar.prev_month();
		return false;
	};
	prev_month.innerHTML = "<";
	prev_month.title = fcp.msg.prev_month;

	var month_year = document.createTextNode(
		"\u00a0\u00a0" + fcp.months[this.selection.getMonth()]
		+ " " + this.selection.getFullYear() + "\u00a0\u00a0");

	var next_month = document.createElement("a");
	next_month.href = "#";
	next_month.calendar = this;
	next_month.onclick = function() {
		this.calendar.next_month();
		return false;
	};
	next_month.innerHTML = ">";
	next_month.title = fcp.msg.next_month;

	var next_year = document.createElement("a");
	next_year.href = "#";
	next_year.calendar = this;
	next_year.onclick = function() {
		this.calendar.next_year();
		return false;
	};
	next_year.innerHTML = ">>";
	next_year.title = fcp.msg.next_year;

	heading.appendChild(prev_year);
	heading.appendChild(document.createTextNode("\u00a0\u00a0"));
	heading.appendChild(prev_month);
	heading.appendChild(month_year);
	heading.appendChild(next_month);
	heading.appendChild(document.createTextNode("\u00a0\u00a0"));
	heading.appendChild(next_year);
	return heading;
}

fcp.Calendar.prototype.render_month = function() {
	var html_month = document.createElement("table");
	html_month.className = "calendar";
	html_month.appendChild(this.render_heading());

	var thead = document.createElement("thead");
	var tr = document.createElement("tr");
	for (var i = 0; i < fcp.week_days.length; i++) {
		var th = document.createElement("th");
		th.innerHTML =  fcp.week_days[i];
		tr.appendChild(th);
	}
	thead.appendChild(tr);
	html_month.appendChild(thead);

	var tbody = document.createElement("tbody");
	for (var i = 0; i < this.raw_data.length; i++) {
		tbody.appendChild(this.render_week(this.raw_data[i]));
	}
	html_month.appendChild(tbody);
	return html_month;
}

fcp.Calendar.prototype.render_week = function (day_numbers) {
	var html_week = document.createElement("tr");
	html_week.align = "right";
	for (var i = 0; i < 7; i++) {
		html_week.appendChild(this.render_day(day_numbers[i]));
	}
	return html_week;
}

fcp.Calendar.prototype.render_day = function (day_number) {
	var td = document.createElement("td");
	if (day_number >= 1 && day_number <= 31) {
		var anchor = document.createElement("a");
		anchor.href = "#";
		anchor.innerHTML = day_number;
		anchor.calendar = this;
		anchor.date = day_number;
		anchor.onclick = fcp.Calendar.handle_select;
		td.appendChild(anchor);

		if (day_number == this.selection.getDate()) {
			this.selected_cell = td;
			td.className = "in_month selected";
		} else {
			td.className = "in_month";
		}
	}
	return td;
}

// Do nothing by default.
fcp.Calendar.prototype.onselect = function () {}

fcp.Calendar.clone_date = function (date_obj) {
	if (date_obj.constructor != Date)
		throw "Date object expected (in fcp.Calendar.clone_date)";
	else
		return new Date(
			date_obj.getFullYear(),
			date_obj.getMonth(),
			date_obj.getDate(),
			date_obj.getHours(),
			date_obj.getMinutes(),
			date_obj.getSeconds());
}

fcp.Calendar.days_in_month = function (year, month) {
	if (month < 0 || month > 11)
		throw "Month must be between 0 and 11";
	var day_count = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
	if (month != 1) {
		return day_count[month];
	} else if ((year % 4) != 0) {
		return 28;
	} else if ((year % 400) == 0) {
		return 29;
	} else if ((year % 100) == 0) {
		return 28;
	} else {
		return 29;
	}
}

fcp.Calendar.handle_select = function () {
	if (this.calendar.selected_cell)
		this.calendar.selected_cell.className = "in_month";
	this.calendar.selected_cell = this.parentNode;
	this.parentNode.className = "in_month selected";

	this.calendar.selection.setDate(this.date);
	this.calendar.onselect(this.calendar.selection);
	return false;
}


// Created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
// function() {
  cal = new fcp.Calendar(document.getElementById("cal_placeholder"));
  cal.onselect = function(date) {alert(date);}; } )

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

table.calendar, table.calendar caption, table.calendar td.in_month {
 	border: 1px solid black;
  background-color: #ffcf31;
  text-align: center;
}

table.calendar td.in_month {
  width: 30px;
}

table.calendar td.selected {
  background-color: #ffe68f;
}

table.calendar a {
 	display: block;
 	font-weight: bold;
 	text-decoration: none;
 	color: #0000ff;

  text-align: center;
}

table.calendar caption a {
 	display: inline;
  font-size: .8em;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="fcp_calendar.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div id="cal_placeholder"></div>

User Comments

Add a comment, suggestion, or correction

Comments feed

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

9. From: Nemoskipper
11/12/2007 05:25:16

8. From: Lee
01/03/2007 13:49:02

7. From: Jordan Lee Wagner
12/30/2006 23:27:45

6. From: Hellas Haggis
12/30/2006 04:41:24

5. From: Abhishek Kumar
12/20/2006 07:11:21

4. From: louie martinez
12/18/2006 23:29:02

3. From: Rajesh Verma
12/15/2006 17:21:48

2. From: David Canning
12/15/2006 14:31:55

1. From: Jack Fulkerson
12/15/2006 11:03:00

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

9. From: Nemoskipper11/12/2007 05:25:16

8. From: Lee01/03/2007 13:49:02

7. From: Jordan Lee Wagner12/30/2006 23:27:45

6. From: Hellas Haggis12/30/2006 04:41:24

5. From: Abhishek Kumar12/20/2006 07:11:21

4. From: louie martinez12/18/2006 23:29:02

3. From: Rajesh Verma12/15/2006 17:21:48

2. From: David Canning12/15/2006 14:31:55

1. From: Jack Fulkerson12/15/2006 11:03:00

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

9. From: Nemoskipper
11/12/2007 05:25:16

8. From: Lee
01/03/2007 13:49:02

7. From: Jordan Lee Wagner
12/30/2006 23:27:45

6. From: Hellas Haggis
12/30/2006 04:41:24

5. From: Abhishek Kumar
12/20/2006 07:11:21

4. From: louie martinez
12/18/2006 23:29:02

3. From: Rajesh Verma
12/15/2006 17:21:48

2. From: David Canning
12/15/2006 14:31:55

1. From: Jack Fulkerson
12/15/2006 11:03:00