WeekView.js 64 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734
  1. MWF.require("MWF.widget.Calendar", null, false);
  2. var MWFCalendarWeekView = MWF.xApplication.Calendar.WeekView = new Class({
  3. Extends: MWF.widget.Common,
  4. Implements: [Options, Events],
  5. options: {
  6. "style": "default",
  7. "date" : ""
  8. },
  9. initialize: function(node, app, options){
  10. this.setOptions(options);
  11. this.path = "/x_component_Calendar/$WeekView/";
  12. this.cssPath = "/x_component_Calendar/$WeekView/"+this.options.style+"/css.wcss";
  13. this._loadCss();
  14. this.app = app;
  15. this.container = $(node);
  16. this.weekBegin = this.app.calendarConfig.weekBegin || "0";
  17. this.load();
  18. },
  19. load: function(){
  20. this.node = new Element("div.node", {"styles": this.css.node}).inject(this.container);
  21. this.node.setStyle("position","relative");
  22. //this.loadSideBar();
  23. this.resetNodeSize();
  24. //this.app.addEvent("resize", this.resetNodeSize.bind(this));
  25. this.loadCalendar();
  26. },
  27. resetNodeSize: function(){
  28. //if( this.app.inContainer )return;
  29. var size = this.container.getSize();
  30. var y = size.y-50;
  31. this.node.setStyle("height", ""+y+"px");
  32. //this.node.setStyle("margin-top", "60px");
  33. if( this.calendar ){
  34. this.calendar.resetBodySize()
  35. }
  36. //var sideBarSize = this.app.sideBar ? this.app.sideBar.getSize() : { x : 0, y:0 };
  37. //this.node.setStyle("width", ""+(size.x - sideBarSize.x)+"px");
  38. //this.node.setStyle("margin-right", ""+sideBarSize.x+"px");
  39. //var size = this.container.getSize();
  40. //
  41. //this.scrollNode.setStyle("height", ""+(size.y-60)+"px");
  42. //this.scrollNode.setStyle("margin-top", "60px");
  43. //
  44. //if (this.contentWarpNode){
  45. // this.contentWarpNode.setStyles({
  46. // "width": (size.x - 50) +"px"
  47. // });
  48. //}
  49. },
  50. loadCalendar: function(){
  51. var date = "";
  52. if( this.options.date ){
  53. date = Date.parse( this.options.date )
  54. }else{
  55. date = new Date();
  56. }
  57. this.currentWeek = this.getWeekNumber( date );
  58. this.calendar = new MWFCalendarWeekView.Calendar(this, date );
  59. },
  60. hide: function(){
  61. var fx = new Fx.Morph(this.node, {
  62. "duration": "300",
  63. "transition": Fx.Transitions.Expo.easeOut
  64. });
  65. fx.start({
  66. "opacity": 0
  67. }).chain(function(){
  68. this.node.setStyle("display", "none");
  69. }.bind(this));
  70. },
  71. show: function(){
  72. this.node.setStyles(this.css.node);
  73. var fx = new Fx.Morph(this.node, {
  74. "duration": "800",
  75. "transition": Fx.Transitions.Expo.easeOut
  76. });
  77. //this.app.fireAppEvent("resize");
  78. fx.start({
  79. "opacity": 1
  80. //"left": MWFCalendar.LeftNaviWidth+"px"
  81. }).chain(function(){
  82. //this.node.setStyles({
  83. // "position": "static",
  84. // "width": "auto"
  85. //});
  86. if( this.calendar.dataTable_WholeDay ){
  87. this.calendar.dataTable_WholeDay.setStyle("display","");
  88. }
  89. }.bind(this));
  90. },
  91. reload: function(){
  92. if (this.calendar) this.calendar.reLoadCalendar();
  93. },
  94. recordStatus : function(){
  95. var date = "";
  96. if (this.calendar) date = this.calendar.baseDate;
  97. return {
  98. date : date.toString()
  99. };
  100. },
  101. destroy: function(){
  102. if (this.calendar){
  103. this.calendar.destroy();
  104. }
  105. this.node.destroy();
  106. //MWF.release( this );
  107. },
  108. getWeekNumber: function(d){
  109. // Create a copy of this date object
  110. var target = d.clone();
  111. // ISO week date weeks start on monday
  112. // so correct the day number
  113. //var dayNr = (d.getDay() + 6) % 7;
  114. var dayNr = ( 7 + d.getDay() - parseInt( this.weekBegin ) ) % 7;
  115. // ISO 8601 states that week 1 is the week
  116. // with the first thursday of that year.
  117. // Set the target date to the thursday in the target week
  118. target.setDate(target.getDate() - dayNr + 3);
  119. // Store the millisecond value of the target date
  120. var firstThursday = target.valueOf();
  121. // Set the target to the first thursday of the year
  122. // First set the target to january first
  123. target.setMonth(0, 1);
  124. // Not a thursday? Correct the date to the next thursday
  125. if (target.getDay() != 4) {
  126. target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
  127. }
  128. // The weeknumber is the number of weeks between the
  129. // first thursday of the year and the thursday in the target week
  130. return 1 + Math.ceil((firstThursday - target) / 604800000); // 604800000 = 7 * 24 * 3600 * 1000
  131. }
  132. });
  133. MWFCalendarWeekView.DayWidth;
  134. MWFCalendarWeekView.HourHeight = 48;
  135. MWFCalendarWeekView.DayHeight = 24*MWFCalendarWeekView.HourHeight;
  136. MWFCalendarWeekView.DayMsec = 3600 * 24 * 1000;
  137. MWFCalendarWeekView.WeekWidth;
  138. MWFCalendarWeekView.WeekMsec = MWFCalendarWeekView.DayMsec * 7;
  139. MWFCalendarWeekView.Calendar = new Class({
  140. Implements: [Events],
  141. initialize: function(view, date){
  142. this.view = view;
  143. this.css = this.view.css;
  144. this.container = this.view.node;
  145. this.app = this.view.app;
  146. this.weekBegin = this.app.calendarConfig.weekBegin || "0";
  147. this.baseDate = date || new Date();
  148. this.today = new Date();
  149. this.load();
  150. },
  151. load: function(){
  152. this.date = this.getWeekStartTime( this.baseDate );
  153. this.weekStartTime = new Date( this.date.get("year"), this.date.get("month"), this.date.get("date"), 0, 0, 0 );
  154. this.weekStartTimeStr = this.weekStartTime.format( "db" );
  155. var end = this.date.clone().increment( "day", 6 );
  156. this.weekEndTime = new Date( end.get("year"), end.get("month"), end.get("date"), 23, 59, 59 );
  157. this.weekEndTimeStr = this.weekEndTime.format( "db" );
  158. this.titleNode = new Element("div", {"styles": this.css.calendarTitleNode}).inject(this.container);
  159. this.titleTable = new Element("table.titleTable", {
  160. "styles": this.css.titleTable,
  161. "border": "0",
  162. "cellPadding": "0",
  163. "cellSpacing": "0"
  164. }).inject(this.container);
  165. this.scrollNode = new Element("div.scrollNode", {
  166. "styles": this.css.scrollNode //this.app.inContainer ? this.css.scrollNode_inContainer : this.css.scrollNode
  167. }).inject(this.container);
  168. this.contentWarpNode = new Element("div.contentWarpNode", {
  169. "styles": this.css.contentWarpNode
  170. }).inject(this.scrollNode);
  171. this.contentContainerNode = new Element("div.contentContainerNode",{
  172. "styles" : this.css.contentContainerNode
  173. }).inject(this.contentWarpNode);
  174. this.bodyNode = new Element("div.bodyNode", {
  175. "styles": this.css.contentNode
  176. }).inject(this.contentContainerNode);
  177. this.bodyNode.setStyle("position","relative");
  178. //this.bodyNode = new Element("div", {"styles": this.css.calendarBodyNode}).inject(this.container);
  179. this.setTitleNode();
  180. this.loadTitleTable();
  181. this.loadBodyTable();
  182. //this.resetBodySize();
  183. this.loadDataTable_WholeDay();
  184. this.loadDataTable();
  185. this.loadCalendar();
  186. //this.loadWholedayData( function(json){
  187. // this.loadWholeday(json);
  188. //}.bind(this));
  189. //
  190. //this.loadData( function( json ){
  191. // this.loadDataDay( json );
  192. //}.bind(this));
  193. //this.app.addEvent("resize", this.resetBodySize.bind(this));
  194. },
  195. getWeekStartTime: function( d ){
  196. var date = d.clone();
  197. //var week = date.getDay();
  198. //if( this.weekBegin == "1" ){
  199. // var decrementDay = ((week-1)<0) ? 6 : week-1;
  200. //}else{
  201. // var decrementDay = week;
  202. //}
  203. var decrementDay = ( 7 + d.getDay() - parseInt( this.weekBegin ) ) % 7;
  204. return date.decrement("day", decrementDay);
  205. },
  206. setTitleNode: function(){
  207. this.prevWeekNode = new Element("div", {"styles": this.css.calendarPrevWeekNode}).inject(this.titleNode);
  208. var text = this.baseDate.format(this.app.lp.dateFormatMonth)
  209. + ",第" + this.view.getWeekNumber( this.baseDate ) + "周";
  210. this.titleTextNode = new Element("div", {"styles": this.css.calendarTitleTextNode, "text": text}).inject(this.titleNode);
  211. this.nextWeekNode = new Element("div", {"styles": this.css.calendarNextWeekNode}).inject(this.titleNode);
  212. this.prevWeekNode.addEvents({
  213. "mouseover": function(){this.prevWeekNode.setStyles(this.css.calendarPrevWeekNode_over);}.bind(this),
  214. "mouseout": function(){this.prevWeekNode.setStyles(this.css.calendarPrevWeekNode);}.bind(this),
  215. "mousedown": function(){this.prevWeekNode.setStyles(this.css.calendarPrevWeekNode_down);}.bind(this),
  216. "mouseup": function(){this.prevWeekNode.setStyles(this.css.calendarPrevWeekNode_over);}.bind(this),
  217. "click": function(){this.changeWeekPrev();}.bind(this)
  218. });
  219. this.nextWeekNode.addEvents({
  220. "mouseover": function(){this.nextWeekNode.setStyles(this.css.calendarNextWeekNode_over);}.bind(this),
  221. "mouseout": function(){this.nextWeekNode.setStyles(this.css.calendarNextWeekNode);}.bind(this),
  222. "mousedown": function(){this.nextWeekNode.setStyles(this.css.calendarNextWeekNode_down);}.bind(this),
  223. "mouseup": function(){this.nextWeekNode.setStyles(this.css.calendarNextWeekNode_over);}.bind(this),
  224. "click": function(){this.changeWeekNext();}.bind(this)
  225. });
  226. this.titleTextNode.addEvents({
  227. "mouseover": function(){this.titleTextNode.setStyles(this.css.calendarTitleTextNode_over);}.bind(this),
  228. "mouseout": function(){this.titleTextNode.setStyles(this.css.calendarTitleTextNode);}.bind(this),
  229. "mousedown": function(){this.titleTextNode.setStyles(this.css.calendarTitleTextNode_down);}.bind(this),
  230. "mouseup": function(){this.titleTextNode.setStyles(this.css.calendarTitleTextNode_over);}.bind(this)
  231. //"click": function(){this.changeWeekSelect();}.bind(this)
  232. });
  233. this.createWeekSelector();
  234. },
  235. changeWeekPrev: function(){
  236. this.date.decrement("week", 1);
  237. this.baseDate = this.date;
  238. var text = this.baseDate.format(this.app.lp.dateFormatMonth) + ",第" + this.view.getWeekNumber( this.baseDate ) + "周";
  239. this.titleTextNode.set("text", text);
  240. this.reLoadCalendar();
  241. },
  242. changeWeekNext: function(){
  243. this.date.increment("week", 1);
  244. this.baseDate = this.date;
  245. var text = this.baseDate.format(this.app.lp.dateFormatMonth) + ",第" + this.view.getWeekNumber( this.baseDate ) + "周";
  246. this.titleTextNode.set("text", text);
  247. this.reLoadCalendar();
  248. },
  249. changeWeekSelect: function(){
  250. if (!this.monthSelector) this.createWeekSelector();
  251. //this.monthSelector.show();
  252. },
  253. createWeekSelector: function(){
  254. //this.monthSelector = new MWFCalendarWeekView.Calendar.WeekSelector(this.date, this);
  255. this.weekCalendar = new MWFCalendarWeekView.WeekCalendar(this.titleTextNode, {
  256. "style":"meeting_blue",
  257. "weekBegin" : this.weekBegin,
  258. "target": this.node,
  259. "baseDate" : this.baseDate,
  260. "onInit" : function(){
  261. this.options.dayPath = this.options.path+this.options.style+"/day_week.html";
  262. },
  263. "onQueryComplate": function(e, dv, date){
  264. var selectedDate = new Date.parse(dv);
  265. this.changeWeekTo(selectedDate);
  266. }.bind(this)
  267. });
  268. //this.weekCalendar.app = this.app;
  269. },
  270. changeWeekTo: function(d){
  271. this.baseDate = d;
  272. this.date = this.getWeekStartTime( d );
  273. //var text = this.date.format(this.app.lp.dateFormatWeek);
  274. //this.titleTextNode.set("text", text);
  275. var text = this.baseDate.format(this.app.lp.dateFormatMonth) + ",第" + this.view.getWeekNumber( this.baseDate ) + "周";
  276. this.titleTextNode.set("text", text);
  277. this.reLoadCalendar();
  278. },
  279. isToday : function( d ){
  280. var today = new Date();
  281. if( today.get("year") != d.get("year") )return false;
  282. if( today.get("month") != d.get("month") )return false;
  283. if( today.get("date") != d.get("date") )return false;
  284. return true;
  285. },
  286. loadTitleTable: function(){
  287. var _self = this;
  288. if( !this.tableHead ){
  289. var d = this.date.clone();
  290. var head = this.tableHead = new Element("tr", {
  291. "styles" : this.css.calendarTableTitleTr
  292. }).inject( this.titleTable );
  293. new Element("th", {
  294. "styles" : this.css.calendarTableTh_hour
  295. }).inject(head);
  296. for( var i=0; i<7; i++ ) {
  297. var index = ( i + parseInt( this.weekBegin ) ) % 7;
  298. var th = new Element("th", {
  299. "styles": this.css.calendarTableTh,
  300. text: this.app.lp.weeks.arr[index] + "(" + d.format("%m.%d") + ")"
  301. }).inject(head);
  302. th.store("date", d.format("%Y-%m-%d") );
  303. th.addEvent( "click", function(){
  304. _self.app.toDay( this.retrieve("date") )
  305. }.bind(th));
  306. d.increment("day", 1);
  307. }
  308. var tr = this.wholeDayTr = new Element( "tr").inject( this.titleTable );
  309. var td = new Element( "td.calendarTableCell", {
  310. "tdType" : "hour",
  311. styles : this.css.calendarTableCell_hour
  312. } ).inject( tr );
  313. td.setStyle("min-height","80px");
  314. var node = new Element("div",{
  315. text : "全天"
  316. }).inject( td );
  317. td.store("hour",i );
  318. this.wholeDayTdMap = {};
  319. var d = this.date.clone();
  320. for( var j=0; j<7; j++ ){
  321. td = this.wholeDayTdMap[j] = new Element( "td" , {
  322. "tdType" : "calendar",
  323. "styles" : this.css.calendarTableCell,
  324. "index" : j+1
  325. }).inject( tr );
  326. td.store("dateStr",d.format("%Y-%m-%d"));
  327. td.store("index",j);
  328. td.addEvent("click", function(ev){
  329. this.setCurrentTd( ev.target );
  330. }.bind(this));
  331. td.addEvent("dblclick", function(ev){
  332. this.cancelCurrentTd();
  333. var form = new MWF.xApplication.Calendar.EventForm(this,{}, {
  334. startTime : Date.parse( ev.target.retrieve("dateStr")) ,
  335. endTime : Date.parse( ev.target.retrieve("dateStr")),
  336. isWholeday : true
  337. }, {app:this.app});
  338. form.view = this;
  339. form.create();
  340. }.bind(this));
  341. new Drag(td, {
  342. "onStart": function(dragged, e){
  343. this.cancelCurrentTd();
  344. this.cellDragStart_wholeDay(dragged, e);
  345. }.bind(this),
  346. "onDrag": function(dragged, e){
  347. this.cellDrag_wholeDay(dragged, e);
  348. }.bind(this),
  349. "onComplete": function(dragged, e){
  350. this.completeDrag_wholeDay(dragged, e);
  351. }.bind(this)
  352. });
  353. d.increment("day", 1);
  354. }
  355. }else{
  356. var d = this.date.clone();
  357. this.tableHead.getElements("th").each( function( th, i ){
  358. if( i == 0 )return;
  359. var index = ( i - 1 + parseInt( this.weekBegin ) ) % 7;
  360. th.set("text", this.app.lp.weeks.arr[index] + "(" + d.format("%d") + ")");
  361. th.store("date", d.format("%Y-%m-%d") );
  362. d.increment("day", 1);
  363. }.bind(this));
  364. var d = this.date.clone();
  365. Object.each( this.wholeDayTdMap, function( td, i ){
  366. td.store("dateStr",d.format("%Y-%m-%d"));
  367. d.increment("day", 1);
  368. }.bind(this))
  369. }
  370. },
  371. loadBodyTable: function(){
  372. this.calendarTable = new Element("table.dragTable", {
  373. "styles": this.css.calendarTable,
  374. "height": "100%",
  375. "border": "0",
  376. "cellPadding": "0",
  377. "cellSpacing": "0"
  378. }).inject(this.bodyNode);
  379. this.hourTdMap = {};
  380. this.hourTrMap = {};
  381. for( var i=0; i<24; i++ ){
  382. var tr = new Element( "tr").inject( this.calendarTable );
  383. var td = new Element( "td.calendarTableCell", {
  384. "tdType" : "hour",
  385. styles : this.css.calendarTableCell_hour,
  386. valign : "top"
  387. } ).inject( tr );
  388. var node = new Element("div",{
  389. text : i + ":00"
  390. }).inject( td );
  391. td.store("hour",i );
  392. for( var j=0; j<7; j++ ){
  393. if( !this.hourTdMap[j] )this.hourTdMap[j] = {};
  394. var td = this.hourTdMap[j][i] = new Element( "td" , {
  395. "tdType" : "calendar",
  396. "styles" : this.css.calendarTableCell,
  397. "index" : j+1
  398. }).inject( tr );
  399. td.store("hour",i );
  400. td.store("index",j );
  401. td.addEvent("click", function(ev){
  402. this.setCurrentTd( ev.target );
  403. }.bind(this));
  404. td.addEvent("dblclick", function(ev){
  405. this.cancelCurrentTd();
  406. var hour = ev.target.retrieve("hour");
  407. var index = ev.target.retrieve("index");
  408. var dateStr = this.getDateByIndex( index );
  409. var form = new MWF.xApplication.Calendar.EventForm(this,{}, {
  410. startTime : Date.parse( dateStr + " " +hour+":00") ,
  411. endTime : Date.parse( dateStr + " " + (hour+1)+":00" )
  412. }, {app:this.app});
  413. form.view = this;
  414. form.create();
  415. }.bind(this));
  416. new Drag(td, {
  417. "onStart": function(dragged, e){
  418. this.cancelCurrentTd();
  419. this.cellDragStart(dragged, e);
  420. }.bind(this),
  421. "onDrag": function(dragged, e){
  422. this.cellDrag(dragged, e);
  423. }.bind(this),
  424. "onComplete": function(dragged, e){
  425. this.completeDrag(dragged, e);
  426. }.bind(this)
  427. });
  428. }
  429. this.hourTrMap[ i ] = tr;
  430. }
  431. },
  432. setCurrentTd : function(td){
  433. td.setStyle("background-color","#fffdf2");
  434. if( this.currentSelectedTd ){
  435. var flag = this.currentSelectedTd.retrieve("index") == this.todayIndex;
  436. this.currentSelectedTd.setStyle("background-color",flag?"#F8FBFF":"#fff");
  437. }
  438. this.currentSelectedTd = td;
  439. },
  440. cancelCurrentTd : function(){
  441. if( this.currentSelectedTd ){
  442. var flag = this.currentSelectedTd.retrieve("index") == this.todayIndex;
  443. this.currentSelectedTd.setStyle("background-color",flag?"#F8FBFF":"#fff");
  444. }
  445. this.currentSelectedTd = null;
  446. },
  447. reLoadCalendar: function(){
  448. this.weekStartTime = new Date( this.date.get("year"), this.date.get("month"), this.date.get("date"), 0, 0, 0 );
  449. this.weekStartTimeStr = this.weekStartTime.format( "db" );
  450. var end = this.date.clone().increment( "day", 6 );
  451. this.weekEndTime = new Date( end.get("year"), end.get("month"), end.get("date"), 23, 59, 59 );
  452. this.weekEndTimeStr = this.weekEndTime.format( "db" );
  453. Object.each(this.dayMap || {}, function(day){
  454. day.destroy();
  455. }.bind(this));
  456. this.dayMap = {};
  457. if( this.wholeday ){
  458. this.wholeday.destroy();
  459. }
  460. this.wholeday = null;
  461. //this.calendarTable.getElements("td[tdType='calendar']").each( function(td){
  462. // td.empty();
  463. //}.bind(this));
  464. this.loadTitleTable();
  465. this.loadCalendar();
  466. },
  467. loadCalendar : function(){
  468. this.app.currentDate = this.baseDate.clone();
  469. this.dateIndexMap = null;
  470. this.titleTable.getElement("td:nth-child(1)").setStyle("height", "auto") ;
  471. this.loadData( function(){
  472. this.loadWholeday(this.wholeDayData);
  473. this.loadDataDay( this.inOneDayEvents );
  474. this.resetBodySize();
  475. this.setTodayTds();
  476. this.cancelCurrentTd();
  477. }.bind(this));
  478. },
  479. setTodayTds : function(){
  480. var now = new Date();
  481. var index = this.todayIndex = this.getDateNumOfWeek( now.format("%Y-%m-%d") );
  482. var hour = now.get("hours");
  483. var mintues = now.get("minutes");
  484. mintues = mintues < 2 ? 2 : mintues;
  485. if( index > -1 ){
  486. this.todayTds = [];
  487. var td = this.wholeDayTdMap[index];
  488. td.setStyle("background-color","#f8fbff");
  489. this.todayTds.push( td );
  490. var tds = this.hourTdMap[index];
  491. Object.each( tds, function( td, i ){
  492. td.setStyle("background-color","#f8fbff");
  493. this.todayTds.push( td );
  494. }.bind(this));
  495. this.nowTd = tds[hour];
  496. var nowTdPosition = this.nowTd.getPosition(this.bodyNode);
  497. this.nowTimeNode = new Element("div",{
  498. styles : {
  499. "position" : "absolute",
  500. "left" : nowTdPosition.x,
  501. "top" : nowTdPosition.y + ( (mintues - 2) / 60 ) * MWFCalendarWeekView.HourHeight,
  502. "height" : "2px",
  503. "width" : MWFCalendarWeekView.DayWidth,
  504. "background-color" : "#ff3333"
  505. }
  506. }).inject(this.bodyNode);
  507. }else if( this.todayTds && this.todayTds.length ){
  508. while( this.todayTds.length > 0 ){
  509. this.todayTds.pop().setStyle("background-color","#fff");
  510. }
  511. if(this.nowTd)this.nowTd = null;
  512. if( this.nowTimeNode )this.nowTimeNode.destroy();
  513. }
  514. },
  515. loadData : function( callback ){
  516. this.app.actions.listEventWithFilter( {
  517. calendarIds : this.app.getSelectedCalendarId(),
  518. startTime : this.weekStartTimeStr,
  519. endTime : this.weekEndTimeStr //,
  520. //createPerson : this.app.userName
  521. }, function(json){
  522. this.wholeDayData = ( json.data && json.data.wholeDayEvents ) ? json.data.wholeDayEvents : [];
  523. this.inOneDayEvents = [];
  524. (( json.data && json.data.inOneDayEvents) ? json.data.inOneDayEvents : []).each( function( d ){
  525. if(d.inOneDayEvents.length > 0 ){
  526. this.inOneDayEvents.push( d );
  527. }
  528. }.bind(this));
  529. //json.data.each( function(d){
  530. // var flag = false;
  531. // if( d.isAllDayEvent ){
  532. // flag = true;
  533. // }else if( d.startTime.split(" ")[0] != d.endTime.split(" ")[0] ){
  534. // flag = true;
  535. // }
  536. // if( flag ){
  537. // this.wholeDayData.push( d )
  538. // }else{
  539. // this.inOneDayEvents.push(d)
  540. // }
  541. //}.bind(this));
  542. if(callback)callback();
  543. }.bind(this))
  544. },
  545. loadDataTable_WholeDay: function( json ){
  546. this.dataTable_WholeDay = new Element("table.dataTable", {
  547. "styles": this.css.calendarTable,
  548. "border": "0",
  549. "cellPadding": "0",
  550. "height" : "0",
  551. "cellSpacing": "0"
  552. }).inject(this.container);
  553. this.dataTable_WholeDay.setStyles({
  554. "display" : "none",
  555. "position":"absolute",
  556. "top" : "92px",
  557. "left" : "0px",
  558. "margin": "0px auto 0px 12px"
  559. });
  560. var tr = new Element("tr").inject(this.dataTable_WholeDay);
  561. new Element( "td" , {
  562. "styles" : {"height":"0px" ,"position":"relative"}
  563. }).inject( tr );
  564. this.dataTd_WholeDay = new Element( "td" , {
  565. "valign" : "top",
  566. "styles" : {"height":"0px","position":"relative"}
  567. }).inject( tr );
  568. //this.dataTdMap_WholeDay = {};
  569. //for( var i=0 ;i <7; i++ ){
  570. // this.dataTdMap_WholeDay[ i ] = new Element( "td" , {
  571. // "valign" : "top",
  572. // "styles" : {"height":"0px"}, //,"position":"relative"},
  573. // "index" : i
  574. // }).inject( tr );
  575. //}
  576. },
  577. loadWholeday : function( data ){
  578. this.wholeday = new MWFCalendarWeekView.Calendar.WholeDay( this, data, this.date);
  579. },
  580. loadDataTable: function( json ){
  581. this.dataTable = new Element("table.dataTable", {
  582. "styles": this.css.calendarTable,
  583. "height": "0",
  584. "border": "0",
  585. "cellPadding": "0",
  586. "cellSpacing": "0"
  587. }).inject(this.bodyNode);
  588. this.dataTable.setStyles({
  589. "position":"absolute",
  590. "top" : "0px",
  591. "left" : "0px"
  592. });
  593. var tr = new Element("tr").inject(this.dataTable);
  594. new Element( "td" , {
  595. "styles" : {"height":"0px","position":"relative"}
  596. }).inject( tr );
  597. this.dataTdMap = {};
  598. for( var i=0 ;i <7; i++ ){
  599. this.dataTdMap[ i ] = new Element( "td" , {
  600. "styles" : {"height":"0px","position":"relative"},
  601. "index" : i
  602. }).inject( tr );
  603. }
  604. },
  605. getDateIndexMap : function(){
  606. if( !this.dateIndexMap ){
  607. var date = this.getWeekStartTime( this.baseDate );
  608. this.dateIndexMap = {};
  609. for( var i=0 ;i <7; i++ ){
  610. var dateStr = date.format("%Y-%m-%d");
  611. this.dateIndexMap[ dateStr ] = i;
  612. date.increment();
  613. }
  614. }
  615. return this.dateIndexMap;
  616. },
  617. getDateByIndex : function( index ){
  618. var dateStr;
  619. var dateIndexMap = this.getDateIndexMap();
  620. for( var key in dateIndexMap ){
  621. if( dateIndexMap[key] == index ){
  622. return key;
  623. }
  624. }
  625. },
  626. getDateNumOfWeek : function( dateString ){
  627. var dateIndexMap = this.getDateIndexMap();
  628. return this.dateIndexMap[ dateString ]
  629. },
  630. loadDataDay : function(data){
  631. this.dayMap = {};
  632. data.each( function(d){
  633. var key = d.eventDate;
  634. var container = this.dataTdMap[ this.getDateNumOfWeek( key ) ];
  635. if(container){
  636. this.loadDay(container, key, d.inOneDayEvents );
  637. }
  638. }.bind(this));
  639. //var dataMap = {};
  640. //data.each( function( d ){
  641. // var date2 = Date.parse( d.startTime );
  642. // var dateStr = date2.format("%Y-%m-%d");
  643. // if( !dataMap[dateStr] )dataMap[dateStr] = [];
  644. // dataMap[dateStr].push( d )
  645. //}.bind(this));
  646. //
  647. //for( var key in dataMap ){
  648. // var container = this.dataTdMap[ this.getDateNumOfWeek( key ) ];
  649. // if(container){
  650. // this.loadDay(container, key, dataMap[key]);
  651. // }
  652. //}
  653. },
  654. loadDay: function( container, dateStr, array){
  655. var date = Date.parse(dateStr);
  656. var m = date.get("month");
  657. var y = date.get("year");
  658. var d = date.get("date");
  659. var startTime = new Date( y, m, d, 0, 0, 0 );
  660. var endTime = new Date( y, m, d, 23, 59, 59 );
  661. //if(dayArray.length>0){
  662. this.dayMap[dateStr] = new MWFCalendarWeekView.Calendar.Day( container, date, this, array);
  663. //}
  664. //if(wholeDayArray.length>0){
  665. // this.wholedayMap[dateStr] = new MWFCalendarWeekView.Calendar.WholeDay( container, date, this, type, wholeDayArray);
  666. //}
  667. },
  668. resetBodySize: function(){
  669. //if( this.app.inContainer )return;
  670. var size = this.container.getSize();
  671. var titleSize = this.titleNode.getSize();
  672. var titleTableSize = this.titleTable.getSize();
  673. var y = size.y-titleSize.y-titleTableSize.y;
  674. //this.bodyNode.setStyle("height", ""+y+"px");
  675. if (this.contentWarpNode){
  676. this.contentWarpNode.setStyles({
  677. "width": (size.x - 40) +"px"
  678. });
  679. }
  680. this.scrollNode.setStyle("height", ""+y+"px");
  681. var hourTdX = 60;
  682. MWFCalendarWeekView.WeekWidth = size.x - 40 - hourTdX;
  683. var tdX = MWFCalendarWeekView.DayWidth = Math.floor( (MWFCalendarWeekView.WeekWidth-8) / 7);
  684. if(this.calendarTable){
  685. this.calendarTable.setStyles({
  686. "width": (size.x - 40) +"px"
  687. });
  688. var tr =this.calendarTable.getElement("tr:nth-child(1)");
  689. tr.getElements("td").each( function( td, i ){
  690. td.setStyle("width", (i==0 ? hourTdX : tdX )+"px");
  691. })
  692. }
  693. if(this.titleTable){
  694. this.titleTable.setStyles({
  695. "width": (size.x - 40) +"px"
  696. });
  697. var tr =this.titleTable.getElement("tr:nth-child(1)");
  698. tr.getElements("th").each( function( td, i ){
  699. td.setStyle("width", (i==0 ? hourTdX : tdX )+"px");
  700. })
  701. }
  702. if( this.dataTable ){
  703. this.dataTable.setStyles({
  704. "width": (size.x - 40) +"px"
  705. });
  706. var tr =this.dataTable.getElement("tr:nth-child(1)");
  707. tr.getElements("td").each( function( td, i ){
  708. td.setStyle("width", (i==0 ? hourTdX : tdX )+"px");
  709. })
  710. }
  711. for( var key in this.dayMap ){
  712. this.dayMap[key].resize();
  713. }
  714. if( this.dataTable_WholeDay ){
  715. this.dataTable_WholeDay.setStyles({
  716. "width": (size.x - 40) +"px"
  717. });
  718. var tr =this.dataTable_WholeDay.getElement("tr:nth-child(1)");
  719. var contendTdWidth = size.x - 40 - hourTdX - 2;
  720. tr.getElements("td").each( function( td, i ){
  721. td.setStyle("width", (i==0 ? hourTdX : contendTdWidth )+"px");
  722. })
  723. }
  724. if(this.wholeday)this.wholeday.resize();
  725. if(this.nowTimeNode){
  726. this.nowTimeNode.setStyle("width",tdX);
  727. if(this.nowTd)this.nowTimeNode.setStyle("left", this.nowTd.getPosition(this.bodyNode).x );
  728. }
  729. //for( var key in this.dayMap_WholeDay ){
  730. // this.dayMap_WholeDay[key].resize();
  731. //}
  732. },
  733. reload : function(){
  734. this.view.reload();
  735. },
  736. destroy: function(){
  737. Object.each(this.dayMap || {}, function(day){
  738. day.destroy();
  739. }.bind(this));
  740. if( this.wholeday ){
  741. this.wholeday.destroy();
  742. }
  743. this.container.empty();
  744. },
  745. getIndexByPage: function( page ){
  746. var pos = this.calendarTable.getPosition();
  747. if( !this.calendarTableFirstTd ){
  748. this.calendarTableFirstTd = this.calendarTable.getElement("td");
  749. }
  750. pos.x = pos.x + this.calendarTableFirstTd.getSize().x;
  751. var col = (page.x - pos.x ) / (MWFCalendarWeekView.DayWidth + 1);
  752. if( col < 0 || col > 7 )return null;
  753. this.pageOffsetHeight = page.y - pos.y;
  754. var row = ( page.y - pos.y ) / MWFCalendarWeekView.HourHeight;
  755. if( row < 0 || row > 24 )return null;
  756. return {
  757. row : Math.floor(row),
  758. col : Math.floor(col)
  759. }
  760. },
  761. getIndexListByRange : function( index1, index2 ){
  762. var minIndex, maxIndex;
  763. if( index1.col == index2.col ){
  764. if( index1.row <= index2.row ){
  765. minIndex = index1;
  766. maxIndex = index2;
  767. }else{
  768. minIndex = index2;
  769. maxIndex = index1;
  770. }
  771. }else if( index1.col < index2.col ){
  772. minIndex = index1;
  773. maxIndex = index2;
  774. }else{
  775. minIndex = index2;
  776. maxIndex = index1;
  777. }
  778. var beginRow, endRow;
  779. var result = [];
  780. for( var i = minIndex.col; i<=maxIndex.col; i++ ){
  781. beginRow = i == minIndex.col ? minIndex.row : 0;
  782. endRow = i == maxIndex.col ? maxIndex.row : 23;
  783. for( var j = beginRow; j<= endRow; j++ ){
  784. result.push( i+"_"+j );
  785. }
  786. }
  787. return result;
  788. },
  789. getTdByIndexString : function(index){
  790. var indexList = index.split("_");
  791. var col = indexList[0];
  792. var row = indexList[1];
  793. return this.hourTdMap[col][row];
  794. },
  795. cellDragStart: function(td, e){
  796. td.store("index", this.getIndexByPage(e.page ) );
  797. this.scrollNodeHeight = this.scrollNode.getSize().y;
  798. },
  799. cellDrag: function(td, e){
  800. var orgIndex = td.retrieve( "index" );
  801. var curIndex = this.getIndexByPage( e.page );
  802. if( !curIndex )return;
  803. var indexs = this.getIndexListByRange( orgIndex, curIndex );
  804. var flag = this.todayIndex > -1;
  805. if( this.selectedIndexRange ){
  806. var oldIndex = this.selectedIndexRange;
  807. this.selectedIndexRange.each( function( index ){
  808. if( !indexs.contains(index) ){
  809. this.getTdByIndexString( index ).setStyle("background-color", flag && ( index.split("_")[0] ==this.todayIndex ) ? "#F8FBFF" : "#fff");
  810. }
  811. }.bind(this));
  812. indexs.each( function( index ){
  813. if( !this.selectedIndexRange.contains(index) ){
  814. this.getTdByIndexString( index ).setStyle("background-color", "#fffdf2")
  815. }
  816. }.bind(this))
  817. }else{
  818. for( var i=0; i<indexs.length; i++ ){
  819. this.getTdByIndexString( indexs[i] ).setStyle("background-color", "#fffdf2")
  820. }
  821. }
  822. this.selectedIndexRange = indexs;
  823. var scrollNodeTop = this.scrollNode.getScroll().y;
  824. if(( this.pageOffsetHeight + MWFCalendarWeekView.HourHeight * 1.5) > ( this.scrollNodeHeight + scrollNodeTop )){
  825. window.setTimeout( function(){
  826. this.scrollNode.scrollTo(0, scrollNodeTop + MWFCalendarWeekView.HourHeight )
  827. }.bind(this), 200)
  828. }else if( this.pageOffsetHeight - MWFCalendarWeekView.HourHeight * 1.5 < scrollNodeTop ){
  829. window.setTimeout( function(){
  830. this.scrollNode.scrollTo(0, scrollNodeTop - MWFCalendarWeekView.HourHeight )
  831. }.bind(this), 200)
  832. }
  833. },
  834. completeDrag: function(td, e){
  835. var flag = this.todayIndex > -1;
  836. if( this.selectedIndexRange && this.selectedIndexRange.length ){
  837. this.selectedIndexRange.each( function( index ){
  838. this.getTdByIndexString( index ).setStyle("background-color", flag && ( index.split("_")[0] ==this.todayIndex ) ? "#F8FBFF" : "#fff");
  839. }.bind(this));
  840. var beginIndex = this.selectedIndexRange[0].split("_");
  841. var endIndex = this.selectedIndexRange.getLast().split("_");
  842. var beginTime = this.getDateByIndex( beginIndex[0] ) + " " + beginIndex[1]+":00";
  843. var endTime = this.getDateByIndex( endIndex[0] ) + " " + endIndex[1]+":59";
  844. var form = new MWF.xApplication.Calendar.EventForm(this,{}, {
  845. startTime : beginTime ,
  846. endTime : endTime
  847. }, {app:this.app});
  848. form.view = this;
  849. form.create();
  850. this.selectedIndexRange = null;
  851. }
  852. },
  853. getIndexByPage_wholeDay: function( page ){
  854. var pos = this.wholeDayTr.getPosition();
  855. if( !this.wholeDayFirstTd ){
  856. this.wholeDayFirstTd = this.wholeDayTr.getElement("td");
  857. }
  858. pos.x = pos.x + this.wholeDayFirstTd.getSize().x;
  859. var col = (page.x - pos.x ) / (MWFCalendarWeekView.DayWidth + 1);
  860. if( col < 0 || col > 7 )return null;
  861. return Math.floor(col);
  862. },
  863. getIndexListByRange_wholeDay : function( index1, index2 ){
  864. var minIndex = Math.min( index1, index2 );
  865. var maxIndex = Math.max( index1, index2 );
  866. var result = [];
  867. for( var i = minIndex; i<=maxIndex; i++ ){
  868. result.push( i );
  869. }
  870. return result;
  871. },
  872. cellDragStart_wholeDay: function(td, e){
  873. td.store("index", this.getIndexByPage_wholeDay(e.page ) );
  874. },
  875. cellDrag_wholeDay: function(td, e){
  876. var orgIndex = td.retrieve( "index" );
  877. var curIndex = this.getIndexByPage_wholeDay( e.page );
  878. if( !curIndex )return;
  879. var indexs = this.getIndexListByRange_wholeDay( orgIndex, curIndex );
  880. var flag = this.todayIndex > -1;
  881. if( this.selectedIndexRange_wholeDay ){
  882. var oldIndex = this.selectedIndexRange_wholeDay;
  883. this.selectedIndexRange_wholeDay.each( function( index ){
  884. if( !indexs.contains(index) ){
  885. this.wholeDayTdMap[index].setStyle("background-color", flag && ( index == this.todayIndex ) ? "#F8FBFF" : "#fff");
  886. }
  887. }.bind(this));
  888. indexs.each( function( index ){
  889. if( !this.selectedIndexRange_wholeDay.contains(index) ){
  890. this.wholeDayTdMap[index].setStyle("background-color", "#fffdf2")
  891. }
  892. }.bind(this))
  893. }else{
  894. for( var i=0; i<indexs.length; i++ ){
  895. this.wholeDayTdMap[indexs[i]].setStyle("background-color", "#fffdf2")
  896. }
  897. }
  898. this.selectedIndexRange_wholeDay = indexs;
  899. },
  900. completeDrag_wholeDay: function(td, e){
  901. var flag = this.todayIndex > -1;
  902. if( this.selectedIndexRange_wholeDay && this.selectedIndexRange_wholeDay.length ){
  903. this.selectedIndexRange_wholeDay.each( function( index ){
  904. this.wholeDayTdMap[index].setStyle("background-color", flag && ( index == this.todayIndex ) ? "#F8FBFF" : "#fff");
  905. }.bind(this));
  906. var beginIndex = this.selectedIndexRange_wholeDay[0];
  907. var endIndex = this.selectedIndexRange_wholeDay.getLast();
  908. var beginTime = this.getDateByIndex( beginIndex );
  909. var endTime = this.getDateByIndex( endIndex );
  910. var form = new MWF.xApplication.Calendar.EventForm(this,{}, {
  911. startTime : beginTime ,
  912. endTime : endTime,
  913. isWholeday : true
  914. }, {app:this.app});
  915. form.view = this;
  916. form.create();
  917. this.selectedIndexRange_wholeDay = null;
  918. }
  919. }
  920. });
  921. MWFCalendarWeekView.Calendar.WholeDay = new Class({
  922. Implements: [Events],
  923. initialize: function( calendar, data, date){
  924. this.calendar = calendar;
  925. this.view = this.calendar.view;
  926. this.css = this.calendar.css;
  927. this.app = this.calendar.app;
  928. this.date = date.clone();
  929. this.data = data;
  930. this.load();
  931. },
  932. load: function(){
  933. //var start = this.calendar.getWeekStartTime( this.date );
  934. //this.weekStartTime = new Date( start.get("year"), start.get("month"), start.get("date"), 0, 0, 0 );
  935. //
  936. //var end = start.clone().increment( "day", 6 );
  937. //this.weekEndTime = new Date( end.get("year"), end.get("month"), end.get("date"), 23, 59, 59 );
  938. this.weekStartTime = this.calendar.weekStartTime;
  939. this.weekEndTime = this.calendar.weekEndTime;
  940. this.rangeList = [];
  941. this.rangeObject = {};
  942. this.data.each( function(d , i){
  943. var range = this.getTimeRange( d.startTime, d.endTime );
  944. if( !range )return null;
  945. d.range = range;
  946. d.range.id = d.id;
  947. d.range.data = d;
  948. this.rangeList.push( range );
  949. this.rangeObject[d.id] = range;
  950. }.bind(this));
  951. var itemCountOfDay = {};
  952. this.rangeList.each( function(r){
  953. r.days.each( function( d ){
  954. itemCountOfDay[ d ] = itemCountOfDay[ d ] ? itemCountOfDay[ d ]+1 : 1
  955. }.bind(this))
  956. }.bind(this));
  957. this.maxDayLength = 0;
  958. for(var key in itemCountOfDay){
  959. if( itemCountOfDay[key] > this.maxDayLength )this.maxDayLength = itemCountOfDay[key];
  960. }
  961. if( this.maxDayLength ){
  962. this.calendar.titleTable.getElement("td:nth-child(1)").setStyle("height", 24*this.maxDayLength);
  963. }
  964. this.usefulTdFlagArray = [];
  965. for( var i=0; i<this.maxDayLength; i++ ){
  966. var array = [];
  967. for( var j=0; j<7; j++ ){
  968. array.push( true );
  969. }
  970. this.usefulTdFlagArray.push( array )
  971. }
  972. this.sortRange();
  973. //this.getIntersectedPath2();
  974. this.documentList = [];
  975. this.rangeList.each( function(r , i){
  976. var d = r.data;
  977. if( !d )return null;
  978. this.documentList.push( new MWFCalendarWeekView.Calendar.WholeDayDocument( this, d, r ) );
  979. }.bind(this))
  980. },
  981. sortRange : function(){
  982. this.rangeList.sort( function( range1, range2 ){
  983. if( range1.days[0] > range2.days[0] )return 1;
  984. if( range1.days[0] < range2.days[0] )return -1;
  985. return range2.diff - range1.diff;
  986. }.bind(this));
  987. },
  988. getTimeRange : function( startTime, endTime ){
  989. var start = Date.parse(startTime );
  990. var end = Date.parse(endTime );
  991. if( end < this.weekStartTime || start > this.weekEndDate )return null;
  992. if( start < this.weekStartTime )start = this.weekStartTime.clone();
  993. if( this.weekEndTime < end )end = this.weekEndTime.clone();
  994. var end = new Date( end.get("year"), end.get("month"), end.get("date"), 23, 59, 59 );
  995. var days = [];
  996. while( start < end ){
  997. days.push( start.clone().format("%Y-%m-%d") );
  998. start.increment()
  999. }
  1000. start = Date.parse(startTime );
  1001. end = Date.parse(endTime );
  1002. return {
  1003. start : start,
  1004. end : end,
  1005. days : days,
  1006. diff : end - start
  1007. }
  1008. },
  1009. resize: function(){
  1010. if(!this.documentList)return;
  1011. this.documentList.each( function(d){
  1012. d.resize();
  1013. }.bind(this))
  1014. },
  1015. destroy : function(){
  1016. if(!this.documentList)return;
  1017. while( this.documentList.length ){
  1018. this.documentList.pop().destroy()
  1019. }
  1020. this.calendar.dataTd_WholeDay.empty();
  1021. }
  1022. });
  1023. MWFCalendarWeekView.Calendar.WholeDayDocument = new Class({
  1024. initialize: function(day, data, range ){
  1025. this.day = day;
  1026. this.calendar = day.calendar;
  1027. this.view = this.calendar.view;
  1028. this.css = this.calendar.css;
  1029. this.app = this.calendar.app;
  1030. this.date = day.date.clone();
  1031. this.data = data;
  1032. this.range = range;
  1033. this.load();
  1034. },
  1035. load: function(){
  1036. this.container = this.calendar.dataTd_WholeDay;
  1037. var items = this.items = [];
  1038. this.data.timeStart = Date.parse( this.data.startTime );
  1039. this.data.timeEnd = Date.parse( this.data.endTime );
  1040. this.getUsefulTdYIndex();
  1041. this.createNode();
  1042. //this.range.days.each( function( d, i ){
  1043. // items.push( new MWFCalendarWeekView.Calendar.WholeDayItem( this, d, i ) )
  1044. //}.bind(this))
  1045. },
  1046. getUsefulTdYIndex : function(){
  1047. for( var i=0; i<this.day.maxDayLength; i++ ){
  1048. var flag = true;
  1049. for( var j=0; j<this.range.days.length; j++ ){
  1050. var idx = this.calendar.getDateNumOfWeek( this.range.days[j] );
  1051. if( !this.day.usefulTdFlagArray[i][idx] ){
  1052. flag = false;
  1053. break;
  1054. }
  1055. }
  1056. if( flag ){
  1057. this.yIndex = i;
  1058. for( var j=0; j<this.range.days.length; j++ ){
  1059. var idx = this.calendar.getDateNumOfWeek( this.range.days[j] );
  1060. this.day.usefulTdFlagArray[i][idx] = false;
  1061. }
  1062. break;
  1063. }
  1064. }
  1065. },
  1066. createNode : function(){
  1067. var lightColor = this.lightColor = MWFCalendar.ColorOptions.getLightColor( this.data.color );
  1068. var node = this.node = new Element("div",{
  1069. styles : {
  1070. position : "absolute",
  1071. //border : "1px solid #cae2ff",
  1072. "background-color" : "#cae2ff",
  1073. "overflow" : "hidden",
  1074. "height" : "20px",
  1075. "line-height" : "20px",
  1076. "border-top" : "1px solid " + lightColor,
  1077. "border-bottom" : "1px solid " + lightColor
  1078. },
  1079. events : {
  1080. click : function(){
  1081. var form = new MWF.xApplication.Calendar.EventForm(this, this.data, {
  1082. isFull : true
  1083. }, {app:this.app});
  1084. form.view = this.view;
  1085. form.edit();
  1086. }.bind(this),
  1087. "mouseover" : function () {
  1088. this.node.setStyle("border-color", this.data.color );
  1089. }.bind(this),
  1090. "mouseout" : function () {
  1091. this.node.setStyle("border-color", this.lightColor );
  1092. }.bind(this)
  1093. }
  1094. }).inject( this.container );
  1095. node.setStyles(this.getCoordinate());
  1096. if( !this.startTimeOutRange ){
  1097. node.setStyles({
  1098. "border-left" : "1px solid " + lightColor,
  1099. "border-top-left-radius" : "10px",
  1100. "border-bottom-left-radius" : "10px"
  1101. })
  1102. }
  1103. if( !this.endTimeOutRange ){
  1104. node.setStyles({
  1105. "border-right" : "1px solid " + lightColor,
  1106. "border-top-right-radius" : "10px",
  1107. "border-bottom-right-radius" : "10px"
  1108. })
  1109. }
  1110. //if( this.isFirst ){
  1111. var timeNode = new Element("div",{
  1112. styles : {
  1113. "font-size" : "10px",
  1114. "padding-left" : "2px",
  1115. "float" : "left"
  1116. },
  1117. text : this.data.timeStart.format("%m-%d %H:%M") + "至" + this.data.timeEnd.format("%m-%d %H:%M")
  1118. }).inject( node );
  1119. var titleNode = new Element("div",{
  1120. styles : {
  1121. "padding-left" : "5px",
  1122. "font-size" : "12px",
  1123. "float" : "left"
  1124. },
  1125. text : this.data.title
  1126. }).inject( node );
  1127. //}
  1128. this.tooltip = new MWF.xApplication.Calendar.EventTooltip(this.app.content, this.node, this.app, this.data, {
  1129. axis : "y", "delay" : 350
  1130. });
  1131. this.tooltip.view = this.view;
  1132. },
  1133. getCoordinate : function(){
  1134. var data = this.data;
  1135. var range = this.range;
  1136. var top = this.yIndex * 24;
  1137. var timeStart = this.day.weekStartTime;
  1138. var timeEnd = this.day.weekEndTime;
  1139. if( this.data.timeStart < timeStart ){
  1140. this.startTimeOutRange = true;
  1141. }else{
  1142. this.startTimeOutRange = false;
  1143. timeStart = this.data.timeStart;
  1144. }
  1145. if( this.data.timeEnd > timeEnd ){
  1146. this.endTimeOutRange = true;
  1147. }else{
  1148. this.endTimeOutRange = false;
  1149. timeEnd = this.data.timeEnd;
  1150. }
  1151. var diff = timeEnd - timeStart;
  1152. var width = ( diff / MWFCalendarWeekView.WeekMsec ) * MWFCalendarWeekView.WeekWidth - 2;
  1153. var left = ( ( timeStart - this.day.weekStartTime ) / MWFCalendarWeekView.WeekMsec ) * MWFCalendarWeekView.WeekWidth + 3;
  1154. //var marginRight = ( ( this.weekTimeEnd - timeEnd ) / MWFCalendarWeekView.DayMsec) * MWFCalendarWeekView.DayWidth;
  1155. return {
  1156. top : top + 2,
  1157. left : left,
  1158. width : width // + ( !this.isLast ? 2 : -2 ) //,
  1159. //"margin-left" : marginLeft,
  1160. //"margin-right" : marginRight
  1161. }
  1162. },
  1163. resize : function(){
  1164. this.node.setStyles(this.getCoordinate());
  1165. },
  1166. reload: function(){
  1167. if( this.tooltip )this.tooltip.destroy();
  1168. this.view.reload();
  1169. },
  1170. destroy : function(){
  1171. if( this.tooltip )this.tooltip.destroy();
  1172. this.node.destroy();
  1173. }
  1174. });
  1175. MWFCalendarWeekView.Calendar.Day = new Class({
  1176. Implements: [Events],
  1177. initialize: function(container, date, calendar, data){
  1178. this.container = container;
  1179. this.calendar = calendar;
  1180. this.view = this.calendar.view;
  1181. this.css = this.calendar.css;
  1182. this.app = this.calendar.app;
  1183. this.date = date.clone();
  1184. this.data = data;
  1185. this.calendars = [];
  1186. this.load();
  1187. },
  1188. load: function(){
  1189. this.day = this.date.getDate();
  1190. this.month = this.date.getMonth();
  1191. this.year = this.date.getFullYear();
  1192. this.startTime = new Date( this.year, this.month, this.day, 0, 0, 0 );
  1193. this.endTime = new Date( this.year, this.month, this.day, 23, 59, 59 );
  1194. this.rangeList = [];
  1195. this.rangeObject = {};
  1196. this.data.each( function(d , i){
  1197. var range = this.getTimeRange( d.startTime, d.endTime );
  1198. if( !range )return null;
  1199. d.range = range;
  1200. d.range.id = d.id;
  1201. this.rangeList.push( range );
  1202. this.rangeObject[d.id] = range;
  1203. }.bind(this));
  1204. this.sortRange();
  1205. var length = this.data.length;
  1206. this.documentList = [];
  1207. this.data.each( function(d , i){
  1208. var range = d.range;
  1209. range.dayRangeCount = length;
  1210. range.index = this.rangeList.indexOf( range );
  1211. if( !range )return null;
  1212. //var coordinate = this.getCoordinate( d, range );
  1213. this.documentList.push( new MWFCalendarWeekView.Calendar.Document(this.container, this, d, range ) );
  1214. }.bind(this))
  1215. },
  1216. sortRange : function(){
  1217. this.rangeList.sort( function(range1, range2){
  1218. return range1.startTime - range2.startTime;
  1219. });
  1220. },
  1221. getTimeRange: function( bDate1, eDate1 ){
  1222. var bDate = typeOf(bDate1) == "string" ? Date.parse(bDate1) : bDate1;
  1223. var eDate = typeOf(eDate1) == "string" ? Date.parse(eDate1) : eDate1;
  1224. if( eDate <= this.startTime ){ //比当天天12点更晚
  1225. return null;
  1226. }
  1227. if( this.endTime <= bDate ){
  1228. return null;
  1229. }
  1230. var range = {
  1231. start: ( bDate <= this.startTime ) ? [0, 0, 0] : [bDate.get("hr"), bDate.get("min"), bDate.get("sec")],
  1232. end: ( this.endTime <= eDate ) ? [23, 59, 59] : [eDate.get("hr"), eDate.get("min"), eDate.get("sec")]
  1233. };
  1234. range.startTime = new Date( this.year, this.month, this.day, range.start[0], range.start[1], range.start[2] );
  1235. range.endTime = new Date( this.year, this.month, this.day, range.end[0], range.end[1], range.end[2] );
  1236. range.diff = range.endTime - range.startTime;
  1237. return range;
  1238. },
  1239. resize : function(){
  1240. if(!this.documentList)return;
  1241. this.documentList.each( function( doc ){
  1242. doc.resize();
  1243. }.bind(this))
  1244. },
  1245. reload: function(){
  1246. this.view.reload();
  1247. },
  1248. destroy : function(){
  1249. while( this.documentList.length > 0 ){
  1250. this.documentList.pop().destroy();
  1251. }
  1252. this.container.empty();
  1253. }
  1254. });
  1255. MWFCalendarWeekView.Calendar.Document = new Class({
  1256. initialize: function(container, day, data, range, coordinate ){
  1257. this.container = container;
  1258. this.day = day;
  1259. this.calendar = day.calendar;
  1260. this.view = this.calendar.view;
  1261. this.css = this.calendar.css;
  1262. this.app = this.calendar.app;
  1263. this.date = day.date.clone();
  1264. this.data = data;
  1265. this.range = range;
  1266. this.coordinate = coordinate; //today, otherMonth, thisMonth
  1267. this.load();
  1268. },
  1269. load: function(){
  1270. var lightColor = this.lightColor = MWFCalendar.ColorOptions.getLightColor( this.data.color );
  1271. var node = this.node = new Element("div",{
  1272. styles : {
  1273. position : "absolute",
  1274. border : "1px solid "+lightColor,
  1275. "background-color" : lightColor,
  1276. "overflow" : "hidden",
  1277. "border-radius" : "5px"
  1278. },
  1279. events : {
  1280. click : function(){
  1281. var form = new MWF.xApplication.Calendar.EventForm(this, this.data, {
  1282. isFull : true
  1283. }, {app:this.app});
  1284. form.view = this.view;
  1285. form.edit();
  1286. }.bind(this),
  1287. "mouseover" : function () {
  1288. this.node.setStyle("border-color", this.data.color );
  1289. }.bind(this),
  1290. "mouseout" : function () {
  1291. this.node.setStyle("border-color", this.lightColor );
  1292. }.bind(this)
  1293. }
  1294. }).inject( this.container );
  1295. node.setStyles(this.getCoordinate());
  1296. var timeNode = new Element("div",{
  1297. styles : {
  1298. "font-size" : "10px",
  1299. "padding-top" : "2px",
  1300. "padding-left" : "2px"
  1301. },
  1302. text : this.range.startTime.format("%H:%M") + "-" + this.range.endTime.format("%H:%M")
  1303. }).inject( node );
  1304. var titleNode = new Element("div",{
  1305. styles : {
  1306. "padding-top" : "10px",
  1307. "padding-left" : "5px",
  1308. "font-size" : "12px"
  1309. },
  1310. text : this.data.title
  1311. }).inject( node );
  1312. this.tooltip = new MWF.xApplication.Calendar.EventTooltip(this.app.content, this.node, this.app, this.data, {
  1313. axis : "x", "delay" : 350
  1314. });
  1315. this.tooltip.view = this.view;
  1316. },
  1317. resize : function(){
  1318. this.node.setStyles(this.getCoordinate());
  1319. },
  1320. getCoordinate : function(){
  1321. var data = this.data;
  1322. var range = this.range;
  1323. var width_div = 8;
  1324. var top_div = 0;
  1325. if(Browser.name === "ie" ){
  1326. width_div = 4;
  1327. top_div = -2
  1328. }
  1329. var height = Math.floor( ( ( range.endTime - range.startTime ) / MWFCalendarWeekView.DayMsec ) * MWFCalendarWeekView.DayHeight)-width_div;
  1330. if(height < 16) height = 16;
  1331. var top = Math.floor( ( ( range.startTime - this.day.startTime ) / MWFCalendarWeekView.DayMsec ) * MWFCalendarWeekView.DayHeight)-top_div;
  1332. //var width = Math.floor( MWFCalendarWeekView.DayWidth / length )-2;
  1333. //var left = ( width + 2)* index + 1;
  1334. //var width = Math.floor( MWFCalendarWeekView.DayWidth / range.path.length )-5;
  1335. //var left = ( width + 5)* range.path.indexOf( data.id ) + 3;
  1336. var width = Math.floor( MWFCalendarWeekView.DayWidth / this.range.dayRangeCount )-5;
  1337. var left = ( width + 5)* this.range.index + 3;
  1338. return {
  1339. top : top,
  1340. left : left,
  1341. width : width,
  1342. height : height
  1343. }
  1344. },
  1345. reload: function(){
  1346. if( this.tooltip )this.tooltip.destroy();
  1347. this.view.reload();
  1348. },
  1349. destroy: function(){
  1350. if( this.tooltip )this.tooltip.destroy();
  1351. this.node.destroy()
  1352. }
  1353. });
  1354. MWFCalendarWeekView.WeekCalendar = new Class({
  1355. Extends : MWF.widget.Calendar,
  1356. initialize: function(node, options){
  1357. this.options.weekBegin = "0";
  1358. Locale.use("zh-CHS");
  1359. this.options.defaultTime = ""+this.options.baseDate.getHours()+":"+this.options.baseDate.getMinutes()+":"+this.options.baseDate.getSeconds();
  1360. this.setOptions(options);
  1361. this.path = MWF.defaultPath+"/widget/$Calendar/";
  1362. this.cssPath = MWF.defaultPath+"/widget/$Calendar/"+this.options.style+"/css.wcss";
  1363. this._loadCss();
  1364. // this.options.containerPath = this.path+this.style+"/container.html";
  1365. // this.options.dayPath = this.path+this.style+"/day.html";
  1366. // this.options.monthPath = this.path+this.style+"/month.html";
  1367. // this.options.yearPath = this.path+this.style+"/year.html";
  1368. // this.options.timePath = this.path+this.style+"/time.html";
  1369. if (!this.options.format){
  1370. if (this.options.isTime){
  1371. //this.options.format = Locale.get("Date").shortDate + " " + Locale.get("Date").shortTime;
  1372. if(this.options.timeOnly){
  1373. this.options.format="%H:%M";
  1374. }
  1375. else{
  1376. this.options.format = Locale.get("Date").shortDate + " " + "%H:%M";
  1377. }
  1378. }else{
  1379. this.options.format = Locale.get("Date").shortDate;
  1380. }
  1381. }
  1382. this.options.containerPath = this.options.path+this.options.style+"/container.html";
  1383. this.options.dayPath = this.options.path+this.options.style+"/day_week.html";
  1384. this.options.monthPath = this.options.path+this.options.style+"/month.html";
  1385. this.options.yearPath = this.options.path+this.options.style+"/year.html";
  1386. this.options.timePath = this.options.path+this.options.style+"/time.html";
  1387. this.today = new Date();
  1388. this.currentView = this.options.defaultView;
  1389. this.node = $(node);
  1390. this.visible = false;
  1391. this.container = this.createContainer();
  1392. this.container.inject((this.options.target) || $(document.body));
  1393. this.contentTable = this.createContentTable();
  1394. this.contentTable.inject(this.contentDateNode);
  1395. this.addEvents();
  1396. this.container.set({
  1397. styles: {
  1398. "display": "none",
  1399. "opacity": 1
  1400. }
  1401. });
  1402. this.fireEvent("init");
  1403. //this.move = true;
  1404. //this.containerDrag = new Drag.Move(this.container);
  1405. },
  1406. showDay: function(year, month){
  1407. this._setDayTitle(null, year, month);
  1408. this._setDayWeekTitleTh();
  1409. this._setDayDate(null, year, month);
  1410. // if (!this.move){
  1411. // this.move = true;
  1412. // this.containerDrag = new Drag.Move(this.container);
  1413. // }
  1414. },
  1415. _setDayTitle: function(node, year, month){
  1416. var thisYear = (year!=undefined) ? year : this.options.baseDate.getFullYear();
  1417. var thisMonth = (month!=undefined) ? month : this.options.baseDate.getMonth();
  1418. thisMonth++;
  1419. var text = thisYear+"年"+thisMonth+"月";
  1420. var thisNode = node || this.currentTextNode;
  1421. thisNode.set("text", text);
  1422. thisNode.store("year", thisYear);
  1423. thisNode.store("month", thisMonth);
  1424. },
  1425. _setDayWeekTitleTh: function(table){
  1426. var dayTable = table || this.contentTable;
  1427. var thead = dayTable.getElement("thead");
  1428. var cells = thead.getElements("th");
  1429. if (this.css.calendarDaysContentTh) cells.setStyles(this.css.calendarDaysContentTh);
  1430. //var days_abbr = Locale.get("Date").days_abbr;
  1431. var days_abbr = MWF.LP.widget.days_abbr;
  1432. cells.each(function(item, idx){
  1433. if( idx == 0 ){
  1434. item.set("text", "周");
  1435. }else{
  1436. //var index;
  1437. //if( this.options.weekBegin == "0" ){
  1438. // index = idx-1;
  1439. //}else{
  1440. // index = idx == 7 ? 0 : idx;
  1441. //}
  1442. var index = ( idx - 1 + parseInt( this.options.weekBegin ) ) % 7;
  1443. item.set("text", days_abbr[index]);
  1444. }
  1445. }.bind(this));
  1446. return cells;
  1447. },
  1448. _setDayDate: function(table, year, month){
  1449. var dayTable = table || this.contentTable;
  1450. var baseDate = this.options.baseDate;
  1451. if ((year!=undefined) && (month!=undefined)){
  1452. baseDate = new Date();
  1453. baseDate.setDate(1);
  1454. baseDate.setFullYear(year);
  1455. baseDate.setMonth(month);
  1456. }
  1457. var tbody = dayTable.getElement("tbody");
  1458. var tds = tbody.getElements("td");
  1459. var firstDate = baseDate.clone();
  1460. firstDate.setDate(1);
  1461. //if( this.options.weekBegin == "0" ){
  1462. // var day = firstDate.getDay()+1;
  1463. //}else{
  1464. //
  1465. //}
  1466. var day = ( 7 + firstDate.getDay() - parseInt( this.options.weekBegin ) ) % 7 + 1;
  1467. var tmpDate = firstDate.clone();
  1468. for (var i=day-1; i>=0; i--){
  1469. if( i % 8 == 0 ){ //设置周数
  1470. var week = this.getWeekNumber( tmpDate );
  1471. tds[i].set("text", week);
  1472. tds[i].setStyles(this.css.week);
  1473. tds[i].store("weekValue", week.toString());
  1474. tds[i].store("dateValue", tmpDate.toString());
  1475. i--;
  1476. if( i<0 )break;
  1477. }
  1478. tmpDate.increment("day", -1);
  1479. tds[i].set("text", tmpDate.getDate());
  1480. tds[i].addClass("gray_"+this.options.style);
  1481. tds[i].setStyles(this.css["gray_"+this.options.style]);
  1482. tds[i].store("dateValue", tmpDate.toString())
  1483. }
  1484. for (var i=day; i<tds.length; i++){
  1485. if( i % 8 == 0 ){ //设置周数
  1486. var week = this.getWeekNumber( firstDate );
  1487. tds[i].set("text", week );
  1488. //tds[i].addClass("gray_"+this.options.style);
  1489. tds[i].setStyles(this.css.week);
  1490. tds[i].store("weekValue", week.toString());
  1491. tds[i].store("dateValue", firstDate.toString());
  1492. i++;
  1493. if( i>=tds.length )break;
  1494. }
  1495. tds[i].set("text", firstDate.getDate());
  1496. if (firstDate.toString() == this.options.baseDate.toString()){
  1497. tds[i].addClass("current_"+this.options.style);
  1498. tds[i].setStyles(this.css["current_"+this.options.style]);
  1499. tds[i].removeClass("gray_"+this.options.style);
  1500. tds[i].setStyle("border", "1px solid #FFF");
  1501. }else if (firstDate.getMonth()!=baseDate.getMonth()){
  1502. tds[i].addClass("gray_"+this.options.style);
  1503. tds[i].setStyles(this.css["gray_"+this.options.style]);
  1504. tds[i].removeClass("current_"+this.options.style);
  1505. tds[i].setStyle("border", "1px solid #FFF");
  1506. }else{
  1507. tds[i].setStyles(this.css["normal_"+this.options.style]);
  1508. tds[i].removeClass("current_"+this.options.style);
  1509. tds[i].removeClass("gray_"+this.options.style);
  1510. tds[i].setStyle("border", "1px solid #FFF");
  1511. }
  1512. var tmp = firstDate.clone();
  1513. if (tmp.clearTime().toString() == this.today.clearTime().toString()){
  1514. //tds[i].addClass("today_"+this.options.style);
  1515. tds[i].setStyles(this.css["today_"+this.options.style]);
  1516. tds[i].setStyle("border", "0px solid #AAA");
  1517. }
  1518. tds[i].store("dateValue", firstDate.toString());
  1519. firstDate.increment("day", 1);
  1520. }
  1521. },
  1522. getWeekNumber: function( d ){
  1523. // Create a copy of this date object
  1524. var target = d.clone();
  1525. // ISO week date weeks start on monday
  1526. // so correct the day number
  1527. //if( this.options.weekBegin == "1" ){
  1528. // var dayNr = (d.getDay() + 6) % 7;
  1529. //}else{
  1530. // var dayNr = (d.getDay() + 7) % 7;
  1531. //}
  1532. var dayNr = ( 7 + d.getDay() - parseInt( this.options.weekBegin ) ) % 7;
  1533. // ISO 8601 states that week 1 is the week
  1534. // with the first thursday of that year.
  1535. // Set the target date to the thursday in the target week
  1536. target.setDate(target.getDate() - dayNr + 3);
  1537. // Store the millisecond value of the target date
  1538. var firstThursday = target.valueOf();
  1539. // Set the target to the first thursday of the year
  1540. // First set the target to january first
  1541. target.setMonth(0, 1);
  1542. // Not a thursday? Correct the date to the next thursday
  1543. if (target.getDay() != 4) {
  1544. target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
  1545. }
  1546. // The weeknumber is the number of weeks between the
  1547. // first thursday of the year and the thursday in the target week
  1548. return 1 + Math.ceil((firstThursday - target) / 604800000); // 604800000 = 7 * 24 * 3600 * 1000
  1549. }
  1550. });