Ajax Training, Learn Ajax Video Tutorials Online, Ajax Examples

var Calendar = {
style: 'default',
path: CowAjax.path + 'components/calendar/',
valueFields: [],
valueFieldName: null,
months: {0: 'January',
1: 'February',
2: 'March',
3: 'April',
4: 'May',
5: 'June',
6: 'July',
7: 'August',
8: 'September',
9: 'October',
10: 'November',
11: 'December'},
init: function() {
//Calendar Container
var calendar = document.createElement('div');
calendar.id = 'calendar';

//Calendar Header
var header = document.createElement('div');
header.className = 'calendarheader';
header.onmousedown = function() {
Drag.start(arguments[0], this.parentNode);
};
var img = document.createElement('img');
img.src = Calendar.path + 'style/' + Calendar.style + '/img/calendar.gif';
header.appendChild(img);
img = document.createElement('img');
img.className = 'close';
img.src = Calendar.path + 'style/' + Calendar.style + '/img/close.gif';
img.onclick = function() {
Calendar.close();
};
header.appendChild(img);
var span = document.createElement('span');
span.appendChild(document.createTextNode('Calendar'));
header.appendChild(span);
calendar.appendChild(header);

//Calendar Navigation

var table, tbody, row, cell, a, div;

table = document.createElement('table');
table.className = 'th';
table.setAttribute('width', '100%');
table.setAttribute('cellpadding', '2');
table.setAttribute('cellspacing', '2');
//tbody = document.createElement('tbody');

row = table.insertRow(table.rows.length);
cell = row.insertCell(row.cells.length);
cell.setAttribute('align', 'left');
a = document.createElement('a');
a.href = '#';
a.onclick = function() {
return Calendar.changeMonth(-1)
};
a.innerHTML = '«';
cell.appendChild(a);
cell = row.insertCell(row.cells.length);
cell.setAttribute('align', 'center');
cell.id = 'calendartitle';
var dateTitle = cell;
cell = row.insertCell(row.cells.length);
cell.setAttribute('align', 'right');
a = document.createElement('a');
a.href = '#';
a.onclick = function() {
return Calendar.changeMonth(1);
}
a.innerHTML = '»';
cell.appendChild(a);

//table.appendChild(tbody);
calendar.appendChild(table);

//Weekday headers

table = document.createElement('table');
table.className = 'wd';
table.setAttribute('cellpadding', '2');
table.setAttribute('cellspacing', '2');
//tbody = document.createElement('tbody');

row = table.insertRow(table.rows.length);

var wdays = {sun: {title: 'Sun', className: 'we'},
mon: {title: 'Mon', className: null},
tue: {title: 'Tue', className: null},
wed: {title: 'Wed', className: null},
thu: {title: 'Thu', className: null},
fri: {title: 'Fri', className: null},
sat: {title: 'Sat', className: 'we'}}

var idx, wday;
for (idx in wdays) {
wday = wdays[idx];
cell = row.insertCell(row.cells.length);
div = document.createElement('div');
div.innerHTML = wday.title;
if (wday.className) {
div.className = wday.className;
}
cell.appendChild(div);
}

//table.appendChild(tbody);
calendar.appendChild(table);

//Month Days
table = document.createElement('table');
table.id = 'cmdays';
table.className = 'mwd';
table.setAttribute('cellpadding', '2');
table.setAttribute('cellspacing', '2');
//tbody = document.createElement('tbody');
//tbody.id = 'cmdays';

Calendar.populateMonthDays(dateTitle, table);

//table.appendChild(tbody);
calendar.appendChild(table);

//Calendar FORM
var form, select, option;

form = document.createElement('form');
form.name = '__cform';
form.id = '__cform';
form.action = '';
form.method = 'post';

select = document.createElement('select');
select.name = 'cmonth';
select.onchange = function() {
Calendar.populateMonthDays();
}

var date = new Date();

for (var i in Calendar.months) {
option = document.createElement('option');
option.setAttribute('value', i);
option.value = i;
option.appendChild(document.createTextNode(Calendar.months[i]));
if (i == date.getMonth()) {
option.setAttribute('selected', 'selected');
option.selected = true;
}
select.appendChild(option);
}

div = document.createElement('div');

div.appendChild(select);

select = document.createElement('select');
select.name = 'cyear';
select.onchange = function() {
Calendar.populateMonthDays();
}
Calendar.populateYears(select, date.getFullYear());
div.appendChild(select);

select = document.createElement('select');
select.name = 'chour';

Calendar.populateHours(select, date.getHours());
div.appendChild(select);

div.appendChild(document.createTextNode(':'));

select = document.createElement('select');
select.name = 'cminute';

Calendar.populateMinutes(select, date.getMinutes());
div.appendChild(select);
form.appendChild(div);
calendar.appendChild(form);
document.body.appendChild(calendar);
return calendar;

},
create: function(target, opts) {
var field = document.createElement('input');
var hidden = document.createElement('input');
for (var key in opts) {
if (key == 'name') {
field[key] = opts[key] + 'millis';
} else {
field[key] = opts[key];
}
hidden[key] = opts[key];
}
hidden.setAttribute('type', 'hidden');
target.appendChild(field);
target.appendChild(hidden);
var img = document.createElement('img');
img.src = this.path + 'style/' + this.style + '/img/calendar.gif';
img.style.cursor = 'pointer';
this.valueFields[field.name] = field;
this.valueFields[hidden.name] = hidden;
img.onclick = function() {
Calendar.show(this, hidden.name);
}
target.appendChild(img);
},
show: function(obj, name) {
this.valueFieldName = name;
var xy = Dhtml.getObjectXY(obj);
var calendar = document.getElementById('calendar');
if (!calendar) {
calendar = this.init();
}
calendar.style.left = xy.x + 'px';
calendar.style.top = xy.y + Dhtml.getObjectWidth(obj) + 'px';
calendar.style.display = 'block';
},
close: function() {
document.getElementById('calendar').style.display = 'none';
},
setValue: function(year, month, day, hour, minute) {
this.valueFields[this.valueFieldName + 'millis'].value = year + '/' + month + '/' + day + ' ' + hour + ':' + minute;
var time = new Date();
time.setFullYear(year);
time.setMonth(month - 1);
time.setDate(day);
time.setHours(hour);
time.setMinutes(minute);
this.valueFields[this.valueFieldName].value = time.getTime();
Calendar.close();
},
populateMonthDays: function(_title, _tbody) {

var today = new Date();
var form = document.forms['__cform'];
var month, year, hour, minute;
if (form) {
month = parseInt(form.cmonth.value);
year = parseInt(form.cyear.value);
hour = parseInt(form.chour.value);
minute = parseInt(form.cminute.value);
} else {
month = today.getMonth();
year = today.getFullYear();
hour = today.getHours();
minute = today.getMinutes();
}
var firstDay = this.getFirstDay(year, month);
var monthLen = this.getMonthLen(year, month);
var counter = 1;
var tbody = _tbody || document.getElementById('cmdays');
var title = _title || document.getElementById('calendartitle');

title.innerHTML = this.months[month] + ' ' + year;

while(tbody.rows.length > 0) {
tbody.deleteRow(0);
}

var row, cell, dateNum, anchor;
var finished = false;

while (!finished) {

row = tbody.insertRow(tbody.rows.length);

if (row) {

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

cell = row.insertCell(row.cells.length);

if (tbody.rows.length == 1 && i < firstDay) {
cell.innerHTML = " ";
continue;
}

if (counter == monthLen) {
finished = true;
}

if (counter <= monthLen) {
anchor = document.createElement('a');
anchor.href = '#';
anchor.appendChild(document.createTextNode(counter));
if (today.getFullYear() == year &&
today.getMonth() == month &&
today.getDate() == counter) {
anchor.className = 'ctoday';
}
anchor.onclick = function() {
Calendar.setValue(year, month+1, this.innerHTML, hour, minute);
return false;
}
cell.appendChild(anchor);
anchor = null;
counter++;
} else {
cell.innerHTML = " ";
}

}

} else {
finished = true;
}

}

},
populateYears: function(select, sel) {
var option = null;
for (var i = 1971; i < 2032; i++) {
option = document.createElement('option');
option.setAttribute('value', i);
option.setAttribute('text', i);
option.appendChild(document.createTextNode(i));
if (sel && i == sel) {
option.setAttribute('selected', 'selected');
option.selected = true;
}
select.appendChild(option);
}
},
populateHours: function(select, sel) {
var option = null;
for (var i = 1; i <= 24; i++) {
option = document.createElement('option');
option.setAttribute('value', i);
option.setAttribute('text', i);
option.appendChild(document.createTextNode(i));
if (sel && i == sel) {
option.setAttribute('selected', 'selected');
option.selected = true;
}
select.appendChild(option);
}
},
populateMinutes: function(select, sel) {
var option = null;
for (var i = 1; i <= 60; i++) {
option = document.createElement('option');
option.setAttribute('value', i);
option.setAttribute('text', i);
option.appendChild(document.createTextNode(i));
if (sel && i == sel) {
option.setAttribute('selected', 'selected');
option.selected = true;
}
select.appendChild(option);
}
},
getFirstDay: function(year, month) {
var date = new Date(year, month, 1);
return date.getDay();
},
getMonthLen: function(year, month) {
var nextMonth = new Date(year, month + 1, 1);
nextMonth.setHours(nextMonth.getHours() - 3);
return nextMonth.getDate();
},
changeMonth: function(index) {
var form = document.forms['__cform'];
var month = parseInt(form.cmonth.value);
var year = parseInt(form.cyear.value);

if (index == -1) {
if (month == 0) {
form.cmonth.selectedIndex = 11;
if (year > 1971 && year < 2032) {
try {
form.cyear.selectedIndex = year + index - 1971;
} catch(e) {}
}
} else {
form.cmonth.selectedIndex = month + index;
}
} else {
if (month == 11) {
form.cmonth.selectedIndex = 0;
if (year > 1971 && year < 2032) {
form.cyear.selectedIndex = year + index - 1971;
}
} else {
form.cmonth.selectedIndex = month + index;
}
}
this.populateMonthDays();
return false;
}

};