Opened 13 years ago

Closed 12 years ago

Last modified 12 years ago

#2021 closed enhancement (wontfix)

[patch][cla][FEATURE] WeekCalendar or WeekOrganizer

Reported by: vincent.demay@… Owned by: dante
Priority: high Milestone: 1.3
Component: Dojox Version: 0.4
Keywords: Cc: tk, vincent.demay@…
Blocked By: Blocking:

Description

I don't know if MonthlyCalendar? works but I've never tried to make it work. And I don't know what are the main functionalities of this widget. So I wrote a (Google Like) WeekCalendar? WeekOrganizer?, if you want it I give it to you.

It is just a first version (works but could be better) and it could be useful to plan event on a week. Just tell me if you want to keep it or not.

I put it on this tracker because I don't know where I supposed to propose new features. Sorry to put file here but I don't find any attachment.

DayCalendar?.js

dojo.provide("dojo.widget.DayCalendar");

dojo.require("dojo.html.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.collections.ArrayList");
dojo.require("dojo.json");
dojo.require("dojo.lfx.rounded");

dojo.widget.defineWidget (
	"dojo.widget.DayCalendar",
	dojo.widget.HtmlWidget,
	{

	templatePath: dojo.uri.dojoUri("../DayCalendar.htm"),
	
	//first selected div in day
	firstSelected: null,
	
	//last selected div in day
	lastSelected: null,
	
	//div  : current slice time
	current: null,
	
	//div : containing text;
	timeDiv: null,
	
	//is the mouse down?
	mousedown: false,
	
	//list of slice time
	timeRange: null,
	
	//incremented on each new Slice
	slicePartId: 0,
	
	//Selected Slice
	selectedTimeRange: null,
	
	//if a weekCalendar exsit add it here
	weekCalendar : null,
	
	tmpx: null,
	
	postCreate: function(args, fragment, parent){
		this.timeRange =  new dojo.collections.ArrayList();
		var body = document.getElementsByTagName("body")[0];
		var onMouseUp = body.getAttribute("onMouseUp");
		if (onMouseUp == null){ onMouseUp = ""}
		onMouseUp += "dojo.widget.byId('" + this.widgetId + "').fixTimeRange();";
		document.getElementsByTagName("body")[0].setAttribute("onMouseUp",onMouseUp);
		var onKeyPress = body.getAttribute("onkeypress");
		if (onKeyPress == null){ onKeyPress = ""}
		onKeyPress += "dojo.widget.byId('" + this.widgetId + "').keyPressed(event);";
		document.getElementsByTagName("body")[0].setAttribute("onkeypress",onKeyPress);
		
		//add listener to slice
		var inners = this.domNode.getElementsByTagName("div");
		for(var i=0; i<inners.length; i++){
			inners[i].setAttribute("onmouseover","this.innerHTML= this.getAttribute('start') + ' - ' + this.getAttribute('end'); dojo.widget.byId('" + this.widgetId + "').expandTimeRange(this)");
			inners[i].setAttribute("onmouseout","this.innerHTML=''");;
			inners[i].setAttribute("onmousedown","dojo.widget.byId('" + this.widgetId + "').createTimeRange(this)");
			var pos = i + "";
			if (pos.length == 1){ pos = "0" + i} 
			inners[i].setAttribute("pos", pos);
		}
	},
	
	
	createTimeRange: function(div){
		var pos = dojo.html.toCoordinateObject(div,true);
		this.current = document.createElement("div");
		this.timeDiv = document.createElement("div");
		with (this.current.style){
			borderStyle = "solid";
			borderColor = "#0000FF";
			backgroundColor = "#AAAAFF";
			borderWidth = "1px";
			height = pos.height - 3 +"px";
			width = pos.width - 3 + "px";
			position = "absolute";
			top = pos.top + "px";
			left = pos.left + "px"; 
		}
		with (this.timeDiv.style){
			fontSize = "9px";
			textAlign = "center";
			fontWeight = "bold";
		}
		this.current.appendChild(this.timeDiv);
		dojo.body().appendChild(this.current);
		this.current.setAttribute("onMouseMove","dojo.widget.byId('" + this.widgetId + "').reduceTimeRange(event)");
		var id = this.widgetId + "_timeSlice_" + this.slicePartId++;
		this.current.setAttribute("id", id);
		this.current.setAttribute("onClick","dojo.widget.byId('" + this.widgetId + "').selectTimeRange(this)");
		dojo.html.setOpacity(this.current, 0.8, false);
		//dojo.lfx.rounded({}, [id]);
		this.firstSelected = div;
		this.mousedown = true;
		this.expandTimeRange(this.firstSelected);
	},

	getDivUnderMouse: function(cursor){
		var pos = dojo.html.toCoordinateObject(this.domNode,true);
		var y = cursor.y - pos.top;
		
		var divPos = Math.floor(y/10);

		return this.domNode.getElementsByTagName("div")[divPos];
	},

	reduceTimeRange: function(e){
		if (this.mousedown){
			var cursor = dojo.html.getCursorPosition(e);
			this.lastSelected = this.getDivUnderMouse(cursor);
			if (this.lastSelected != null){
				this.doExpend();
				
			}else{
				//no div under cursor
			}
			
		}
	},

	expandTimeRange: function(div){
		if (this.mousedown){
			div.innerHTML='';
			this.lastSelected = div;
			this.doExpend();
		}
	},

	fixTimeRange: function (){
		if (this.mousedown){
			this.timeRange.add(this.current);
			this.firstSelected = null;
			this.lastSelected = null;
			with (this.current.style){
				backgroundColor = "#4444FF";
			}
			var val = this.current.getElementsByTagName('div')[0].innerHTML;
			var start = val.substring(0,5);
			var end = val.substring(8,val.length);
			this.onCreate(start, end, this.widgetId);
			if (this.weekCalendar != null){
				this.weekCalendar.onCreate(start, end, this.widgetId);
			}
			this.current = null;
			this.mousedown = false;
			this.tmpx = null;
			
		}
	},
	
	onCreate: function(start, end, widgetId){
	},

	doExpend: function (){
		if (this.firstSelected !=null){
			var newTop;
			var newLeft;
			var newHeigth;
			var newWidth;
			var firstPos = dojo.html.toCoordinateObject(this.firstSelected,true);
			var lastPos = dojo.html.toCoordinateObject(this.lastSelected,true);
			
			if(this.firstSelected.getAttribute("pos") < this.lastSelected.getAttribute("pos")){
				newTop = firstPos.top;
				newHeight = lastPos.top - firstPos.top + lastPos.height;
			}else{
				newTop = lastPos.top;
				newHeight = firstPos.top - lastPos.top + firstPos.height;
			}
			
			
			with (this.current.style){
				borderStyle = "solid";
				borderColor = "#0000FF";
				borderWidth = "1px";
				height = newHeight -3 +"px";
				width = firstPos.width - 3 + "px";
				position = "absolute";
				top = newTop + "px";
				left = firstPos.left + "px"; 
			}
			this.createTimeDiv()
		}
	},
	
	createTime: function(){
		var firstPos = this.firstSelected.getAttribute("pos");
		var lastPos = this.lastSelected.getAttribute("pos");
		
		var time;
		
		if(firstPos < lastPos){
			time = this.firstSelected.getAttribute("start") + " - " + this.lastSelected.getAttribute("end");
		}else{
			time = this.lastSelected.getAttribute("start") + " - " + this.firstSelected.getAttribute("end");
		}
		return time;
	},
	
	createTimeDiv: function(){
		this.timeDiv.innerHTML = this.createTime();
	},
	
	removeTimeRange: function(div){
		var val = div.getElementsByTagName('div')[0].innerHTML;
		var start = val.substring(0,5);
		var end = val.substring(8,val.length);
		this.onRemove(start, end, this.widgetId);
		if (this.weekCalendar != null){
			this.weekCalendar.onRemove(start, end, this.widgetId);
		}
		this.timeRange.remove(div);
		document.getElementsByTagName("body")[0].removeChild(div);
		
	},
	
	onRemove: function(start, end, widgetId){
	},
	
	selectTimeRange: function(div){
		if (this.selectedTimeRange != null && div == this.selectedTimeRange){
			//remove selected Style
			with (this.selectedTimeRange.style){
				backgroundColor = "#4444FF";
			}
			this.selectedTimeRange = null;
		} else {
			if (this.selectedTimeRange != null ){
				with (this.selectedTimeRange.style){
					backgroundColor = "#4444FF";
				}
			}
			this.selectedTimeRange = div;
			if (div != null){
				with (div.style){
					backgroundColor = "#FF44FF";
				}
				this.onSelect(div);
			}
		}
	},
	
	/**
	 * Listener on sliceTime selection
	 */
	onSelect: function(div){},
	
	keyPressed: function(e){
		if (e.keyCode == 46 && this.selectedTimeRange != null){  //DEL
			this.removeTimeRange(this.selectedTimeRange);
			this.selectedTimeRange = null;
		}
	},
	
	// ------------------------------------------------------------------ //
	//                          MODEL                                     //
	
	/**
	 * return the json object of the Day
	 */
	getValue: function(){
		var toReturn = new Array();
		this.timeRange.forEach(function(item){
			var toAdd = {};
			var val = item.getElementsByTagName('div')[0].innerHTML;
			toAdd.start = val.substring(0,5);
			toAdd.end = val.substring(8,val.length);
			toReturn.push(toAdd);
		});
		return toReturn;
	},
	
	addTimeRange: function(start, end){
		var inners = this.domNode.getElementsByTagName("div");
		for(var i=0; i<inners.length; i++){
			if (inners[i].getAttribute("start") == start){
				this.createTimeRange(inners[i]);
			}
			if (inners[i].getAttribute("end") == end){
				this.expandTimeRange(inners[i]);
				if (this.mousedown){
					this.timeRange.add(this.current);
					this.firstSelected = null;
					this.lastSelected = null;
					with (this.current.style){
						backgroundColor = "#4444FF";
					}
					this.current = null;
					this.mousedown = false;
					this.tmpx = null;
				}
			}
		}
	},
	
	setValue: function(obj){
		for(var i=0; i < obj.length; i++){
			this.addTimeRange(obj[i].start, obj[i].end);
		}
	},
});

DayCalendar?.html

<div style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-top-width:1px; border-right-width:1px; border-bottom-width:0px; border-left-width:0px; width:100px;">
	
	<div start="00:00" end="00:30" style="cursor:default; font-size:9px;font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="00:30" end="01:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="01:00" end="01:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="01:30" end="02:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="02:00" end="02:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="02:30" end="03:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="03:00" end="03:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="03:30" end="04:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="04:00" end="04:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="04:30" end="05:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="05:00" end="05:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="05:30" end="06:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="06:00" end="06:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="06:30" end="07:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="07:00" end="07:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="07:30" end="08:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="08:00" end="08:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="08:30" end="09:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="09:00" end="09:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="09:30" end="10:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="10:00" end="10:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="10:30" end="11:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="11:00" end="11:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="10:30" end="12:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="12:00" end="12:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="12:30" end="13:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="13:00" end="13:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="13:30" end="14:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="14:00" end="14:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="14:30" end="15:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="15:00" end="15:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="15:30" end="16:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="16:00" end="16:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="16:30" end="17:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="17:00" end="17:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="17:30" end="18:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="18:00" end="18:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="18:30" end="19:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="19:00" end="19:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="19:30" end="20:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="20:00" end="20:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="20:30" end="21:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="21:00" end="21:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="21:30" end="22:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="22:00" end="22:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="22:30" end="23:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="23:00" end="23:30"  style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	<div start="23:30" end="24:00" style="cursor:default; font-size:9px; border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 99px; height: 9px"></div>
	
</div>

WeekCalendar?.html

	<table style="background-color: #F0F0F0;">
		<tr align="center" style="font-size: 10px">
			<td></td>
			<td>Sunday</td>
			<td>Monday</td>
			<td>Tuesday</td>
			<td>Wednesday</td>
			<td>Thursday</td>
			<td>Friday</td>
			<td>Saturday</td>
		</tr>
		<tr>
			<td>
				<div style="border-style:solid; border-color: #AAAAAA; border-top-width:1px; border-right-width:1px; border-bottom-width:0px; border-left-width:0px; width:30px;">
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						00:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						01:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						02:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						03:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						04:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						05:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						06:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						07:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						08:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						09:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						10:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						11:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						12:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						13:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						14:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						15:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						16:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						17:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						18:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						19:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						20:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						21:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						22:00
					</div>
					<div style="border-style:solid; border-color: #AAAAAA; border-bottom-width:1px; border-left-width:1px; border-top-width:0px; border-right-width:0px; width: 29px; height: 19px; font-size: 8px; text-align: center">
						23:00
					</div>
					
				</div>
			</td>
			<td>
				<div id="Sunday"></div>
			</td>
			<td>
				<div id="Monday"></div>
			</td>
			<td>
				<div id="Tuesday"></div>
			</td>
			<td>
				<div id="Wednesday"></div>
			</td>
			<td>
				<div id="Thursday"></div>
			</td>
			<td>
				<div id="Friday"></div>
			</td>
			<td>
				<div id="Saturday"></div>
			</td>
		</tr>
	</table>

WeekCalendar?.js

dojo.provide("dojo.widget.WeekCalendar");

dojo.require("dojo.widget.DayCalendar");

dojo.widget.defineWidget (
	"dojo.widget.WeekCalendar",
	dojo.widget.HtmlWidget,
	{

	templatePath: dojo.uri.dojoUri("../WeekCalendar.htm"),
	
	sunday: null,
	monday: null,
	tuesday: null,
	wednesday: null,
	thursday: null,
	friday: null,
	saturday: null,
	
	//containings last values
	start: null,
	end: null,
	day:null,
	
	
	postCreate: function(args, fragment, parent){
		this.sunday    = dojo.widget.createWidget("dojo:DayCalendar",{widgetId:'sunday'},dojo.byId("Sunday"));
		this.monday    = dojo.widget.createWidget("dojo:DayCalendar",{widgetId:'monday'},dojo.byId("Monday"));
		this.tuesday   = dojo.widget.createWidget("dojo:DayCalendar",{widgetId:'tuesday'},dojo.byId("Tuesday"));
		this.wednesday = dojo.widget.createWidget("dojo:DayCalendar",{widgetId:'wednesday'},dojo.byId("Wednesday"));
		this.thursday  = dojo.widget.createWidget("dojo:DayCalendar",{widgetId:'thursday'},dojo.byId("Thursday"));
		this.friday    = dojo.widget.createWidget("dojo:DayCalendar",{widgetId:'friday'},dojo.byId("Friday"));
		this.saturday  = dojo.widget.createWidget("dojo:DayCalendar",{widgetId:'saturday'},dojo.byId("Saturday"));
		
		this.sunday.weekCalendar = this;	
		this.monday.weekCalendar = this;
		this.tuesday.weekCalendar = this;
		this.wednesday.weekCalendar = this;
		this.thursday.weekCalendar = this;
		this.friday.weekCalendar = this;
		this.saturday.weekCalendar = this;
		
		
		this.sunday.onSelect = function(div){
			this.weekCalendar.monday.selectTimeRange(null);
			this.weekCalendar.tuesday.selectTimeRange(null);
			this.weekCalendar.wednesday.selectTimeRange(null);
			this.weekCalendar.thursday.selectTimeRange(null);
			this.weekCalendar.friday.selectTimeRange(null);
			this.weekCalendar.saturday.selectTimeRange(null);
		};
		this.monday.onSelect = function(div){
			this.weekCalendar.sunday.selectTimeRange(null);
			this.weekCalendar.tuesday.selectTimeRange(null);
			this.weekCalendar.wednesday.selectTimeRange(null);
			this.weekCalendar.thursday.selectTimeRange(null);
			this.weekCalendar.friday.selectTimeRange(null);
			this.weekCalendar.saturday.selectTimeRange(null);
		};
		this.tuesday.onSelect = function(div){
			this.weekCalendar.sunday.selectTimeRange(null);
			this.weekCalendar.monday.selectTimeRange(null);
			this.weekCalendar.wednesday.selectTimeRange(null);
			this.weekCalendar.thursday.selectTimeRange(null);
			this.weekCalendar.friday.selectTimeRange(null);
			this.weekCalendar.saturday.selectTimeRange(null);
		};
		this.wednesday.onSelect = function(div){
			this.weekCalendar.sunday.selectTimeRange(null);
			this.weekCalendar.monday.selectTimeRange(null);
			this.weekCalendar.tuesday.selectTimeRange(null);
			this.weekCalendar.thursday.selectTimeRange(null);
			this.weekCalendar.friday.selectTimeRange(null);
			this.weekCalendar.saturday.selectTimeRange(null);
		};
		this.thursday.onSelect = function(div){
			this.weekCalendar.sunday.selectTimeRange(null);
			this.weekCalendar.monday.selectTimeRange(null);
			this.weekCalendar.tuesday.selectTimeRange(null);
			this.weekCalendar.wednesday.selectTimeRange(null);
			this.weekCalendar.friday.selectTimeRange(null);
			this.weekCalendar.saturday.selectTimeRange(null);
		};
		this.friday.onSelect = function(div){
			this.weekCalendar.sunday.selectTimeRange(null);
			this.weekCalendar.monday.selectTimeRange(null);
			this.weekCalendar.tuesday.selectTimeRange(null);
			this.weekCalendar.wednesday.selectTimeRange(null);
			this.weekCalendar.thursday.selectTimeRange(null);
			this.weekCalendar.saturday.selectTimeRange(null);
		};
		this.saturday.onSelect = function(div){
			this.weekCalendar.sunday.selectTimeRange(null);
			this.weekCalendar.monday.selectTimeRange(null);
			this.weekCalendar.tuesday.selectTimeRange(null);
			this.weekCalendar.wednesday.selectTimeRange(null);
			this.weekCalendar.thursday.selectTimeRange(null);
			this.weekCalendar.friday.selectTimeRange(null);
		};	
	},
	
	onCreate: function(start, end, day){
		this.start = start;
		this.end = end;
		this.day = day;
	},
	
	onRemove: function(start, end, day){
		this.start = start;
		this.end = end;
		this.day = day;
	},
	
	/**
	 * return the json object of the week
	 */
	getValue: function(){
		var data = {};
		data.sunday = this.sunday.getValue();
		data.monday = this.monday.getValue();
		data.tuesday = this.tuesday.getValue();
		data.wednesday = this.wednesday.getValue();
		data.thursday = this.thursday.getValue();
		data.friday = this.friday.getValue();
		data.saturday = this.saturday.getValue();
		
		return data;
	},
	
	setValue: function (obj){
		this.sunday.setValue(obj.sunday);
		this.monday.setValue(obj.monday);
		this.tuesday.setValue(obj.tuesday);
		this.wednesday.setValue(obj.wednesday);
		this.thursday.setValue(obj.thursday);
		this.friday.setValue(obj.friday);
		this.saturday.setValue(obj.saturday);
	},
	
	setJson: function(serialized){
		this.setValue(dojo.json.evalJson(serialized));
	},
	
	getJson: function(){
		return dojo.json.serialize(this.getValue())
	},
	
});

Change History (16)

comment:1 Changed 13 years ago by alex

Milestone: 0.5
Summary: [FEATURE] WeekCalendar or WeekOrganizer[patch][needscla][FEATURE] WeekCalendar or WeekOrganizer

AWESOME!

have you sent in a CLA? We can accept these just as soon as we know that the legal stuff is all sorted out. You can find the individual CLA at:

http://dojotoolkit.org/icla.txt

comment:2 Changed 13 years ago by vincent.demay@…

Ok, i sent you the CLA by facsimile, I hope you recieved it

comment:3 Changed 13 years ago by tk

Cc: tk vincent.demay@… added
Owner: changed from anonymous to Dylan

comment:4 Changed 13 years ago by dylan

Owner: changed from Dylan to dylan
Status: newassigned

comment:5 Changed 13 years ago by dylan

Summary: [patch][needscla][FEATURE] WeekCalendar or WeekOrganizer[patch][cla][FEATURE] WeekCalendar or WeekOrganizer

cla on file

comment:6 Changed 12 years ago by dante

Owner: changed from dylan to dante
Status: assignednew

taking this from dylan, will port to dojox if none oppose.

comment:7 Changed 12 years ago by dante

Status: newassigned

comment:8 Changed 12 years ago by Adam Peller

Component: GeneralDojox

Depending on what these widgets look like, it might be interesting to see if dijit._Calendar can be subclassed/reused.

comment:9 Changed 12 years ago by dante

Milestone: 0.91.0

comment:10 Changed 12 years ago by guest

I'm curretly writing it again to add some functionalities (dnd, better code, etc...). I will comment the bug with the new version as soon as I'll get somethink correct enouth

.Vincent

comment:11 Changed 12 years ago by dante

vincent: any progress on this? I'd love to close this out.

comment:12 Changed 12 years ago by Adam Peller

Hey Vincent.

If you can achieve this by extending dijit._Calendar and just changing the template, you may be able to pick up a lot of functionality for free, as well as i18n and some styling (but no a11y, yet) I tried to leave the structure flexible enough so that you could just subclass and replace the template to do something like this. If I missed something and we can easily adjust _Calendar to be more accomodating, let me know. Ditto for MonthlyCalendar?, if you're interested.

comment:13 Changed 12 years ago by dante

Milestone: 1.02.0

comment:14 Changed 12 years ago by dante

Resolution: wontfix
Status: assignedclosed

going to close this out. vincent, please reopen if you finish your port / enhancements, and it can gladly live in dojox.

comment:15 Changed 12 years ago by guest

Hi,

Ok, np Sorry, I don't have any time for now, I will try to find out some time soon to achieve it.

Cheers

comment:16 Changed 12 years ago by alex

Milestone: 2.01.3

Milestone 2.0 deleted

Note: See TracTickets for help on using tickets.