Monthly Calendar with Reoccurring Events

Shaun Bailey Mar 7, 2007

General

Features include one time, weekly, monthly, and annual events. Monthly navigation uses links or a dropdown list. Easy to customize using CSS. Can be integrated with a server-side language to retrieve events from a database.

View the calendar

Notes

Created by: Shaun Bailey
Web Site: http://www.sbwebdevelopment.co.uk
Posted: March 7, 2007

Source Code

Paste this source code into the designated areas.

External file

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

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Shaun Bailey | http://www.sbwebdevelopment.co.uk */
// set up variables
var monthsArray = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var daysArray = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var prevYears = 10;	// number of years before current date
var futureYears = 10;	// number of years after current date
var today = new Date();
var nowMonth = today.getMonth();
var nowYear = today.getFullYear();
var curMonth = nowMonth;
var curYear = nowYear;
var monthEvents;
today.setDate(1);	// set to first day of the month

var eventsArray = new Array();
// format: dd,mm,yyyy,"event","frequency (Annual/Monthly/Weekly)" - Delete frequency for once-time occurrences
eventsArray[0] = new newEvent(25,12,2006,"Christmas Day","Annual");
eventsArray[1] = new newEvent(30,7,2006,"My Birthday","Annual");
eventsArray[2] = new newEvent(1,1,2006,"First Day of Month","Monthly");
eventsArray[3] = new newEvent(2,12,2006,"Weekly occurence","Weekly");
eventsArray[4] = new newEvent(24,12,2006,"Christmas Eve","Annual");
eventsArray[5] = new newEvent(15,3,2007,"Physical Check-Up","Annual");
eventsArray[6] = new newEvent(12,3,2007,"Meeting");

// create event object
function newEvent(day, month, year, memo, occurrence) {
	this.day = day;
	this.month = month;
	this.year = year;
	this.memo = memo;
	this.occurrence = occurrence;
	this.createMonth = createMonth;
}

// creates calendar for the current month
function createMonth() {
	var startDay = today.getDay();	// first day of the month
	var monLength = monthLength();	// number of days in month
	var lastDay = startDay+monLength-1;	// last day of the month
	monthEvents = new Array();	// array to hold events for current month

	// search through events for current month
	for(i=0;i<eventsArray.length;i++) {
		if(eventsArray[i].month == (curMonth+1) && (eventsArray[i].year == curYear || eventsArray[i].occurrence == "Annual")) {
			monthEvents[monthEvents.length] = i;
		}
		else if(eventsArray[i].occurrence == "Monthly" || eventsArray[i].occurrence == "Weekly") {
			monthEvents[monthEvents.length] = i;
		}
	}

	var content = "<table class=\"calendar\" cellspacing=\"0\">\n";
	// create headers
	content += "<tr>\n<th><a class=\"button\" href=\"javascript:void(prev())\">Previous</a></th>\n";
	content += "<th colspan=\"5\">" + monthsArray[curMonth] + " " + curYear + "</th>\n";
	content += "<th><a class=\"button\" href=\"javascript:void(next())\">Next</a></th>\n</tr><tr>\n";
	for(i=0;i<7;i++) {
		content += "<th>" + daysArray[i] + "</th>\n";
	}
	content += "</tr>\n<tr>\n";

	// create main content of calendar
	for(i=0;i<42;i++) {
		var occ = "";
		var occContent = "";
		var curDay = i+1-startDay;
		// check day against months events
		for(j=0;j<monthEvents.length;j++) {
				var occDate = new Date();
				occDate.setDate(eventsArray[monthEvents[j]].day);
				occDate.setMonth(eventsArray[monthEvents[j]].month);
				occDate.setFullYear(eventsArray[monthEvents[j]].year);

				if(curDay == eventsArray[monthEvents[j]].day && eventsArray[monthEvents[j]].occurrence != "Weekly") {	// deal with day, monthly and annual events
					occ = " class=\"occassion\"";
					fullContent = eventsArray[monthEvents[j]].memo;
					if(eventsArray[monthEvents[j]].memo.length > 14) {
						occContent = fullContent.substr(0,13) + "...";
						break;
					}
					else {
						occContent = fullContent;
						break;
					}
				}
				else if(occDate.getDate() == (i%7) && eventsArray[monthEvents[j]].occurrence == "Weekly") {	// deal with weekly events
					occ = " class=\"occassion\"";
						fullContent = eventsArray[monthEvents[j]].memo;
					if(eventsArray[monthEvents[j]].memo.length > 14) {
						occContent = fullContent.substr(0,13) + "...";
						break;
					}
					else {
						occContent = fullContent;
						break;
					}
				}
		}
		if(i>lastDay && i==35) {	// do not show last row if not needed
			break;
		}
		if(i<startDay || i>lastDay) {	// show blank cells before and after month
			content += "<td class=\"blank\"> </td>\n";
		}
		else {
			if(!(i%7) || !((i+1)%7) ) {	// get days of the weekend
				if(!(i%7)&& i>0) {
					content += "</tr>\n<tr>\n";
				}
				content += "<td" + occ + "><span class=\"weekend\">"+curDay+"</span><br /><a href=\"javascript:void(alert('"+fullContent+"'));s\">"+occContent+"</a></td>\n";
			}
			else {
				content += "<td" + occ + ">"+curDay+"<br /><a href=\"javascript:void(alert('"+fullContent+"'));\">"+occContent+"</a></td>\n";
			}
		}
	}
	content += "</tr></table>\n";

	return content;
}

// get length of month
function monthLength() {
	monLength = 31;
	if(curMonth == 3 || curMonth == 5 || curMonth == 8 || curMonth == 10) monLength = 30;
	if(curMonth == 1) {
		if(curYear%4) {
			monLength = 28;
		}
		else {
			monLength = 29;
		}
	}
	return monLength;
}

function droplists() {
	content = "<form name=\"calNav\" method=\"post\" action=\"\">\n";
	content += "<select name=\"month\">\n";
	for(i=0;i<12;i++) {
		content += "<option value=\""+i +"\"";
		if(i == curMonth) {
			content += " selected=\"selected\"";
		}
		content += ">" + monthsArray[i] + "</option>\n";
	}
	content += "</select> <select name=\"year\">\n";
	for(i=(nowYear-prevYears);i<=(nowYear+futureYears);i++) {
		content += "<option value=\""+i +"\"";
		if(i == curYear) {
			content += " selected=\"selected\"";
		}
		content += ">" + i + "</option>\n";
	}
	content += "</select>\n<input type=\"button\" value=\"Go\" onclick=\"newMonth()\" />\n";
	content += "</form>\n";
	return content;
}

function newMonth() {
	var mon = document.calNav.month.selectedIndex;
	curMonth = parseInt(document.calNav.month.options[mon].value);
	var yr = document.calNav.year.selectedIndex;
	curYear = parseInt(document.calNav.year.options[yr].value);
	today.setMonth(curMonth);
	today.setFullYear(curYear);
	document.getElementById("showCal").innerHTML = droplists() + createMonth();
}

// goto previous month
function prev() {
	curMonth -= 1;
	if(curMonth<0) {
		curMonth=11;
		if(curYear>(nowYear-prevYears)) {
			curYear -= 1;
		}
	}
	today.setMonth(curMonth);
	today.setFullYear(curYear);
	document.getElementById("showCal").innerHTML = droplists() + createMonth();
}

// goto next month
function next() {
	curMonth += 1;
	if(curMonth>11) {
		curMonth=0;
		if(curYear<(nowYear+futureYears)) {
			curYear += 1;
		}
	}
	today.setMonth(curMonth);
	today.setFullYear(curYear);
	document.getElementById("showCal").innerHTML = droplists() + createMonth();
}

CSS

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

a.button {
	color:#FFFF00;
}

.calendar {
	width: 100%;
	border: 1px solid #ddd;
}

.calendar td a {
	text-decoration: none;
	color: #006699;
}

.calendar td a:hover {
	text-decoration: underline;
	color: #FF0000;
}

.calendar td, .calendar th {
	width: 13%;
	border: 1px solid #ddd;
	padding: 3px 3px 3px 3px;
}

.calendar th {
	background-color: #005999;
	color: #FFFF00;
	font-weight: bold;
}
.calendar td {
	height: 50px;
	font-weight: bold;
	vertical-align: top;
}

.blank {
	background-color: #ddd;
}

.weekend {
	color: #999;
}

.occassion {
	background-color: #ffffbf;
}

Head

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


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

Body

Paste this code into the BODY section of your HTML document


<div id="showCal">
<script type="text/javascript">
document.write(droplists());
document.write(createMonth());
</script>

Leave a Response

(7 comments)

This is great, thank you so much!!

Kandi Humpf May 25, 2008

The div tag really doesn't have anything to do with it. The .js file has to be in the same director as the HTML file.

Angelo Serra Feb 18, 2008

Due to the limitations of these comments, you will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help.

Lee Nov 13, 2007

I need 3 different calendars on 3 different pages. The reason is that the events are filled in from 3 different databases. I would like to say ...[br /][br /]If cust,sales then[br /]{ Block of events code[br /]}[br /]If cust,installer then[br /]{ Block of events code[br /]}[br /]If cust,reader then[br /]{ Block of events code[br /]}[br /]What is the best way to do this?? I also need several events per day.[br /][br /]Thank you for your assistance.

Daniel Jubelt Nov 11, 2007

Unfortunately the calendar does not show up if I don't set either a "Monthly" or "Weekly" recurring event. :(

Paulo Carochas Apr 7, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details