#2021 closed enhancement (wontfix)
[patch][cla][FEATURE] WeekCalendar or WeekOrganizer
Reported by: | Owned by: | dante | |
---|---|---|---|
Priority: | high | Milestone: | 1.3 |
Component: | Dojox | Version: | 0.4 |
Keywords: | Cc: | tk, [email protected]… | |
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>
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 14 years ago by
Milestone: | → 0.5 |
---|---|
Summary: | [FEATURE] WeekCalendar or WeekOrganizer → [patch][needscla][FEATURE] WeekCalendar or WeekOrganizer |
comment:3 Changed 14 years ago by
Cc: | tk [email protected]… added |
---|---|
Owner: | changed from anonymous to Dylan |
comment:4 Changed 14 years ago by
Owner: | changed from Dylan to dylan |
---|---|
Status: | new → assigned |
comment:5 Changed 14 years ago by
Summary: | [patch][needscla][FEATURE] WeekCalendar or WeekOrganizer → [patch][cla][FEATURE] WeekCalendar or WeekOrganizer |
---|
cla on file
comment:6 Changed 14 years ago by
Owner: | changed from dylan to dante |
---|---|
Status: | assigned → new |
taking this from dylan, will port to dojox if none oppose.
comment:7 Changed 14 years ago by
Status: | new → assigned |
---|
comment:8 Changed 14 years ago by
Component: | General → Dojox |
---|
Depending on what these widgets look like, it might be interesting to see if dijit._Calendar can be subclassed/reused.
comment:9 Changed 14 years ago by
Milestone: | 0.9 → 1.0 |
---|
comment:10 Changed 14 years ago by
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:12 Changed 14 years ago by
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 14 years ago by
Milestone: | 1.0 → 2.0 |
---|
comment:14 Changed 13 years ago by
Resolution: | → wontfix |
---|---|
Status: | assigned → closed |
going to close this out. vincent, please reopen if you finish your port / enhancements, and it can gladly live in dojox.
comment:15 Changed 13 years ago by
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
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