#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, 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>
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
| Milestone: | → 0.5 |
|---|---|
| Summary: | [FEATURE] WeekCalendar or WeekOrganizer → [patch][needscla][FEATURE] WeekCalendar or WeekOrganizer |
comment:3 Changed 13 years ago by
| Cc: | tk vincent.demay@… added |
|---|---|
| Owner: | changed from anonymous to Dylan |
comment:4 Changed 13 years ago by
| Owner: | changed from Dylan to dylan |
|---|---|
| Status: | new → assigned |
comment:5 Changed 13 years ago by
| Summary: | [patch][needscla][FEATURE] WeekCalendar or WeekOrganizer → [patch][cla][FEATURE] WeekCalendar or WeekOrganizer |
|---|
cla on file
comment:6 Changed 12 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 12 years ago by
| Status: | new → assigned |
|---|
comment:8 Changed 12 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 12 years ago by
| Milestone: | 0.9 → 1.0 |
|---|
comment:10 Changed 12 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 12 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 12 years ago by
| Milestone: | 1.0 → 2.0 |
|---|
comment:14 Changed 12 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 12 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
Note: See
TracTickets for help on using
tickets.
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