Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    editing a dhtml calendar

    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:
    Code:
    (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:
    Code:
    (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...
    Last edited by fisofo; 09-05-2007 at 02:55 AM. Reason: found mistake


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •