dyn/calendar documentation

*dhtml calendar     *object oriented     *dynamic language support     *advanced event management     *13KB

Download Source&Examples



EXAMPLE 1: General use

<input onclick="calendar.doo.display(this)" type="text" value="Pick a date">

EXAMPLE 2: Formatting Output

<input onclick="calendar.doo.display(this,'dd M yyyy D')" type="text" value="Pick a date">

EXAMPLE 3: Opening calendar with different elements

<input id="pickDate" type="text" value="Pick a date"><img src="calendar_edit.png" onclick="calendar.doo.display(document.getElementById('pickDate'))" />

Setting dyn/cal

Import cal.js and cal.css files into the page first. 
<script type="text/javascript" src="cal.js">
</script>
<link rel="stylesheet" type="text/css" 
href="cal.css" />

Adding events:

Define "calendar_events" object in any global script block. 
var calendar_events = {
	"09.12.2007": {
		css: { background:"yellow", border:"1px solid red" },
		click: function(){ alert("hello!"); }
	},
	"10.04.2007": {
		css: { background:"yellow", border:"1px solid red" },
		mouseover: function(){ alert("hello!"); }
	}
}
As you see, you can attach events and define different css styles for days.If you want to setting events dynamically, you can change calendar.a.events object.

Language Support

dyn/cal contains a language object, you can use it dynamically.To change language index, update calendar.a.lang variable. 
10. var calendar = {
11.   	a: {  lang:"en", format:"mm/dd/yyyy", events:{}, cursor:[] },
12.   	lang: { "en":[["January","February","March","April","May","June","July","August","September","October","November","December"],["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],["Su","Mo","Tu","We","Th","Fr","Sa"]], "tr":[["Ocak","?ubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"],["Pazar","Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi"],["Pa","Pt","Sa","Ça","Pe","Cu","Cts"]] },
13.   	elm:{},
14.   	init: function(input,format)
You can pick these languages: Or you can add a language to calendar.lang object; 
10. var calendar = {
11.   	a: {  lang:"en", format:"mm/dd/yyyy", events:{}, cursor:[] },
12.   	lang: { "en":[["January","February","March","April","May","June","July","August","September","October","November","December"],["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],["Su","Mo","Tu","We","Th","Fr","Sa"]], "tr":[["Ocak","?ubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"],["Pazar","Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi"],["Pa","Pt","Sa","Ça","Pe","Cu","Cts"]] },
13.   	elm:{},
14.   	init: function(input,format)