var MWFCalendarMonthView = MWF.xApplication.Calendar.MonthView = new Class({
Extends: MWF.widget.Common,
Implements: [Options, Events],
options: {
"style": "default",
"date" : ""
},
initialize: function(node, app, options){
this.setOptions(options);
this.path = "../x_component_Calendar/$MonthView/";
this.cssPath = "../x_component_Calendar/$MonthView/"+this.options.style+"/css.wcss";
this._loadCss();
this.app = app;
//this.titleContainer = $(titleNode);
this.container = $(node);
this.load();
},
load: function(){
this.node = new Element("div", {"styles": this.css.node}).inject(this.container);
//this.loadSideBar();
//this.app.addEvent("resize", this.resetNodeSize.bind(this));
this.loadCalendar();
this.resetNodeSize();
},
resetNodeSize: function(){
var size = this.container.getSize();
var y = size.y-50;
this.node.setStyle("height", ""+y+"px");
//this.node.setStyle("margin-top", "60px");
var sideBarSize = this.app.sideBar ? this.app.sideBar.getSize() : { x : 0, y:0 };
this.node.setStyle("width", ""+(size.x - sideBarSize.x)+"px");
this.node.setStyle("margin-right", ""+sideBarSize.x+"px");
if( this.calendar ){
this.calendar.resetBodySize()
}
//var size = this.container.getSize();
//
//this.scrollNode.setStyle("height", ""+(size.y-60)+"px");
//this.scrollNode.setStyle("margin-top", "60px");
//
//if (this.contentWarpNode){
// this.contentWarpNode.setStyles({
// "width": (size.x - 50) +"px"
// });
//}
},
loadCalendar: function(){
var date = "";
if( this.options.date ){
date = Date.parse( this.options.date )
}
this.calendar = new MWFCalendarMonthView.Calendar(this, date );
},
hide: function(){
var fx = new Fx.Morph(this.node, {
"duration": "300",
"transition": Fx.Transitions.Expo.easeOut
});
fx.start({
"opacity": 0
}).chain(function(){
this.node.setStyle("display", "none");
}.bind(this));
},
show: function(){
this.node.setStyles(this.css.node);
var fx = new Fx.Morph(this.node, {
"duration": "800",
"transition": Fx.Transitions.Expo.easeOut
});
//this.app.fireAppEvent("resize");
fx.start({
"opacity": 1
//"left": MWFCalendar.LeftNaviWidth+"px"
}).chain(function(){
//this.node.setStyles({
// "position": "static",
// "width": "auto"
//});
}.bind(this));
},
reload: function(){
if (this.calendar) this.calendar.reLoadCalendar();
},
recordStatus : function(){
return {
date : (this.calendar && this.calendar.date) ? this.calendar.date.format( "db" ) : ""
};
},
destroy: function(){
if (this.calendar){
this.calendar.destroy();
}
this.node.destroy();
//MWF.release( this );
}
});
MWFCalendarMonthView.Calendar = new Class({
Implements: [Events],
initialize: function(view, date){
this.view = view;
this.css = this.view.css;
this.container = this.view.node;
this.app = this.view.app;
this.date = date || new Date();
this.today = new Date();
this.days = {};
this.weekBegin = this.app.calendarConfig.weekBegin || 0;
this.load();
},
load: function(){
this.titleNode = new Element("div", {"styles": this.css.calendarTitleNode}).inject(this.container);
this.titleTableContainer = new Element("div", {"styles": this.css.calendarTitleTableContainer}).inject(this.container);
this.scrollNode = new Element("div", {
"styles": this.css.scrollNode
}).inject(this.container);
this.contentWarpNode = new Element("div", {
"styles": this.css.contentWarpNode
}).inject(this.scrollNode);
this.contentContainerNode = new Element("div",{
"styles" : this.css.contentContainerNode
}).inject(this.contentWarpNode);
this.bodyNode = new Element("div", {
"styles": this.css.contentNode
}).inject(this.contentContainerNode);
this.bodyNode.setStyle("position","relative");
//this.bodyNode = new Element("div", {"styles": this.css.calendarBodyNode}).inject(this.container);
this.setTitleNode();
this.setTitleTableNode();
this.setBodyNode();
//this.app.addEvent("resize", this.resetBodySize.bind(this));
},
resetBodySize: function(){
var size = this.container.getSize();
var titleSize = this.titleNode.getSize();
var titleTableSize = this.titleTable.getSize();
var y = size.y-titleSize.y-titleTableSize.y;
//this.bodyNode.setStyle("height", ""+y+"px");
//var size = this.container.getSize();
this.scrollNode.setStyle("height", ""+y+"px");
//this.scrollNode.setStyle("margin-top", "60px");
this.titleTableContainer.setStyles({
"width": (size.x - 40) +"px"
});
if (this.contentWarpNode){
this.contentWarpNode.setStyles({
"width": (size.x - 40) +"px"
});
}
var tableSize = this.calendarTable.getSize();
MWFCalendarMonthView.WeekWidth = tableSize.x;
MWFCalendarMonthView.DayWidth = tableSize.x / 7;
this.dataTdList.each( function( td ){
td.setStyle("width", MWFCalendarMonthView.WeekWidth)
});
if( this.wholeDayDocumentList && this.wholeDayDocumentList.length ){
this.wholeDayDocumentList.each( function( doc ){
doc.resize();
}.bind(this))
}
if( this.oneDayDocumentList && this.oneDayDocumentList.length ){
this.oneDayDocumentList.each( function( doc ){
doc.resize();
}.bind(this))
}
var top = 30; //MWFCalendarMonthView.THHeight + 30;
var trs = this.calendarTable.getElements("tr");
this.calendarTrHeight = [];
for( var key in this.usedYIndex ){
var idx = this.usedYIndex[key];
var maxLength = Math.max( idx[0].length, idx[1].length, idx[2].length, idx[3].length, idx[4].length, idx[5].length, idx[6].length );
if( maxLength > 4 ){
this.dataTableList[key].setStyle("top", top );
var height = 30 + maxLength * (22 + 2);
top = top + height;
trs[ parseInt(key) ].getElements("td").each( function(td){
td.setStyle("height", height )
});
this.calendarTrHeight.push( height );
}else{
this.dataTableList[key].setStyle("top", top );
top = top + MWFCalendarMonthView.WeekHeight + 1;
trs[ parseInt(key) ].getElements("td").each( function(td){
td.setStyle("height", MWFCalendarMonthView.WeekHeight )
});
this.calendarTrHeight.push( MWFCalendarMonthView.WeekHeight );
}
}
//var tdy = (y-30)/6;
//tdy = tdy-34;
//var tds = this.calendarTable.getElements("td");
//tds.each(function(td){
// var yy = tdy;
// var node = td.getLast("div");
// if (node.childNodes.length>=4){
// if (yy<92) yy = 69;
// }
// node.setStyle("height", ""+yy+"px");
//}.bind(this));
},
setTitleNode: function(){
//this.view.titleContainer.getElements("div:only-child").setStyle("display","none");
//if( this.titleNode ){
// this.titleNode.setStyle("display","")
//}
//this.titleNode = new Element("div").inject(this.view.titleContainer);
this.prevMonthNode = new Element("div.o2icon-triangle_left", {"styles": this.css.calendarPrevMonthNode}).inject(this.titleNode);
var text = this.date.format(this.app.lp.dateFormatMonth);
this.titleTextNode = new Element("div", {"styles": this.css.calendarTitleTextNode, "text": text}).inject(this.titleNode);
this.nextMonthNode = new Element("div.o2icon-triangle_right", {"styles": this.css.calendarNextMonthNode}).inject(this.titleNode);
this.prevMonthNode.addEvents({
"mouseover": function(){
this.prevMonthNode.setStyles(this.css.calendarPrevMonthNode_over);
this.prevMonthNode.addClass("mainColor_color");
}.bind(this),
"mouseout": function(){
this.prevMonthNode.setStyles(this.css.calendarPrevMonthNode);
this.prevMonthNode.removeClass("mainColor_color");
}.bind(this),
"mousedown": function(){this.prevMonthNode.setStyles(this.css.calendarPrevMonthNode_down);}.bind(this),
"mouseup": function(){this.prevMonthNode.setStyles(this.css.calendarPrevMonthNode_over);}.bind(this),
"click": function(){this.changeMonthPrev();}.bind(this)
});
this.nextMonthNode.addEvents({
"mouseover": function(){
this.nextMonthNode.setStyles(this.css.calendarNextMonthNode_over);
this.nextMonthNode.addClass("mainColor_color");
}.bind(this),
"mouseout": function(){
this.nextMonthNode.setStyles(this.css.calendarNextMonthNode);
this.nextMonthNode.removeClass("mainColor_color");
}.bind(this),
"mousedown": function(){this.nextMonthNode.setStyles(this.css.calendarNextMonthNode_down);}.bind(this),
"mouseup": function(){this.nextMonthNode.setStyles(this.css.calendarNextMonthNode_over);}.bind(this),
"click": function(){this.changeMonthNext();}.bind(this)
});
this.titleTextNode.addEvents({
"mouseover": function(){
this.titleTextNode.setStyles(this.css.calendarTitleTextNode_over);
this.titleTextNode.addClass("mainColor_color");
}.bind(this),
"mouseout": function(){
this.titleTextNode.setStyles(this.css.calendarTitleTextNode);
this.titleTextNode.removeClass("mainColor_color");
}.bind(this),
"mousedown": function(){this.titleTextNode.setStyles(this.css.calendarTitleTextNode_down);}.bind(this),
"mouseup": function(){this.titleTextNode.setStyles(this.css.calendarTitleTextNode_over);}.bind(this),
"click": function(){this.changeMonthSelect();}.bind(this)
});
},
changeMonthPrev: function(){
this.date.decrement("month", 1);
var text = this.date.format(this.app.lp.dateFormatMonth);
this.titleTextNode.set("text", text);
this.reLoadCalendar();
},
changeMonthNext: function(){
this.date.increment("month", 1);
var text = this.date.format(this.app.lp.dateFormatMonth);
this.titleTextNode.set("text", text);
this.reLoadCalendar();
},
changeMonthSelect: function(){
if (!this.monthSelector) this.createMonthSelector();
this.monthSelector.show();
},
createMonthSelector: function(){
this.monthSelector = new MWFCalendarMonthView.MonthSelector(this.date, this);
},
changeMonthTo: function(d){
this.date = d;
var text = this.date.format(this.app.lp.dateFormatMonth);
this.titleTextNode.set("text", text);
this.reLoadCalendar();
},
setTitleTableNode : function(){
if( this.weekBegin == "1" ){
var html = "
"+this.app.lp.weeks.Mon+" | "+this.app.lp.weeks.Tues+" | "+this.app.lp.weeks.Wed+" | " +
""+this.app.lp.weeks.Thur+" | "+this.app.lp.weeks.Fri+" | "+this.app.lp.weeks.Sat+" | "+this.app.lp.weeks.Sun+" |
";
}else{
var html = ""+this.app.lp.weeks.Sun+" | "+this.app.lp.weeks.Mon+" | "+this.app.lp.weeks.Tues+" | "+this.app.lp.weeks.Wed+" | " +
""+this.app.lp.weeks.Thur+" | "+this.app.lp.weeks.Fri+" | "+this.app.lp.weeks.Sat+" |
";
}
this.titleTable = new Element("table", {
"styles": this.css.calendarTable,
"height": "100%",
"border": "0",
"cellPadding": "0",
"cellSpacing": "0",
"html": html
}).inject(this.titleTableContainer);
this.calendarTableTitleTr = this.titleTable.getElement("tr");
this.calendarTableTitleTr.setStyles(this.css.calendarTableTitleTr);
var ths = this.calendarTableTitleTr.getElements("th");
ths.setStyles(this.css.calendarTableTh);
},
setBodyNode: function(){
var html = " | | | | | | |
";
html += " | | | | | | |
";
html += " | | | | | | |
";
html += " | | | | | | |
";
html += " | | | | | | |
";
html += " | | | | | | |
";
this.calendarTable = new Element("table", {
"styles": this.css.calendarTable,
"height": "100%",
"border": "0",
"cellPadding": "0",
"cellSpacing": "0",
"html": html
}).inject(this.bodyNode);
this.loadBackgroundCalendar( true );
this.loadDataContainer();
//var tds = this.calendarTable.getElements("td");
//tds.setStyles(this.css.calendarTableCell);
this.loadCalendar();
},
reLoadCalendar: function(){
if( this.wholeDayDocumentList && this.wholeDayDocumentList.length ){
this.wholeDayDocumentList.each( function( doc ){
doc.destroy();
}.bind(this))
}
this.wholeDayDocumentList = [];
if( this.oneDayDocumentList && this.oneDayDocumentList.length ){
this.oneDayDocumentList.each( function( doc ){
doc.destroy();
}.bind(this))
}
this.oneDayDocumentList = [];
this.loadBackgroundCalendar( false );
this.loadCalendar();
},
loadDataContainer : function(){
this.dataTableList = [];
this.dataTdList = [];
[0,1,2,3,4,5,6].each( function( i){
var dataTable = new Element("table.dataTable", {
"styles": this.css.calendarTable,
"border": "0",
"cellPadding": "0",
"cellSpacing": "0",
"index" : i
}).inject(this.bodyNode);
dataTable.setStyles({
//"display" : "none",
"position":"absolute",
"top" : (MWFCalendarMonthView.WeekHeight + 1) * i + MWFCalendarMonthView.THHeight + 30,
"left" : "0px",
"margin": "0px auto 0px 0px"
});
var tr = new Element("tr").inject(dataTable);
var dataTd = new Element( "td" , {
"valign" : "top",
"styles" : {"height":"0px","position":"relative"}
}).inject( tr );
this.dataTableList.push( dataTable );
this.dataTdList.push( dataTd );
}.bind(this))
},
calculateMonthRange : function(){
var date = this.date.clone();
var start = new Date( date.get("year"), date.get("month"), 1, 0, 0, 0 );
var week = start.getDay();
if( this.weekBegin == "1" ){
var decrementDay = ((week-1)<0) ? 6 : week-1;
}else{
var decrementDay = week;
}
start.decrement("day", decrementDay);
this.monthStart = start;
this.monthStartStr = this.monthStart.format("db");
var end = start.clone();
end.increment("day", 41);
this.monthEnd = new Date( end.get("year"), end.get("month"), end.get("date"), 23, 59, 59 );
this.monthEndStr = this.monthEnd.format("db");
this.calculateWeekRange();
},
calculateWeekRange: function(){
this.weekRangeList = [];
var start = this.monthStart.clone();
var end;
for( var i=0; i<6; i++ ){
end = start.clone().increment("day", 6);
end = new Date( end.get("year"), end.get("month"), end.get("date"), 23, 59, 59 );
this.weekRangeList.push( {
start : start,
end : end
});
start = end.clone().increment("second",1);
}
this.weekDaysList = [];
start = this.monthStart.clone();
for( var i=0; i -1 ){
return {
weekIndex: i,
dayIndex: index
}
}
}
return null;
},
getDateIndexOfWeek : function( weekIndex, days ){
var weekDays = this.weekDaysList[weekIndex];
var indexs = [];
for( var i=0; i this.monthStart && time < this.monthEnd;
},
getTimeRange : function( bDate, eDate ){
if( bDate > this.monthEnd || eDate < this.monthStart )return null;
var range = {
startTime : bDate,
endTime : eDate,
start: ( bDate <= this.monthStart ) ? this.monthStart.clone() : bDate.clone(),
end: ( this.monthEnd <= eDate ) ? this.monthEnd.clone() : eDate.clone()
};
range.firstDay = range.start.clone().clearTime();
range.diff = range.start - range.end;
range.weekInforList = this.getWeekInfor(bDate, eDate);
return range;
},
getWeekInfor : function( startTime, endTime ){
if( startTime > this.monthEnd || endTime < this.monthStart )return null;
var rangeWeekInfor = {};
for( var i=0 ; i range.end || endTime < range.start )continue;
var isStart = startTime >= range.start;
var isEnd = range.end >= endTime;
var start = isStart ? startTime : range.start;
var end = isEnd ? endTime : range.end;
var diff = end - start;
var left = start - range.start;
var days = this.getDaysByRange(start, end);
var daysIndex = this.getDateIndexOfWeek( i, days );
rangeWeekInfor[i] = {
index : i,
isEventStart : isStart,
isEventEnd : isEnd,
start : start,
end : end,
diff : diff,
days : days,
left : left,
daysIndex : daysIndex
};
if( isEnd )break;
}
return rangeWeekInfor;
},
getDaysByRange : function( startTime, endTime ){
var start = startTime.clone();
var end = endTime;
var days = [];
while( start < end ){
days.push( start.clone().format("%Y-%m-%d") );
start.increment()
}
return days;
},
loadCalendar: function(){
this.app.currentDate = this.date.clone();
this.calculateMonthRange();
this.cancelCurrentTd();
this.loadData( function(){
this.loadWholeDay( this.wholeDayData );
this.loadOneDay( this.inOneDayEvents );
this.resetBodySize();
}.bind(this));
},
loadBackgroundCalendar: function( isCreate ){
var date = this.date.clone();
date.set("date", 1);
var week = date.getDay();
if( this.weekBegin == "1" ){
var decrementDay = ((week-1)<0) ? 6 : week-1;
}else{
var decrementDay = week;
}
date.decrement("day", decrementDay);
var tds = this.calendarTable.getElements("td");
tds.each(function(td){
this.loadDay(td, date, isCreate);
date.increment();
}.bind(this));
},
loadData : function( callback ){
this.app.actions.listEventWithFilter( {
calendarIds : this.app.getSelectedCalendarId(),
startTime : this.monthStartStr,
endTime : this.monthEndStr //,
//createPerson : this.app.userName
}, function(json){
this.wholeDayData = ( json.data && json.data.wholeDayEvents ) ? json.data.wholeDayEvents : [];
this.inOneDayEvents = [];
(( json.data && json.data.inOneDayEvents) ? json.data.inOneDayEvents : []).each( function( d ){
if(d.inOneDayEvents.length > 0 ){
this.inOneDayEvents.push( d );
}
}.bind(this));
if(callback)callback();
}.bind(this));
},
loadOneDay: function( data ){
this.oneDayDocumentList = [];
data.each( function( d, i ){
d.inOneDayEvents.each( function( event, i ){
this.oneDayDocumentList.push( new MWFCalendarMonthView.Calendar.InOnDayDocument( this, event, d.eventDate ) );
}.bind(this))
}.bind(this))
},
loadWholeDay: function( data ){
this.wholeDayRange = [];
data.each( function( d , i){
var range = this.getTimeRange( Date.parse(d.startTime), Date.parse(d.endTime ) );
if( !range )return;
range.data = d;
this.wholeDayRange.push( range );
}.bind(this));
this.wholeDayRange.sort( function( range1, range2 ){
if( range1.firstDay > range2.firstDay )return 1;
if( range1.firstDay < range2.firstDay )return -1;
return range1.diff - range2.diff;
}.bind(this));
this.wholeDayDocumentList = [];
this.wholeDayRange.each( function( r ){
this.wholeDayDocumentList.push( new MWFCalendarMonthView.Calendar.WholeDayDocument( this, r ) );
}.bind(this))
},
loadDay: function(td, date, isCreate){
var _self = this;
td.empty();
var type = "thisMonth";
var m = date.get("month");
var y = date.get("year");
var d = date.get("date");
var mm = this.date.get("month");
var yy = this.date.get("year");
var mmm = this.today.get("month");
var yyy = this.today.get("year");
var ddd = this.today.get("date");
if ((m==mmm) && (y==yyy) && (d==ddd)){
type = "today";
}else if ((m==mm) && (y==yy)){
type = "thisMonth";
}else{
type = "otherMonth";
}
//var node = new Element("div", {
// "styles" : this.css["calendarTableCell_"+type]
//}).inject( td );
td.set( "valign","top");
td.setStyles( this.css["calendarTableCell_"+type] );
td.store("dateStr",date.format("%Y-%m-%d"));
td.store("type", type );
if( isCreate ){
td.addEvent("click", function(ev){
this.setCurrentTd( td );
}.bind(this));
td.addEvent("dblclick", function(ev){
_self.cancelCurrentTd();
var form = new MWF.xApplication.Calendar.EventForm(_self,{}, {
startTime : Date.parse( this.retrieve("dateStr") + " 08:00") ,
endTime : Date.parse( this.retrieve("dateStr") + " 09:00")
}, {app:_self.app});
form.view = _self;
form.create();
}.bind(td));
new Drag(td, {
"onStart": function(dragged, e){
this.cancelCurrentTd();
this.cellDragStart(dragged, e);
}.bind(this),
"onDrag": function(dragged, e){
this.cellDrag(dragged, e);
}.bind(this),
"onComplete": function(dragged, e){
this.completeDrag(dragged, e);
}.bind(this)
});
}
var titleNode = new Element("div", {"styles": this.css["dayTitle_"+ type]}).inject(td);
var titleDayNode = new Element("div", {"styles": this.css["dayTitleDay_"+ type], "text": d }).inject(titleNode);
titleDayNode.addEvent("click", function(){
_self.app.toDay( this.date );
}.bind({ date : date.format("%Y-%m-%d") }));
if( type === "today" ){
titleDayNode.addClass("mainColor_bg");
}
//var contentNode = new Element("div", {"styles": this.css.dayContentNode}).inject(node);
},
setCurrentTd : function(td){
td.setStyle("background-color","#fffdf2");
if( this.currentSelectedTd ){
this.currentSelectedTd.setStyle("background-color",this.currentSelectedTd.retrieve("type")=="today"?"#F8FBFF":"#fff");
}
this.currentSelectedTd = td;
},
cancelCurrentTd : function(){
if( this.currentSelectedTd ){
this.currentSelectedTd.setStyle("background-color",this.currentSelectedTd.retrieve("type")=="today"?"#F8FBFF":"#fff");
}
this.currentSelectedTd = null;
},
//loadDay: function(td, date){
// td.empty();
// var type = "thisMonth";
// var m = date.get("month");
// var y = date.get("year");
// var d = date.get("date");
// var mm = this.date.get("month");
// var yy = this.date.get("year");
// var mmm = this.today.get("month");
// var yyy = this.today.get("year");
// var ddd = this.today.get("date");
//
// if ((m==mmm) && (y==yyy) && (d==ddd)){
// type = "today";
// }else if ((m==mm) && (y==yy)){
// type = "thisMonth";
// }else{
// type = "otherMonth";
// }
//
// var node = new Element("div", {
// "styles" : this.css["calendarTableCell_"+type]
// }).inject( td );
// node.store("dateStr",date.format("%Y-%m-%d"));
//
// node.addEvent("dblclick", function(ev){
// var form = new MWF.xApplication.Calendar.EventForm(this,{}, {
// startTime : Date.parse( ev.target.retrieve("dateStr") + " 08:00") ,
// endTime : Date.parse( ev.target.retrieve("dateStr") + " 09:00")
// }, {app:this.app});
// form.view = this;
// form.create();
// }.bind(this));
//
// new Drag(node, {
// "onStart": function(dragged, e){
// this.cellDragStart(dragged, e);
// }.bind(this),
// "onDrag": function(dragged, e){
// this.cellDrag(dragged, e);
// }.bind(this),
// "onComplete": function(dragged, e){
// this.completeDrag(dragged, e);
// }.bind(this)
// });
//
// var titleNode = new Element("div", {"styles": this.css["dayTitle_"+ type]}).inject(node);
// var titleDayNode = new Element("div", {"styles": this.css["dayTitleDay_"+ type], "text": d }).inject(titleNode);
//
// var contentNode = new Element("div", {"styles": this.css.dayContentNode}).inject(node);
//
//},
reload : function(){
this.view.reload();
},
destroy: function(){
Object.each(this.days, function(day){
day.destroy();
}.bind(this));
this.container.empty();
},
getIndexByPage: function( page ){
var pos = this.calendarTable.getPosition();
var col = (page.x - pos.x ) / MWFCalendarMonthView.DayWidth;
if( col < 0 || col > 7 )return null;
this.pageOffsetHeight = page.y - pos.y;
var y = page.y - pos.y - MWFCalendarMonthView.THHeight;
if( y < 0 )return null;
var row = null;
for( var i = 0; i< this.calendarTrHeight.length; i++ ){
if( y < this.calendarTrHeight[i] ){
row = i;
break;
}else{
y = y - this.calendarTrHeight[i];
}
}
if( row != null ){
return {
row : row,
col : Math.floor(col)
}
}else{
return null;
}
},
getTdsByIndexRange : function( index1, index2 ){
if( this.calendarTableTds ){
var tds = this.calendarTableTds;
}else{
var tds = this.calendarTableTds = this.calendarTable.getElements("td");
}
var minIndex, maxIndex;
if( index1.row == index2.row ){
if( index1.col <= index2.col ){
minIndex = index1;
maxIndex = index2;
}else{
minIndex = index2;
maxIndex = index1;
}
}else if( index1.row < index2.row ){
minIndex = index1;
maxIndex = index2;
}else{
minIndex = index2;
maxIndex = index1;
}
var startIndex = minIndex.row * 7 + minIndex.col;
var endIndex = maxIndex.row * 7 + maxIndex.col;
var result = [];
for( var i=startIndex; i<=endIndex; i++ ){
result.push( tds[i] );
}
return result;
},
cellDragStart: function(td, e){
td.store("index", this.getIndexByPage(e.page ) );
this.scrollNodeHeight = this.scrollNode.getSize().y;
},
cellDrag: function(td, e){
var orgIndex = td.retrieve( "index" );
var curIndex = this.getIndexByPage( e.page );
if( !curIndex )return;
var tds = this.getTdsByIndexRange( orgIndex, curIndex );
if( this.selectedTds ){
this.selectedTds.each( function( td ){
var type = td.retrieve("type");
if( !tds.contains(td) )td.setStyle("background-color", type == "today" ? "#F8FBFF" : "#fff");
}.bind(this));
tds.each( function( td ){
if( !this.selectedTds.contains(td) )td.setStyle("background-color", "#fffdf2");
}.bind(this))
}else{
tds.each( function(td){
td.setStyle("background-color", "#fffdf2");
}.bind(this))
}
var scrollNodeTop = this.scrollNode.getScroll().y;
if(( this.pageOffsetHeight + MWFCalendarMonthView.WeekHeight * 1.5) > ( this.scrollNodeHeight + scrollNodeTop )){
window.setTimeout( function(){
this.scrollNode.scrollTo(0, scrollNodeTop + MWFCalendarMonthView.WeekHeight )
}.bind(this), 200)
}else if( this.pageOffsetHeight - MWFCalendarMonthView.WeekHeight * 1.5 < scrollNodeTop ){
window.setTimeout( function(){
this.scrollNode.scrollTo(0, scrollNodeTop - MWFCalendarMonthView.WeekHeight )
}.bind(this), 200)
}
this.selectedTds = tds
},
completeDrag: function(td, e){
if( this.selectedTds && this.selectedTds.length ){
this.selectedTds.each( function( td ){
var type = td.retrieve("type");
td.setStyle("background-color", type == "today" ? "#F8FBFF" : "#fff");
}.bind(this));
var startTime = this.selectedTds[0].retrieve("dateStr");
var endTime = this.selectedTds.getLast().retrieve("dateStr");
var form = new MWF.xApplication.Calendar.EventForm(this,{}, {
startTime : startTime ,
endTime : endTime,
isWholeday : true
}, {app:this.app});
form.view = this;
form.create();
this.selectedTds = null;
}
}
});
MWFCalendarMonthView.THHeight = 50;
MWFCalendarMonthView.WeekHeight = 140;
MWFCalendarMonthView.WeekWidth;
MWFCalendarMonthView.DayWidth;
MWFCalendarMonthView.Calendar.WholeDayDocument = new Class({
Implements: [Events],
initialize: function(calendar, range){
this.calendar = calendar;
this.view = this.calendar.view;
this.css = this.calendar.css;
this.app = this.calendar.app;
this.range = range;
this.load();
},
load: function(){
this.weekList = [];
Object.each( this.range.weekInforList, function( weekInfor ){
this.weekList.push( new MWFCalendarMonthView.Calendar.WholeDayWeek(this, weekInfor, this.range.data ) )
}.bind(this))
},
setMouseOver : function(){
this.weekList.each( function( week ){
week.mouseover();
}.bind(this))
},
setMouseOut : function(){
this.weekList.each( function( week ){
week.mouseout();
}.bind(this))
},
resize : function(){
this.weekList.each( function( week ){
week.resize();
}.bind(this))
},
destroy : function(){
this.weekList.each( function( week ){
week.destroy();
}.bind(this))
}
});
MWFCalendarMonthView.Calendar.WholeDayWeek = new Class({
Implements: [Events],
initialize: function(document, weekInfor, data){
this.document = document;
this.calendar = document.calendar;
this.view = this.calendar.view;
this.css = this.calendar.css;
this.app = this.calendar.app;
this.weekInfor = weekInfor;
this.data = data;
this.load();
},
load: function(){
this.timeStart = Date.parse( this.data.startTime );
this.timeEnd = Date.parse( this.data.endTime );
this.yIndex = this.calendar.getUserfulYIndex( this.weekInfor.index, this.weekInfor.daysIndex );
this.container = this.getContainer();
this.createNode();
},
createNode : function(){
var lightColor = this.lightColor = MWFCalendar.ColorOptions.getLightColor( this.data.color );
var node = this.node = new Element("div",{
styles : {
position : "absolute",
"overflow" : "hidden",
"height" : "20px",
"line-height" : "20px",
"border-top" : "1px solid " + lightColor,
"border-bottom" : "1px solid " + lightColor,
"background-color": lightColor
},
events : {
click : function(){
var form = new MWF.xApplication.Calendar.EventForm(this, this.data, {
isFull : true
}, {app:this.app});
form.view = this.view;
this.calendar.app.isEventEditable(this.data) ? form.edit() : form.open();
}.bind(this),
mouseover : function(){
this.document.setMouseOver();
}.bind(this),
mouseout : function(){
this.document.setMouseOut();
}.bind(this)
}
}).inject( this.container );
var coordinate = this.getCoordinate();
node.setStyles(coordinate);
if( this.weekInfor.isEventStart ){
node.setStyles({
"border-left" : "1px solid " + lightColor,
"border-top-left-radius" : "10px",
"border-bottom-left-radius" : "10px"
})
}
if( this.weekInfor.isEventEnd ){
node.setStyles({
"border-right" : "1px solid " + lightColor,
"border-top-right-radius" : "10px",
"border-bottom-right-radius" : "10px"
})
}
if( this.weekInfor.isEventStart ){
this.timeNode = new Element("div",{
styles : {
"font-size" : "10px",
"padding-left" : "2px",
"float" : "left"
},
text : this.timeStart.format("%m-%d %H:%M") + MWF.xApplication.Calendar.LP.to + this.timeEnd.format("%m-%d %H:%M")
}).inject( node );
}
this.titleNode = new Element("div",{
styles : {
"padding-left" : "5px",
"font-size" : "12px",
"float" : "left",
"overflow" : "hidden",
"text-overflow" : "ellipsis",
"white-space" : "nowrap"
},
text : this.data.title
}).inject( node );
this.titleNode.setStyle("width", coordinate.width - ( this.timeNode ? this.timeNode.getSize().x : 0 ) -6 );
//}
this.tooltip = new MWF.xApplication.Calendar.EventTooltip(this.app.content, this.node, this.app, this.data, {
axis : "y", "delay" : 350
});
this.tooltip.view = this.view;
},
getContainer : function(){
return this.calendar.dataTdList[ this.weekInfor.index ]
},
getCoordinate : function(){
var data = this.data;
var infor = this.weekInfor;
var top = this.yIndex * 24;
var width = ( infor.daysIndex.length / 7 ) * MWFCalendarMonthView.WeekWidth - 3;
var left = ( infor.daysIndex[0] / 7 ) * MWFCalendarMonthView.WeekWidth;
//var width = ( infor.diff / MWFCalendarMonthView.WeekMsec ) * MWFCalendarMonthView.WeekWidth - 2;
//var left = ( infor.left / MWFCalendarMonthView.WeekMsec ) * MWFCalendarMonthView.WeekWidth + 3;
return {
top : top + 2,
left : left,
width : width
}
},
mouseover : function(){
this.node.setStyle("border-color", this.data.color );
},
mouseout : function(){
this.node.setStyle("border-color", this.lightColor );
},
resize : function(){
// this.node.setStyles(this.getCoordinate());
var coordinate = this.getCoordinate();
this.node.setStyles( coordinate );
this.titleNode.setStyle("width", coordinate.width - ( this.timeNode ? this.timeNode.getSize().x : 0 ) - 6 );
},
reload: function(){
if( this.tooltip )this.tooltip.destroy();
this.view.reload();
},
destroy : function(){
if( this.tooltip )this.tooltip.destroy();
this.node.destroy();
}
});
MWFCalendarMonthView.Calendar.InOnDayDocument = new Class({
Implements: [Events],
initialize: function(calendar, data, dateStr){
this.calendar = calendar;
this.view = this.calendar.view;
this.css = this.calendar.css;
this.app = this.calendar.app;
this.data = data;
this.dateStr = dateStr;
this.date = Date.parse( dateStr );
this.load();
},
load: function(){
this.timeStart = Date.parse( this.data.startTime );
this.timeEnd = Date.parse( this.data.endTime );
this.index = this.calendar.getDateIndex( this.date );
this.yIndex = this.calendar.getUserfulYIndex( this.index.weekIndex, [this.index.dayIndex] );
this.container = this.getContainer();
this.createNode();
},
createNode : function(){
var lightColor = this.lightColor = MWFCalendar.ColorOptions.getLightColor( this.data.color );
var node = this.node = new Element("div",{
styles : {
position : "absolute",
border : "1px solid "+lightColor,
"background-color" : lightColor,
"overflow" : "hidden",
"height" : "20px",
"line-height" : "20px",
"border-radius" : "10px"
},
events : {
click : function(){
var form = new MWF.xApplication.Calendar.EventForm(this, this.data, {
isFull : true
}, {app:this.app});
form.view = this.view;
this.app.isEventEditable(this.data) ? form.edit() : form.open();
}.bind(this),
"mouseover" : function () {
this.node.setStyle("border-color", this.data.color );
}.bind(this),
"mouseout" : function () {
this.node.setStyle("border-color", this.lightColor );
}.bind(this)
}
}).inject( this.container );
var coordinate = this.getCoordinate();
node.setStyles(coordinate);
//if( this.isFirst ){
this.timeNode = new Element("div",{
styles : {
"font-size" : "10px",
"padding-left" : "2px",
"float" : "left"
},
text : this.timeStart.format("%H:%M") + MWF.xApplication.Calendar.LP.to + this.timeEnd.format("%H:%M")
}).inject( node );
this.titleNode = new Element("div",{
styles : {
"padding-left" : "5px",
"font-size" : "12px",
"float" : "left",
"overflow" : "hidden",
"text-overflow" : "ellipsis",
"white-space" : "nowrap"
},
text : this.data.title
}).inject( node );
this.titleNode.setStyle("width", coordinate.width - this.timeNode.getSize().x - 6 );
//}
this.tooltip = new MWF.xApplication.Calendar.EventTooltip(this.app.content, this.node, this.app, this.data, {
axis : "y", "delay" : 350
});
this.tooltip.view = this.view;
},
getContainer : function(){
return this.calendar.dataTdList[ this.index.weekIndex ]
},
getCoordinate : function(){
var data = this.data;
var top = this.yIndex * 24;
var width = MWFCalendarMonthView.DayWidth - 3;
var left = this.index.dayIndex * MWFCalendarMonthView.DayWidth;
//var width = ( infor.diff / MWFCalendarMonthView.WeekMsec ) * MWFCalendarMonthView.WeekWidth - 2;
//var left = ( infor.left / MWFCalendarMonthView.WeekMsec ) * MWFCalendarMonthView.WeekWidth + 3;
return {
top : top + 2,
left : left,
width : width
}
},
resize : function(){
var coordinate = this.getCoordinate();
this.node.setStyles( coordinate );
this.titleNode.setStyle("width", coordinate.width - this.timeNode.getSize().x - 6 );
},
reload: function(){
if( this.tooltip )this.tooltip.destroy();
this.view.reload();
},
destroy : function(){
if( this.tooltip )this.tooltip.destroy();
this.node.destroy();
}
});
MWFCalendarMonthView.Document = new Class({
initialize: function(day, data, index){
this.day = day;
this.css = this.day.css;
this.view = this.day.view;
this.app = this.day.app;
this.container = this.day.contentNode;
this.data = data;
this.index = index;
this.load();
},
load: function(){
this.nodeStyles = (this.day.type == "today") ? this.css.calendarNode_today : this.css.calendarNode;
this.node = new Element("div", {
"styles": this.nodeStyles
}).inject(this.container);
this.iconNode = new Element("div", {"styles": this.css.calendarIconNode}).inject(this.node);
this.timeNode = new Element("div", {"styles": this.css.calendarTimeNode}).inject(this.node);
this.textNode = new Element("div", {"styles": this.css.calendarTextNode}).inject(this.node);
var timeStr = Date.parse(this.data.startTime).format("%H:%M");
this.timeNode.set("text", timeStr);
this.textNode.set("text", this.data.subject);
//this.node.set("title", this.data.subject);
//
//if (this.data.myWaitAccept){
// this.iconNode.setStyle("background", "url(../x_component_Calendar/$MonthView/"+this.app.options.style+"/icon/invite.png) no-repeat center center");
//}
this.node.addEvents({
mouseenter : function(){
this.day.collapseReady = false;
this.node.setStyles( this.css.calendarNode_over );
//this.showTooltip();
}.bind(this),
mouseleave : function(){
this.node.setStyles( this.nodeStyles );
}.bind(this),
"click": function(){this.openCalendar();}.bind(this)
});
this.loadTooltip();
},
loadTooltip : function(){
this.tooltip = new MWF.xApplication.Calendar.EventTooltip(this.app.content, this.node, this.app, this.data, {
axis : "x",
hiddenDelay : 300,
displayDelay : 300,
onShow : function(){
this.day.collapseDisable = true;
}.bind(this),
onQueryCreate : function(){
this.day.collapseDisable = true;
}.bind(this),
onHide : function(){
this.day.collapseDisable = false;
this.day.collapse();
}.bind(this)
});
this.tooltip.view = this.view;
},
showTooltip: function( ){
//if( this.index > 3 && this.day.isCollapse ){
//}else{
if( this.tooltip ){
this.tooltip.load();
}else{
this.tooltip = new MWF.xApplication.Calendar.EventTooltip(this.app.content, this.node, this.app, this.data, {
axis : "x", "delay" : 150
//onShow : function(){
// this.day.collapseDisable = true;
//}.bind(this),
//onQueryCreate : function(){
// this.day.collapseDisable = true;
//}.bind(this),
//onHide : function(){
// this.day.collapseDisable = false;
//}.bind(this)
});
this.tooltip.view = this.view;
this.tooltip.load();
}
//}
},
openCalendar: function(){
this.form = new MWF.xApplication.Calendar.CalendarForm(this,this.data, {}, {app:this.app});
this.form.view = this;
this.form.open();
},
destroy: function(){
if(this.tooltip)this.tooltip.destroy();
this.node.destroy();
MWF.release(this);
},
reload: function(){
this.view.reload();
}
});
MWFCalendarMonthView.MonthSelector = new Class({
Implements: [Events],
initialize: function(date, calendar){
this.calendar = calendar;
this.css = this.calendar.css;
this.app = this.calendar.app;
this.date = date;
this.year = this.date.get("year");
this.load();
},
load: function(){
this.monthSelectNode = new Element("div", {"styles": this.css.calendarMonthSelectNode}).inject(this.calendar.container);
this.monthSelectNode.position({
relativeTo: this.calendar.titleTextNode,
position: 'bottomCenter',
edge: 'upperCenter'
});
this.monthSelectNode.addEvent("mousedown", function(e){e.stopPropagation();});
this.monthSelectTitleNode = new Element("div", {"styles": this.css.calendarMonthSelectTitleNode}).inject(this.monthSelectNode);
// this.monthSelectTitleNode.addClass("overColor_bg");
this.monthSelectPrevYearNode = new Element("div.o2icon-triangle_left", {"styles": this.css.calendarMonthSelectTitlePrevYearNode}).inject(this.monthSelectTitleNode);
this.monthSelectNextYearNode = new Element("div.o2icon-triangle_right", {"styles": this.css.calendarMonthSelectTitleNextYearNode}).inject(this.monthSelectTitleNode);
this.monthSelectTextNode = new Element("div.MWF_calendar_current", {"styles": this.css.calendarMonthSelectTitleTextNode}).inject(this.monthSelectTitleNode);
this.monthSelectTextNode.set("text", this.year);
var html = " | | |
";
html += " | | |
";
html += " | | |
";
html += " | | |
";
this.monthSelectTable = new Element("table", {
"styles": {"margin-top": "10px"},
"height": "200px",
"width": "90%",
"align": "center",
"border": "0",
"cellPadding": "0",
"cellSpacing": "0", //5
"html": html
}).inject(this.monthSelectNode);
//this.loadMonth();
this.monthSelectBottomNode = new Element("div", {"styles": this.css.calendarMonthSelectBottomNode, "text": this.app.lp.today}).inject(this.monthSelectNode);
this.setEvent();
},
loadMonth: function(){
this.monthSelectTextNode.set("text", this.year);
var d = new Date();
var todayY = d.get("year");
var todayM = d.get("month");
var thisY = this.date.get("year");
var thisM = this.date.get("month");
var _self = this;
var tds = this.monthSelectTable.getElements("td");
tds.each(function(td, idx){
td.empty();
td.removeEvents("mouseover");
td.removeEvents("mouseout");
td.removeEvents("mousedown");
td.removeEvents("mouseup");
td.removeEvents("click");
var m = idx+1;
td.store("month", m);
td.setStyles(this.css.calendarMonthSelectTdNode);
td.setStyle("background-color", "#FFF");
if ((this.year == todayY) && (idx == todayM)){
new Element("div", {
class: "mainColor_bg",
styles : _self.css.calendarMonthSelectTodayNode,
text : ""+m+ (MWF.language.substr(0,2) === "zh" ? this.app.lp.month : "")
}).inject( td );
}else if ((this.year == thisY) && (idx == thisM)){
//td.setStyle("background-color", "#EEE");
new Element("div", {
class: "mainColor_border mainColor_color",
styles : _self.css.calendarMonthSelectCurrentNode,
text : ""+m+ (MWF.language.substr(0,2) === "zh" ? this.app.lp.month : "")
}).inject( td );
}else{
td.set("text", ""+m+ (MWF.language.substr(0,2) === "zh" ? this.app.lp.month : ""));
}
td.addEvents({
"mouseover": function(){this.setStyles(_self.css.calendarMonthSelectTdNode_over);},
"mouseout": function(){this.setStyles(_self.css.calendarMonthSelectTdNode);},
"mousedown": function(){this.setStyles(_self.css.calendarMonthSelectTdNode_down);},
"mouseup": function(){this.setStyles(_self.css.calendarMonthSelectTdNode_over);},
"click": function(){
_self.selectedMonth(this);
}
});
}.bind(this));
},
setEvent: function(){
this.monthSelectPrevYearNode.addEvent("click", function(){
this.prevYear();
}.bind(this));
this.monthSelectNextYearNode.addEvent("click", function(){
this.nextYear();
}.bind(this));
this.monthSelectBottomNode.addEvents({
"mouuseover" : function(){ this.monthSelectBottomNode.setStyles( this.css.calendarMonthSelectBottomNode_over ); }.bind(this),
"mouuseout" : function(){ this.monthSelectBottomNode.setStyles( this.css.calendarMonthSelectBottomNode ); }.bind(this),
"click" : function(){ this.todayMonth(); }.bind(this)
});
},
prevYear: function(){
this.year--;
if (this.year<1900) this.year=1900;
this.monthSelectTextNode.set("text", this.year);
this.loadMonth();
},
nextYear: function(){
this.year++;
//if (this.year<1900) this.year=1900;
this.monthSelectTextNode.set("text", this.year);
this.loadMonth();
},
todayMonth: function(){
var d = new Date();
this.calendar.changeMonthTo(d);
this.hide();
},
selectedMonth: function(td){
var m = td.retrieve("month");
var d = Date.parse(this.year+"/"+m+"/1");
this.calendar.changeMonthTo(d);
this.hide();
},
show: function(){
this.date = this.calendar.date;
this.year = this.date.get("year");
this.loadMonth();
this.monthSelectNode.setStyle("display", "block");
this.hideFun = this.hide.bind(this);
document.body.addEvent("mousedown", this.hideFun);
},
hide: function(){
this.monthSelectNode.setStyle("display", "none");
document.body.removeEvent("mousedown", this.hideFun);
},
destroy: function(){
//this.titleNode.destroy();
//this.titleNode = null;
//this.titleDayNode = null;
//this.titleInforNode = null;
//
//delete this.calendar.days[this.key];
//
//this.node.empty();
//MWF.release(this);
}
});