Turnusový kalendář

<script type="text/javascript">

var DAYS_IN_MONTHS 	= [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

var DAYS 			= ['neděle','pondělí', 'úterý', 'středa', 'čtvrtek', 'pátek', 'sobota'];

var MONTHS 			= ['leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen', 'září' , 'říjen', 'listopad', 'prosinec'];

var calBody;

var month = new Date;



function whoWorks() {

	// this.date je ojekt Date, ktery reprezentuje datum bunky, na kterou se kliklo,

	// takze this.date.getCzDayNumber() vrati cislo dne - 0 = pondeli, 6 = nedele,

	// podle toho muzes zjisti, kdo maka :) a nejak to zobrazit

	// (metoda getCzDayNumber je tady ve scriptu definovana, neni to standardni metoda

	// ojektu Date)

	alert(this.date);

}



function cell(text) {

	var cell = document.createElement('td');

	cell.appendChild(document.createTextNode(text));

	return cell;

}



function renderCalendar() {

	var tr, helpDate, startDay, day;

	

	helpDate = month.clone();

	helpDate.setDate(1);

	startDay = helpDate.getCzDayNumber();

	numDays = DAYS_IN_MONTHS[month.getMonth()];

	

	while(calHeader.hasChildNodes()) {

		calHeader.removeChild(calHeader.firstChild);

	}

	calHeader.appendChild(document.createTextNode(MONTHS[month.getMonth()  ] + ', ' + month.getFullYear()));

	while(calBody.hasChildNodes()) {

		calBody.removeChild(calBody.firstChild);

	}

	

	tr = document.createElement('tr');

	// doplneni prazdny dnu na zacatku

	for (var i = 0; i < startDay; i++) {

		tr.appendChild(cell('-'));

	}

	// vlozeni existujicich dnu

	for (var i = 0; i < numDays; i++) {

		helpDate.setDate(i + 1);

		day = cell(i+1);

		day.date = helpDate.clone();

		day.onclick = whoWorks;

		tr.appendChild(day);

		if (helpDate.isSunday()) {

			calBody.appendChild(tr);

			tr = document.createElement('tr');

		}

	}

	calBody.appendChild(tr);		

	// zbyvajici prazdne dny

	endDay = helpDate.getCzDayNumber();

	if (endDay < 6) {

		for (var i = 0; 0 < (6 - endDay - i); i++) {

			tr.appendChild(cell('-'));

		}

	}

}

function changeMonth(goBack) {

	var oldMonth, oldYear, newMonth, newYear;

	oldMonth = newMonth = month.getMonth();

	oldYear = newYear = month.getFullYear();

	if (goBack) {

		if (oldMonth == 0) {

			newYear--;

			newMonth = 11;

		} else {

			newMonth--;

		}

	} else {

		if (oldMonth == 11) {

			newYear++;

			newMonth = 0;

		} else {

			newMonth++;

		}

	}

	//alert(MONTHS[oldMonth] + ', ' + oldYear + '\n' + MONTHS[newMonth] + ', ' + newYear);

	month.setMonth(newMonth);

	month.setFullYear(newYear);

	renderCalendar();

}

Date.prototype.getCzDayNumber = function() {

	var day = this.getDay();

	if (day === 0) {

		return 6;

	} else {

		return day - 1;

	}

}

Date.prototype.clone = function() {

	return new Date(this.getTime());

}

Date.prototype.isSunday = function() {

	return this.getDay() === 0;

}



window.onload = function() {

	calBody 		= document.getElementsByTagName('tbody')[0];

	calHeader 	= document.getElementsByTagName('caption')[0];

	renderCalendar();

}

</script>



<p><button onclick="changeMonth(true);">&lt;</button><button onclick="changeMonth(false);">&gt;</button></p>

<table>

<caption></caption>

<thead>

	<tr>

		<th>po</th>

		<th>út</th>

		<th>st</th>

		<th>čt</th>

		<th>pá</th>

		<th>so</th>

		<th>ne</th>

	</tr>

</thead>

<tbody>

</tbody>

</table>