...

View Full Version : editing a dhtml calendar



fisofo
09-05-2007, 03:05 AM
Hello! I am attempting to edit this dhtml calendar to my liking: http://www.dynarch.com/demos/jscalendar/

Basically, I want the time to show up as two combo boxes (a <select> item) rather than the way it is (see example #2 on that page).

Opening up the calendar.js file, I found the relevant code starting on line 846 and ending at 920. Here is the code I am referring to:


(function(){
function makeTimePart(className, init, range_start, range_end) {
var part = Calendar.createElement("span", cell);
part.className = className;
part.innerHTML = init;
part.calendar = cal;
part.ttip = Calendar._TT["TIME_PART"];
part.navtype = 50;
part._range = [];
if (typeof range_start != "number")
part._range = range_start;
else {
for (var i = range_start; i <= range_end; ++i) {
var txt;
if (i < 10 && range_end >= 10) txt = '0' + i;
else txt = '' + i;
part._range[part._range.length] = txt;
}
}
Calendar._add_evs(part);
return part;
};
var hrs = cal.date.getHours();
var mins = cal.date.getMinutes();
var t12 = !cal.time24;
var pm = (hrs > 12);
if (t12 && pm) hrs -= 12;
var H = makeTimePart("hour", hrs, t12 ? 1 : 0, t12 ? 12 : 23);
var span = Calendar.createElement("span", cell);
span.innerHTML = ":";
span.className = "colon";
var M = makeTimePart("minute", mins, 0, 59);
var AP = null;
cell = Calendar.createElement("td", row);
cell.className = "time";
cell.colSpan = 2;
if (t12)
AP = makeTimePart("ampm", pm ? "pm" : "am", ["am", "pm"]);
else
cell.innerHTML = "&nbsp;";

cal.onSetTime = function() {
var pm, hrs = this.date.getHours(),
mins = this.date.getMinutes();
if (t12) {
pm = (hrs >= 12);
if (pm) hrs -= 12;
if (hrs == 0) hrs = 12;
AP.innerHTML = pm ? "pm" : "am";
}
H.innerHTML = (hrs < 10) ? ("0" + hrs) : hrs;
M.innerHTML = (mins < 10) ? ("0" + mins) : mins;
};

cal.onUpdateTime = function() {
var date = this.date;
var h = parseInt(H.innerHTML, 10);
if (t12) {
if (/pm/i.test(AP.innerHTML) && h < 12)
h += 12;
else if (/am/i.test(AP.innerHTML) && h == 12)
h = 0;
}
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
date.setHours(h);
date.setMinutes(parseInt(M.innerHTML, 10));
date.setFullYear(y);
date.setMonth(m);
date.setDate(d);
this.dateClicked = false;
this.callHandler();
};
})();

I tried replacing that, with this:

(function(){
function makeTimePart(className, init) {
var part = Calendar.createElement("select", cell);
part.name = className;
part.id = className;
part.className = className;
part.calendar = cal;
part.navtype = 50;
if (className == "hour") {
var option = Calendar.createElement('option', part);
option.value = 0;
option.text('12 am');
if (init == 0) option.selected = true;

for (i=1; i<=11; i++) {
option = Calendar.createElement('option');
option.value = i;
option.text(i+' am');
part.appendChild(option);
if (init == i) option.selected = true;
}

option = Calendar.createElement('option');
option.value = 12;
option.text('12 pm');
part.appendChild(option);
if (init == 12) option.selected = true;

for (i=1; i<=11; i++) {
option = Calendar.createElement('option');
option.value = i+12;
option.text(i+' pm');
part.appendChild(option);
if (init == i+12) option.selected = true;
}

} else {
var minStep = 5;
var minStr = "";
for (i=0; i<60; i+=minStep) {
if (i < 10) minStr = "0"+i;
else minStr = String(i);
option = Calendar.createElement('option');
option.value = i;
option.text(minStr);
part.appendChild(option);
if ((init < (i+minStep))&&(init >= i)) option.selected = true;
}
}
Calendar._add_evs(part);
return part;
};
var hrs = cal.date.getHours();
var mins = cal.date.getMinutes();
//~ var t12 = !cal.time24;
//~ var pm = (hrs > 12);
//~ if (t12 && pm) hrs -= 12;
var H = makeTimePart("hour", hrs);
//~ var span = Calendar.createElement("span", cell);
//~ span.innerHTML = ":";
//~ span.className = "colon";
var M = makeTimePart("minute", mins);

cal.onSetTime = function() {
var hrs = this.date.getHours(),
mins = this.date.getMinutes();
//~ H.innerHTML = (hrs < 10) ? ("0" + hrs) : hrs;
//~ M.innerHTML = (mins < 10) ? ("0" + mins) : mins;
};

cal.onUpdateTime = function() {
var date = this.date;
//~ var h = parseInt(H.innerHTML, 10);
//~ if (t12) {
//~ if (/pm/i.test(AP.innerHTML) && h < 12)
//~ h += 12;
//~ else if (/am/i.test(AP.innerHTML) && h == 12)
//~ h = 0;
//~ }
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
date.setHours(H.value);
date.setMinutes(M.value);
date.setFullYear(y);
date.setMonth(m);
date.setDate(d);
this.dateClicked = false;
this.callHandler();
};
})();


EDIT: I found a few things wrong, but I am again stumped, I know get "option.text is not a function", and similar messages if I try option.innerHTML, etc...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum