MonthView.js 53 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438
  1. var MWFCalendarMonthView = MWF.xApplication.Calendar.MonthView = new Class({
  2. Extends: MWF.widget.Common,
  3. Implements: [Options, Events],
  4. options: {
  5. "style": "default",
  6. "date" : ""
  7. },
  8. initialize: function(node, app, options){
  9. this.setOptions(options);
  10. this.path = "/x_component_Calendar/$MonthView/";
  11. this.cssPath = "/x_component_Calendar/$MonthView/"+this.options.style+"/css.wcss";
  12. this._loadCss();
  13. this.app = app;
  14. //this.titleContainer = $(titleNode);
  15. this.container = $(node);
  16. this.load();
  17. },
  18. load: function(){
  19. this.node = new Element("div", {"styles": this.css.node}).inject(this.container);
  20. //this.loadSideBar();
  21. //this.app.addEvent("resize", this.resetNodeSize.bind(this));
  22. this.loadCalendar();
  23. this.resetNodeSize();
  24. },
  25. resetNodeSize: function(){
  26. var size = this.container.getSize();
  27. var y = size.y-50;
  28. this.node.setStyle("height", ""+y+"px");
  29. //this.node.setStyle("margin-top", "60px");
  30. var sideBarSize = this.app.sideBar ? this.app.sideBar.getSize() : { x : 0, y:0 };
  31. this.node.setStyle("width", ""+(size.x - sideBarSize.x)+"px");
  32. this.node.setStyle("margin-right", ""+sideBarSize.x+"px");
  33. if( this.calendar ){
  34. this.calendar.resetBodySize()
  35. }
  36. //var size = this.container.getSize();
  37. //
  38. //this.scrollNode.setStyle("height", ""+(size.y-60)+"px");
  39. //this.scrollNode.setStyle("margin-top", "60px");
  40. //
  41. //if (this.contentWarpNode){
  42. // this.contentWarpNode.setStyles({
  43. // "width": (size.x - 50) +"px"
  44. // });
  45. //}
  46. },
  47. loadCalendar: function(){
  48. var date = "";
  49. if( this.options.date ){
  50. date = Date.parse( this.options.date )
  51. }
  52. this.calendar = new MWFCalendarMonthView.Calendar(this, date );
  53. },
  54. hide: function(){
  55. var fx = new Fx.Morph(this.node, {
  56. "duration": "300",
  57. "transition": Fx.Transitions.Expo.easeOut
  58. });
  59. fx.start({
  60. "opacity": 0
  61. }).chain(function(){
  62. this.node.setStyle("display", "none");
  63. }.bind(this));
  64. },
  65. show: function(){
  66. this.node.setStyles(this.css.node);
  67. var fx = new Fx.Morph(this.node, {
  68. "duration": "800",
  69. "transition": Fx.Transitions.Expo.easeOut
  70. });
  71. //this.app.fireAppEvent("resize");
  72. fx.start({
  73. "opacity": 1
  74. //"left": MWFCalendar.LeftNaviWidth+"px"
  75. }).chain(function(){
  76. //this.node.setStyles({
  77. // "position": "static",
  78. // "width": "auto"
  79. //});
  80. }.bind(this));
  81. },
  82. reload: function(){
  83. if (this.calendar) this.calendar.reLoadCalendar();
  84. },
  85. recordStatus : function(){
  86. var date = "";
  87. if (this.calendar) date = this.calendar.date;
  88. return {
  89. date : date.toString()
  90. };
  91. },
  92. destroy: function(){
  93. if (this.calendar){
  94. this.calendar.destroy();
  95. }
  96. this.node.destroy();
  97. //MWF.release( this );
  98. }
  99. });
  100. MWFCalendarMonthView.Calendar = new Class({
  101. Implements: [Events],
  102. initialize: function(view, date){
  103. this.view = view;
  104. this.css = this.view.css;
  105. this.container = this.view.node;
  106. this.app = this.view.app;
  107. this.date = date || new Date();
  108. this.today = new Date();
  109. this.days = {};
  110. this.weekBegin = this.app.calendarConfig.weekBegin || 0;
  111. this.load();
  112. },
  113. load: function(){
  114. this.titleNode = new Element("div", {"styles": this.css.calendarTitleNode}).inject(this.container);
  115. this.titleTableContainer = new Element("div", {"styles": this.css.calendarTitleTableContainer}).inject(this.container);
  116. this.scrollNode = new Element("div", {
  117. "styles": this.css.scrollNode
  118. }).inject(this.container);
  119. this.contentWarpNode = new Element("div", {
  120. "styles": this.css.contentWarpNode
  121. }).inject(this.scrollNode);
  122. this.contentContainerNode = new Element("div",{
  123. "styles" : this.css.contentContainerNode
  124. }).inject(this.contentWarpNode);
  125. this.bodyNode = new Element("div", {
  126. "styles": this.css.contentNode
  127. }).inject(this.contentContainerNode);
  128. this.bodyNode.setStyle("position","relative");
  129. //this.bodyNode = new Element("div", {"styles": this.css.calendarBodyNode}).inject(this.container);
  130. this.setTitleNode();
  131. this.setTitleTableNode();
  132. this.setBodyNode();
  133. //this.app.addEvent("resize", this.resetBodySize.bind(this));
  134. },
  135. resetBodySize: function(){
  136. var size = this.container.getSize();
  137. var titleSize = this.titleNode.getSize();
  138. var titleTableSize = this.titleTable.getSize();
  139. var y = size.y-titleSize.y-titleTableSize.y;
  140. //this.bodyNode.setStyle("height", ""+y+"px");
  141. //var size = this.container.getSize();
  142. this.scrollNode.setStyle("height", ""+y+"px");
  143. //this.scrollNode.setStyle("margin-top", "60px");
  144. this.titleTableContainer.setStyles({
  145. "width": (size.x - 40) +"px"
  146. });
  147. if (this.contentWarpNode){
  148. this.contentWarpNode.setStyles({
  149. "width": (size.x - 40) +"px"
  150. });
  151. }
  152. var tableSize = this.calendarTable.getSize();
  153. MWFCalendarMonthView.WeekWidth = tableSize.x;
  154. MWFCalendarMonthView.DayWidth = tableSize.x / 7;
  155. this.dataTdList.each( function( td ){
  156. td.setStyle("width", MWFCalendarMonthView.WeekWidth)
  157. });
  158. if( this.wholeDayDocumentList && this.wholeDayDocumentList.length ){
  159. this.wholeDayDocumentList.each( function( doc ){
  160. doc.resize();
  161. }.bind(this))
  162. }
  163. if( this.oneDayDocumentList && this.oneDayDocumentList.length ){
  164. this.oneDayDocumentList.each( function( doc ){
  165. doc.resize();
  166. }.bind(this))
  167. }
  168. var top = 30; //MWFCalendarMonthView.THHeight + 30;
  169. var trs = this.calendarTable.getElements("tr");
  170. this.calendarTrHeight = [];
  171. for( var key in this.usedYIndex ){
  172. var idx = this.usedYIndex[key];
  173. 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 );
  174. if( maxLength > 4 ){
  175. this.dataTableList[key].setStyle("top", top );
  176. var height = 30 + maxLength * (22 + 2);
  177. top = top + height;
  178. trs[ parseInt(key) ].getElements("td").each( function(td){
  179. td.setStyle("height", height )
  180. });
  181. this.calendarTrHeight.push( height );
  182. }else{
  183. this.dataTableList[key].setStyle("top", top );
  184. top = top + MWFCalendarMonthView.WeekHeight + 1;
  185. trs[ parseInt(key) ].getElements("td").each( function(td){
  186. td.setStyle("height", MWFCalendarMonthView.WeekHeight )
  187. });
  188. this.calendarTrHeight.push( MWFCalendarMonthView.WeekHeight );
  189. }
  190. }
  191. //var tdy = (y-30)/6;
  192. //tdy = tdy-34;
  193. //var tds = this.calendarTable.getElements("td");
  194. //tds.each(function(td){
  195. // var yy = tdy;
  196. // var node = td.getLast("div");
  197. // if (node.childNodes.length>=4){
  198. // if (yy<92) yy = 69;
  199. // }
  200. // node.setStyle("height", ""+yy+"px");
  201. //}.bind(this));
  202. },
  203. setTitleNode: function(){
  204. //this.view.titleContainer.getElements("div:only-child").setStyle("display","none");
  205. //if( this.titleNode ){
  206. // this.titleNode.setStyle("display","")
  207. //}
  208. //this.titleNode = new Element("div").inject(this.view.titleContainer);
  209. this.prevMonthNode = new Element("div", {"styles": this.css.calendarPrevMonthNode}).inject(this.titleNode);
  210. var text = this.date.format(this.app.lp.dateFormatMonth);
  211. this.titleTextNode = new Element("div", {"styles": this.css.calendarTitleTextNode, "text": text}).inject(this.titleNode);
  212. this.nextMonthNode = new Element("div", {"styles": this.css.calendarNextMonthNode}).inject(this.titleNode);
  213. this.prevMonthNode.addEvents({
  214. "mouseover": function(){this.prevMonthNode.setStyles(this.css.calendarPrevMonthNode_over);}.bind(this),
  215. "mouseout": function(){this.prevMonthNode.setStyles(this.css.calendarPrevMonthNode);}.bind(this),
  216. "mousedown": function(){this.prevMonthNode.setStyles(this.css.calendarPrevMonthNode_down);}.bind(this),
  217. "mouseup": function(){this.prevMonthNode.setStyles(this.css.calendarPrevMonthNode_over);}.bind(this),
  218. "click": function(){this.changeMonthPrev();}.bind(this)
  219. });
  220. this.nextMonthNode.addEvents({
  221. "mouseover": function(){this.nextMonthNode.setStyles(this.css.calendarNextMonthNode_over);}.bind(this),
  222. "mouseout": function(){this.nextMonthNode.setStyles(this.css.calendarNextMonthNode);}.bind(this),
  223. "mousedown": function(){this.nextMonthNode.setStyles(this.css.calendarNextMonthNode_down);}.bind(this),
  224. "mouseup": function(){this.nextMonthNode.setStyles(this.css.calendarNextMonthNode_over);}.bind(this),
  225. "click": function(){this.changeMonthNext();}.bind(this)
  226. });
  227. this.titleTextNode.addEvents({
  228. "mouseover": function(){this.titleTextNode.setStyles(this.css.calendarTitleTextNode_over);}.bind(this),
  229. "mouseout": function(){this.titleTextNode.setStyles(this.css.calendarTitleTextNode);}.bind(this),
  230. "mousedown": function(){this.titleTextNode.setStyles(this.css.calendarTitleTextNode_down);}.bind(this),
  231. "mouseup": function(){this.titleTextNode.setStyles(this.css.calendarTitleTextNode_over);}.bind(this),
  232. "click": function(){this.changeMonthSelect();}.bind(this)
  233. });
  234. },
  235. changeMonthPrev: function(){
  236. this.date.decrement("month", 1);
  237. var text = this.date.format(this.app.lp.dateFormatMonth);
  238. this.titleTextNode.set("text", text);
  239. this.reLoadCalendar();
  240. },
  241. changeMonthNext: function(){
  242. this.date.increment("month", 1);
  243. var text = this.date.format(this.app.lp.dateFormatMonth);
  244. this.titleTextNode.set("text", text);
  245. this.reLoadCalendar();
  246. },
  247. changeMonthSelect: function(){
  248. if (!this.monthSelector) this.createMonthSelector();
  249. this.monthSelector.show();
  250. },
  251. createMonthSelector: function(){
  252. this.monthSelector = new MWFCalendarMonthView.MonthSelector(this.date, this);
  253. },
  254. changeMonthTo: function(d){
  255. this.date = d;
  256. var text = this.date.format(this.app.lp.dateFormatMonth);
  257. this.titleTextNode.set("text", text);
  258. this.reLoadCalendar();
  259. },
  260. setTitleTableNode : function(){
  261. if( this.weekBegin == "1" ){
  262. var html = "<tr><th>"+this.app.lp.weeks.Mon+"</th><th>"+this.app.lp.weeks.Tues+"</th><th>"+this.app.lp.weeks.Wed+"</th>" +
  263. "<th>"+this.app.lp.weeks.Thur+"</th><th>"+this.app.lp.weeks.Fri+"</th><th>"+this.app.lp.weeks.Sat+"</th><th>"+this.app.lp.weeks.Sun+"</th></tr>";
  264. }else{
  265. var html = "<tr><th>"+this.app.lp.weeks.Sun+"</th><th>"+this.app.lp.weeks.Mon+"</th><th>"+this.app.lp.weeks.Tues+"</th><th>"+this.app.lp.weeks.Wed+"</th>" +
  266. "<th>"+this.app.lp.weeks.Thur+"</th><th>"+this.app.lp.weeks.Fri+"</th><th>"+this.app.lp.weeks.Sat+"</th></tr>";
  267. }
  268. this.titleTable = new Element("table", {
  269. "styles": this.css.calendarTable,
  270. "height": "100%",
  271. "border": "0",
  272. "cellPadding": "0",
  273. "cellSpacing": "0",
  274. "html": html
  275. }).inject(this.titleTableContainer);
  276. this.calendarTableTitleTr = this.titleTable.getElement("tr");
  277. this.calendarTableTitleTr.setStyles(this.css.calendarTableTitleTr);
  278. var ths = this.calendarTableTitleTr.getElements("th");
  279. ths.setStyles(this.css.calendarTableTh);
  280. },
  281. setBodyNode: function(){
  282. var html = "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
  283. html += "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
  284. html += "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
  285. html += "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
  286. html += "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
  287. html += "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
  288. this.calendarTable = new Element("table", {
  289. "styles": this.css.calendarTable,
  290. "height": "100%",
  291. "border": "0",
  292. "cellPadding": "0",
  293. "cellSpacing": "0",
  294. "html": html
  295. }).inject(this.bodyNode);
  296. this.loadBackgroundCalendar( true );
  297. this.loadDataContainer();
  298. //var tds = this.calendarTable.getElements("td");
  299. //tds.setStyles(this.css.calendarTableCell);
  300. this.loadCalendar();
  301. },
  302. reLoadCalendar: function(){
  303. if( this.wholeDayDocumentList && this.wholeDayDocumentList.length ){
  304. this.wholeDayDocumentList.each( function( doc ){
  305. doc.destroy();
  306. }.bind(this))
  307. }
  308. this.wholeDayDocumentList = [];
  309. if( this.oneDayDocumentList && this.oneDayDocumentList.length ){
  310. this.oneDayDocumentList.each( function( doc ){
  311. doc.destroy();
  312. }.bind(this))
  313. }
  314. this.oneDayDocumentList = [];
  315. this.loadBackgroundCalendar( false );
  316. this.loadCalendar();
  317. },
  318. loadDataContainer : function(){
  319. this.dataTableList = [];
  320. this.dataTdList = [];
  321. [0,1,2,3,4,5,6].each( function( i){
  322. var dataTable = new Element("table.dataTable", {
  323. "styles": this.css.calendarTable,
  324. "border": "0",
  325. "cellPadding": "0",
  326. "cellSpacing": "0",
  327. "index" : i
  328. }).inject(this.bodyNode);
  329. dataTable.setStyles({
  330. //"display" : "none",
  331. "position":"absolute",
  332. "top" : (MWFCalendarMonthView.WeekHeight + 1) * i + MWFCalendarMonthView.THHeight + 30,
  333. "left" : "0px",
  334. "margin": "0px auto 0px 0px"
  335. });
  336. var tr = new Element("tr").inject(dataTable);
  337. var dataTd = new Element( "td" , {
  338. "valign" : "top",
  339. "styles" : {"height":"0px","position":"relative"}
  340. }).inject( tr );
  341. this.dataTableList.push( dataTable );
  342. this.dataTdList.push( dataTd );
  343. }.bind(this))
  344. },
  345. calculateMonthRange : function(){
  346. var date = this.date.clone();
  347. var start = new Date( date.get("year"), date.get("month"), 1, 0, 0, 0 );
  348. var week = start.getDay();
  349. if( this.weekBegin == "1" ){
  350. var decrementDay = ((week-1)<0) ? 6 : week-1;
  351. }else{
  352. var decrementDay = week;
  353. }
  354. start.decrement("day", decrementDay);
  355. this.monthStart = start;
  356. this.monthStartStr = this.monthStart.format("db");
  357. var end = start.clone();
  358. end.increment("day", 41);
  359. this.monthEnd = new Date( end.get("year"), end.get("month"), end.get("date"), 23, 59, 59 );
  360. this.monthEndStr = this.monthEnd.format("db");
  361. this.calculateWeekRange();
  362. },
  363. calculateWeekRange: function(){
  364. this.weekRangeList = [];
  365. var start = this.monthStart.clone();
  366. var end;
  367. for( var i=0; i<6; i++ ){
  368. end = start.clone().increment("day", 6);
  369. end = new Date( end.get("year"), end.get("month"), end.get("date"), 23, 59, 59 );
  370. this.weekRangeList.push( {
  371. start : start,
  372. end : end
  373. });
  374. start = end.clone().increment("second",1);
  375. }
  376. this.weekDaysList = [];
  377. start = this.monthStart.clone();
  378. for( var i=0; i<this.weekRangeList.length; i++ ){
  379. var j =0;
  380. var days = [];
  381. while( j<7 ){
  382. days.push( start.format("%Y-%m-%d") );
  383. start.increment("day",1);
  384. j++;
  385. }
  386. this.weekDaysList.push(days);
  387. }
  388. this.usedYIndex = {};
  389. for( var i=0; i<this.weekRangeList.length; i++ ){
  390. this.usedYIndex[i] = {};
  391. var j =0;
  392. while( j<7 ){
  393. this.usedYIndex[i][j] = [];
  394. j++;
  395. }
  396. }
  397. },
  398. getUserfulYIndex : function( weekIndex, dayNumbersOfWeek ){ //获取指定周的y轴上的占用情况
  399. var yIndex = 0;
  400. var flag = true;
  401. var weekUsed = this.usedYIndex[weekIndex];
  402. while( flag ){
  403. var isContains = false;
  404. for( var j = 0; j<dayNumbersOfWeek.length; j++ ){
  405. if( weekUsed[ dayNumbersOfWeek[j]].contains( yIndex ) ){
  406. isContains = true;
  407. break;
  408. }
  409. }
  410. if( !isContains ){
  411. flag = false;
  412. }else{
  413. yIndex ++;
  414. }
  415. }
  416. for( var j = 0; j<dayNumbersOfWeek.length; j++ ){
  417. weekUsed[ dayNumbersOfWeek[j]].push( yIndex );
  418. }
  419. return yIndex;
  420. },
  421. getDateIndex : function( date ) {
  422. var dateStr = date.format("%Y-%m-%d");
  423. for (var i = 0; i < this.weekDaysList.length; i++) {
  424. var index = this.weekDaysList[i].indexOf(dateStr);
  425. if( index > -1 ){
  426. return {
  427. weekIndex: i,
  428. dayIndex: index
  429. }
  430. }
  431. }
  432. return null;
  433. },
  434. getDateIndexOfWeek : function( weekIndex, days ){
  435. var weekDays = this.weekDaysList[weekIndex];
  436. var indexs = [];
  437. for( var i=0; i<days.length;i++ ){
  438. indexs.push( weekDays.indexOf( days[i] ) );
  439. }
  440. return indexs;
  441. },
  442. inCurrentMonth : function( time ){
  443. return time > this.monthStart && time < this.monthEnd;
  444. },
  445. getTimeRange : function( bDate, eDate ){
  446. if( bDate > this.monthEnd || eDate < this.monthStart )return null;
  447. var range = {
  448. startTime : bDate,
  449. endTime : eDate,
  450. start: ( bDate <= this.monthStart ) ? this.monthStart.clone() : bDate.clone(),
  451. end: ( this.monthEnd <= eDate ) ? this.monthEnd.clone() : eDate.clone()
  452. };
  453. range.firstDay = range.start.clone().clearTime();
  454. range.diff = range.start - range.end;
  455. range.weekInforList = this.getWeekInfor(bDate, eDate);
  456. return range;
  457. },
  458. getWeekInfor : function( startTime, endTime ){
  459. if( startTime > this.monthEnd || endTime < this.monthStart )return null;
  460. var rangeWeekInfor = {};
  461. for( var i=0 ; i<this.weekRangeList.length; i++ ){
  462. var range = this.weekRangeList[i];
  463. if(startTime > range.end || endTime < range.start )continue;
  464. var isStart = startTime >= range.start;
  465. var isEnd = range.end >= endTime;
  466. var start = isStart ? startTime : range.start;
  467. var end = isEnd ? endTime : range.end;
  468. var diff = end - start;
  469. var left = start - range.start;
  470. var days = this.getDaysByRange(start, end);
  471. var daysIndex = this.getDateIndexOfWeek( i, days );
  472. rangeWeekInfor[i] = {
  473. index : i,
  474. isEventStart : isStart,
  475. isEventEnd : isEnd,
  476. start : start,
  477. end : end,
  478. diff : diff,
  479. days : days,
  480. left : left,
  481. daysIndex : daysIndex
  482. };
  483. if( isEnd )break;
  484. }
  485. return rangeWeekInfor;
  486. },
  487. getDaysByRange : function( startTime, endTime ){
  488. var start = startTime.clone();
  489. var end = endTime;
  490. var days = [];
  491. while( start < end ){
  492. days.push( start.clone().format("%Y-%m-%d") );
  493. start.increment()
  494. }
  495. return days;
  496. },
  497. loadCalendar: function(){
  498. this.app.currentDate = this.date.clone();
  499. this.calculateMonthRange();
  500. this.cancelCurrentTd();
  501. this.loadData( function(){
  502. this.loadWholeDay( this.wholeDayData );
  503. this.loadOneDay( this.inOneDayEvents );
  504. this.resetBodySize();
  505. }.bind(this));
  506. },
  507. loadBackgroundCalendar: function( isCreate ){
  508. var date = this.date.clone();
  509. date.set("date", 1);
  510. var week = date.getDay();
  511. if( this.weekBegin == "1" ){
  512. var decrementDay = ((week-1)<0) ? 6 : week-1;
  513. }else{
  514. var decrementDay = week;
  515. }
  516. date.decrement("day", decrementDay);
  517. var tds = this.calendarTable.getElements("td");
  518. tds.each(function(td){
  519. this.loadDay(td, date, isCreate);
  520. date.increment();
  521. }.bind(this));
  522. },
  523. loadData : function( callback ){
  524. this.app.actions.listEventWithFilter( {
  525. calendarIds : this.app.getSelectedCalendarId(),
  526. startTime : this.monthStartStr,
  527. endTime : this.monthEndStr //,
  528. //createPerson : this.app.userName
  529. }, function(json){
  530. this.wholeDayData = ( json.data && json.data.wholeDayEvents ) ? json.data.wholeDayEvents : [];
  531. this.inOneDayEvents = [];
  532. (( json.data && json.data.inOneDayEvents) ? json.data.inOneDayEvents : []).each( function( d ){
  533. if(d.inOneDayEvents.length > 0 ){
  534. this.inOneDayEvents.push( d );
  535. }
  536. }.bind(this));
  537. if(callback)callback();
  538. }.bind(this));
  539. },
  540. loadOneDay: function( data ){
  541. this.oneDayDocumentList = [];
  542. data.each( function( d, i ){
  543. d.inOneDayEvents.each( function( event, i ){
  544. this.oneDayDocumentList.push( new MWFCalendarMonthView.Calendar.InOnDayDocument( this, event, d.eventDate ) );
  545. }.bind(this))
  546. }.bind(this))
  547. },
  548. loadWholeDay: function( data ){
  549. this.wholeDayRange = [];
  550. data.each( function( d , i){
  551. var range = this.getTimeRange( Date.parse(d.startTime), Date.parse(d.endTime ) );
  552. if( !range )return;
  553. range.data = d;
  554. this.wholeDayRange.push( range );
  555. }.bind(this));
  556. this.wholeDayRange.sort( function( range1, range2 ){
  557. if( range1.firstDay > range2.firstDay )return 1;
  558. if( range1.firstDay < range2.firstDay )return -1;
  559. return range1.diff - range2.diff;
  560. }.bind(this));
  561. this.wholeDayDocumentList = [];
  562. this.wholeDayRange.each( function( r ){
  563. this.wholeDayDocumentList.push( new MWFCalendarMonthView.Calendar.WholeDayDocument( this, r ) );
  564. }.bind(this))
  565. },
  566. loadDay: function(td, date, isCreate){
  567. var _self = this;
  568. td.empty();
  569. var type = "thisMonth";
  570. var m = date.get("month");
  571. var y = date.get("year");
  572. var d = date.get("date");
  573. var mm = this.date.get("month");
  574. var yy = this.date.get("year");
  575. var mmm = this.today.get("month");
  576. var yyy = this.today.get("year");
  577. var ddd = this.today.get("date");
  578. if ((m==mmm) && (y==yyy) && (d==ddd)){
  579. type = "today";
  580. }else if ((m==mm) && (y==yy)){
  581. type = "thisMonth";
  582. }else{
  583. type = "otherMonth";
  584. }
  585. //var node = new Element("div", {
  586. // "styles" : this.css["calendarTableCell_"+type]
  587. //}).inject( td );
  588. td.set( "valign","top");
  589. td.setStyles( this.css["calendarTableCell_"+type] );
  590. td.store("dateStr",date.format("%Y-%m-%d"));
  591. td.store("type", type );
  592. if( isCreate ){
  593. td.addEvent("click", function(ev){
  594. this.setCurrentTd( td );
  595. }.bind(this));
  596. td.addEvent("dblclick", function(ev){
  597. _self.cancelCurrentTd();
  598. var form = new MWF.xApplication.Calendar.EventForm(_self,{}, {
  599. startTime : Date.parse( this.retrieve("dateStr") + " 08:00") ,
  600. endTime : Date.parse( this.retrieve("dateStr") + " 09:00")
  601. }, {app:_self.app});
  602. form.view = _self;
  603. form.create();
  604. }.bind(td));
  605. new Drag(td, {
  606. "onStart": function(dragged, e){
  607. this.cancelCurrentTd();
  608. this.cellDragStart(dragged, e);
  609. }.bind(this),
  610. "onDrag": function(dragged, e){
  611. this.cellDrag(dragged, e);
  612. }.bind(this),
  613. "onComplete": function(dragged, e){
  614. this.completeDrag(dragged, e);
  615. }.bind(this)
  616. });
  617. }
  618. var titleNode = new Element("div", {"styles": this.css["dayTitle_"+ type]}).inject(td);
  619. var titleDayNode = new Element("div", {"styles": this.css["dayTitleDay_"+ type], "text": d }).inject(titleNode);
  620. titleDayNode.addEvent("click", function(){
  621. _self.app.toDay( this.date );
  622. }.bind({ date : date.format("%Y-%m-%d") }));
  623. //var contentNode = new Element("div", {"styles": this.css.dayContentNode}).inject(node);
  624. },
  625. setCurrentTd : function(td){
  626. td.setStyle("background-color","#fffdf2");
  627. if( this.currentSelectedTd ){
  628. this.currentSelectedTd.setStyle("background-color",this.currentSelectedTd.retrieve("type")=="today"?"#F8FBFF":"#fff");
  629. }
  630. this.currentSelectedTd = td;
  631. },
  632. cancelCurrentTd : function(){
  633. if( this.currentSelectedTd ){
  634. this.currentSelectedTd.setStyle("background-color",this.currentSelectedTd.retrieve("type")=="today"?"#F8FBFF":"#fff");
  635. }
  636. this.currentSelectedTd = null;
  637. },
  638. //loadDay: function(td, date){
  639. // td.empty();
  640. // var type = "thisMonth";
  641. // var m = date.get("month");
  642. // var y = date.get("year");
  643. // var d = date.get("date");
  644. // var mm = this.date.get("month");
  645. // var yy = this.date.get("year");
  646. // var mmm = this.today.get("month");
  647. // var yyy = this.today.get("year");
  648. // var ddd = this.today.get("date");
  649. //
  650. // if ((m==mmm) && (y==yyy) && (d==ddd)){
  651. // type = "today";
  652. // }else if ((m==mm) && (y==yy)){
  653. // type = "thisMonth";
  654. // }else{
  655. // type = "otherMonth";
  656. // }
  657. //
  658. // var node = new Element("div", {
  659. // "styles" : this.css["calendarTableCell_"+type]
  660. // }).inject( td );
  661. // node.store("dateStr",date.format("%Y-%m-%d"));
  662. //
  663. // node.addEvent("dblclick", function(ev){
  664. // var form = new MWF.xApplication.Calendar.EventForm(this,{}, {
  665. // startTime : Date.parse( ev.target.retrieve("dateStr") + " 08:00") ,
  666. // endTime : Date.parse( ev.target.retrieve("dateStr") + " 09:00")
  667. // }, {app:this.app});
  668. // form.view = this;
  669. // form.create();
  670. // }.bind(this));
  671. //
  672. // new Drag(node, {
  673. // "onStart": function(dragged, e){
  674. // this.cellDragStart(dragged, e);
  675. // }.bind(this),
  676. // "onDrag": function(dragged, e){
  677. // this.cellDrag(dragged, e);
  678. // }.bind(this),
  679. // "onComplete": function(dragged, e){
  680. // this.completeDrag(dragged, e);
  681. // }.bind(this)
  682. // });
  683. //
  684. // var titleNode = new Element("div", {"styles": this.css["dayTitle_"+ type]}).inject(node);
  685. // var titleDayNode = new Element("div", {"styles": this.css["dayTitleDay_"+ type], "text": d }).inject(titleNode);
  686. //
  687. // var contentNode = new Element("div", {"styles": this.css.dayContentNode}).inject(node);
  688. //
  689. //},
  690. reload : function(){
  691. this.view.reload();
  692. },
  693. destroy: function(){
  694. Object.each(this.days, function(day){
  695. day.destroy();
  696. }.bind(this));
  697. this.container.empty();
  698. },
  699. getIndexByPage: function( page ){
  700. var pos = this.calendarTable.getPosition();
  701. var col = (page.x - pos.x ) / MWFCalendarMonthView.DayWidth;
  702. if( col < 0 || col > 7 )return null;
  703. this.pageOffsetHeight = page.y - pos.y;
  704. var y = page.y - pos.y - MWFCalendarMonthView.THHeight;
  705. if( y < 0 )return null;
  706. var row = null;
  707. for( var i = 0; i< this.calendarTrHeight.length; i++ ){
  708. if( y < this.calendarTrHeight[i] ){
  709. row = i;
  710. break;
  711. }else{
  712. y = y - this.calendarTrHeight[i];
  713. }
  714. }
  715. if( row != null ){
  716. return {
  717. row : row,
  718. col : Math.floor(col)
  719. }
  720. }else{
  721. return null;
  722. }
  723. },
  724. getTdsByIndexRange : function( index1, index2 ){
  725. if( this.calendarTableTds ){
  726. var tds = this.calendarTableTds;
  727. }else{
  728. var tds = this.calendarTableTds = this.calendarTable.getElements("td");
  729. }
  730. var minIndex, maxIndex;
  731. if( index1.row == index2.row ){
  732. if( index1.col <= index2.col ){
  733. minIndex = index1;
  734. maxIndex = index2;
  735. }else{
  736. minIndex = index2;
  737. maxIndex = index1;
  738. }
  739. }else if( index1.row < index2.row ){
  740. minIndex = index1;
  741. maxIndex = index2;
  742. }else{
  743. minIndex = index2;
  744. maxIndex = index1;
  745. }
  746. var startIndex = minIndex.row * 7 + minIndex.col;
  747. var endIndex = maxIndex.row * 7 + maxIndex.col;
  748. var result = [];
  749. for( var i=startIndex; i<=endIndex; i++ ){
  750. result.push( tds[i] );
  751. }
  752. return result;
  753. },
  754. cellDragStart: function(td, e){
  755. td.store("index", this.getIndexByPage(e.page ) );
  756. this.scrollNodeHeight = this.scrollNode.getSize().y;
  757. },
  758. cellDrag: function(td, e){
  759. var orgIndex = td.retrieve( "index" );
  760. var curIndex = this.getIndexByPage( e.page );
  761. if( !curIndex )return;
  762. var tds = this.getTdsByIndexRange( orgIndex, curIndex );
  763. if( this.selectedTds ){
  764. this.selectedTds.each( function( td ){
  765. var type = td.retrieve("type");
  766. if( !tds.contains(td) )td.setStyle("background-color", type == "today" ? "#F8FBFF" : "#fff");
  767. }.bind(this));
  768. tds.each( function( td ){
  769. if( !this.selectedTds.contains(td) )td.setStyle("background-color", "#fffdf2");
  770. }.bind(this))
  771. }else{
  772. tds.each( function(td){
  773. td.setStyle("background-color", "#fffdf2");
  774. }.bind(this))
  775. }
  776. var scrollNodeTop = this.scrollNode.getScroll().y;
  777. if(( this.pageOffsetHeight + MWFCalendarMonthView.WeekHeight * 1.5) > ( this.scrollNodeHeight + scrollNodeTop )){
  778. window.setTimeout( function(){
  779. this.scrollNode.scrollTo(0, scrollNodeTop + MWFCalendarMonthView.WeekHeight )
  780. }.bind(this), 200)
  781. }else if( this.pageOffsetHeight - MWFCalendarMonthView.WeekHeight * 1.5 < scrollNodeTop ){
  782. window.setTimeout( function(){
  783. this.scrollNode.scrollTo(0, scrollNodeTop - MWFCalendarMonthView.WeekHeight )
  784. }.bind(this), 200)
  785. }
  786. this.selectedTds = tds
  787. },
  788. completeDrag: function(td, e){
  789. if( this.selectedTds && this.selectedTds.length ){
  790. this.selectedTds.each( function( td ){
  791. var type = td.retrieve("type");
  792. td.setStyle("background-color", type == "today" ? "#F8FBFF" : "#fff");
  793. }.bind(this));
  794. var startTime = this.selectedTds[0].retrieve("dateStr");
  795. var endTime = this.selectedTds.getLast().retrieve("dateStr");
  796. var form = new MWF.xApplication.Calendar.EventForm(this,{}, {
  797. startTime : startTime ,
  798. endTime : endTime,
  799. isWholeday : true
  800. }, {app:this.app});
  801. form.view = this;
  802. form.create();
  803. this.selectedTds = null;
  804. }
  805. }
  806. });
  807. MWFCalendarMonthView.THHeight = 50;
  808. MWFCalendarMonthView.WeekHeight = 140;
  809. MWFCalendarMonthView.WeekWidth;
  810. MWFCalendarMonthView.DayWidth;
  811. MWFCalendarMonthView.Calendar.WholeDayDocument = new Class({
  812. Implements: [Events],
  813. initialize: function(calendar, range){
  814. this.calendar = calendar;
  815. this.view = this.calendar.view;
  816. this.css = this.calendar.css;
  817. this.app = this.calendar.app;
  818. this.range = range;
  819. this.load();
  820. },
  821. load: function(){
  822. this.weekList = [];
  823. Object.each( this.range.weekInforList, function( weekInfor ){
  824. this.weekList.push( new MWFCalendarMonthView.Calendar.WholeDayWeek(this, weekInfor, this.range.data ) )
  825. }.bind(this))
  826. },
  827. setMouseOver : function(){
  828. this.weekList.each( function( week ){
  829. week.mouseover();
  830. }.bind(this))
  831. },
  832. setMouseOut : function(){
  833. this.weekList.each( function( week ){
  834. week.mouseout();
  835. }.bind(this))
  836. },
  837. resize : function(){
  838. this.weekList.each( function( week ){
  839. week.resize();
  840. }.bind(this))
  841. },
  842. destroy : function(){
  843. this.weekList.each( function( week ){
  844. week.destroy();
  845. }.bind(this))
  846. }
  847. });
  848. MWFCalendarMonthView.Calendar.WholeDayWeek = new Class({
  849. Implements: [Events],
  850. initialize: function(document, weekInfor, data){
  851. this.document = document;
  852. this.calendar = document.calendar;
  853. this.view = this.calendar.view;
  854. this.css = this.calendar.css;
  855. this.app = this.calendar.app;
  856. this.weekInfor = weekInfor;
  857. this.data = data;
  858. this.load();
  859. },
  860. load: function(){
  861. this.timeStart = Date.parse( this.data.startTime );
  862. this.timeEnd = Date.parse( this.data.endTime );
  863. this.yIndex = this.calendar.getUserfulYIndex( this.weekInfor.index, this.weekInfor.daysIndex );
  864. this.container = this.getContainer();
  865. this.createNode();
  866. },
  867. createNode : function(){
  868. var lightColor = this.lightColor = MWFCalendar.ColorOptions.getLightColor( this.data.color );
  869. var node = this.node = new Element("div",{
  870. styles : {
  871. position : "absolute",
  872. "overflow" : "hidden",
  873. "height" : "20px",
  874. "line-height" : "20px",
  875. "border-top" : "1px solid " + lightColor,
  876. "border-bottom" : "1px solid " + lightColor,
  877. "background-color": lightColor
  878. },
  879. events : {
  880. click : function(){
  881. var form = new MWF.xApplication.Calendar.EventForm(this, this.data, {
  882. isFull : true
  883. }, {app:this.app});
  884. form.view = this.view;
  885. form.edit();
  886. }.bind(this),
  887. mouseover : function(){
  888. this.document.setMouseOver();
  889. }.bind(this),
  890. mouseout : function(){
  891. this.document.setMouseOut();
  892. }.bind(this)
  893. }
  894. }).inject( this.container );
  895. var coordinate = this.getCoordinate();
  896. node.setStyles(coordinate);
  897. if( this.weekInfor.isEventStart ){
  898. node.setStyles({
  899. "border-left" : "1px solid " + lightColor,
  900. "border-top-left-radius" : "10px",
  901. "border-bottom-left-radius" : "10px"
  902. })
  903. }
  904. if( this.weekInfor.isEventEnd ){
  905. node.setStyles({
  906. "border-right" : "1px solid " + lightColor,
  907. "border-top-right-radius" : "10px",
  908. "border-bottom-right-radius" : "10px"
  909. })
  910. }
  911. if( this.weekInfor.isEventStart ){
  912. this.timeNode = new Element("div",{
  913. styles : {
  914. "font-size" : "10px",
  915. "padding-left" : "2px",
  916. "float" : "left"
  917. },
  918. text : this.timeStart.format("%m-%d %H:%M") + "至" + this.timeEnd.format("%m-%d %H:%M")
  919. }).inject( node );
  920. }
  921. this.titleNode = new Element("div",{
  922. styles : {
  923. "padding-left" : "5px",
  924. "font-size" : "12px",
  925. "float" : "left",
  926. "overflow" : "hidden",
  927. "text-overflow" : "ellipsis",
  928. "white-space" : "nowrap"
  929. },
  930. text : this.data.title
  931. }).inject( node );
  932. this.titleNode.setStyle("width", coordinate.width - ( this.timeNode ? this.timeNode.getSize().x : 0 ) -6 );
  933. //}
  934. this.tooltip = new MWF.xApplication.Calendar.EventTooltip(this.app.content, this.node, this.app, this.data, {
  935. axis : "y", "delay" : 350
  936. });
  937. this.tooltip.view = this.view;
  938. },
  939. getContainer : function(){
  940. return this.calendar.dataTdList[ this.weekInfor.index ]
  941. },
  942. getCoordinate : function(){
  943. var data = this.data;
  944. var infor = this.weekInfor;
  945. var top = this.yIndex * 24;
  946. var width = ( infor.daysIndex.length / 7 ) * MWFCalendarMonthView.WeekWidth - 3;
  947. var left = ( infor.daysIndex[0] / 7 ) * MWFCalendarMonthView.WeekWidth;
  948. //var width = ( infor.diff / MWFCalendarMonthView.WeekMsec ) * MWFCalendarMonthView.WeekWidth - 2;
  949. //var left = ( infor.left / MWFCalendarMonthView.WeekMsec ) * MWFCalendarMonthView.WeekWidth + 3;
  950. return {
  951. top : top + 2,
  952. left : left,
  953. width : width
  954. }
  955. },
  956. mouseover : function(){
  957. this.node.setStyle("border-color", this.data.color );
  958. },
  959. mouseout : function(){
  960. this.node.setStyle("border-color", this.lightColor );
  961. },
  962. resize : function(){
  963. // this.node.setStyles(this.getCoordinate());
  964. var coordinate = this.getCoordinate();
  965. this.node.setStyles( coordinate );
  966. this.titleNode.setStyle("width", coordinate.width - ( this.timeNode ? this.timeNode.getSize().x : 0 ) - 6 );
  967. },
  968. reload: function(){
  969. if( this.tooltip )this.tooltip.destroy();
  970. this.view.reload();
  971. },
  972. destroy : function(){
  973. if( this.tooltip )this.tooltip.destroy();
  974. this.node.destroy();
  975. }
  976. });
  977. MWFCalendarMonthView.Calendar.InOnDayDocument = new Class({
  978. Implements: [Events],
  979. initialize: function(calendar, data, dateStr){
  980. this.calendar = calendar;
  981. this.view = this.calendar.view;
  982. this.css = this.calendar.css;
  983. this.app = this.calendar.app;
  984. this.data = data;
  985. this.dateStr = dateStr;
  986. this.date = Date.parse( dateStr );
  987. this.load();
  988. },
  989. load: function(){
  990. this.timeStart = Date.parse( this.data.startTime );
  991. this.timeEnd = Date.parse( this.data.endTime );
  992. this.index = this.calendar.getDateIndex( this.date );
  993. this.yIndex = this.calendar.getUserfulYIndex( this.index.weekIndex, [this.index.dayIndex] );
  994. this.container = this.getContainer();
  995. this.createNode();
  996. },
  997. createNode : function(){
  998. var lightColor = this.lightColor = MWFCalendar.ColorOptions.getLightColor( this.data.color );
  999. var node = this.node = new Element("div",{
  1000. styles : {
  1001. position : "absolute",
  1002. border : "1px solid "+lightColor,
  1003. "background-color" : lightColor,
  1004. "overflow" : "hidden",
  1005. "height" : "20px",
  1006. "line-height" : "20px",
  1007. "border-radius" : "10px"
  1008. },
  1009. events : {
  1010. click : function(){
  1011. var form = new MWF.xApplication.Calendar.EventForm(this, this.data, {
  1012. isFull : true
  1013. }, {app:this.app});
  1014. form.view = this.view;
  1015. form.edit();
  1016. }.bind(this),
  1017. "mouseover" : function () {
  1018. this.node.setStyle("border-color", this.data.color );
  1019. }.bind(this),
  1020. "mouseout" : function () {
  1021. this.node.setStyle("border-color", this.lightColor );
  1022. }.bind(this)
  1023. }
  1024. }).inject( this.container );
  1025. var coordinate = this.getCoordinate();
  1026. node.setStyles(coordinate);
  1027. //if( this.isFirst ){
  1028. this.timeNode = new Element("div",{
  1029. styles : {
  1030. "font-size" : "10px",
  1031. "padding-left" : "2px",
  1032. "float" : "left"
  1033. },
  1034. text : this.timeStart.format("%H:%M") + "至" + this.timeEnd.format("%H:%M")
  1035. }).inject( node );
  1036. this.titleNode = new Element("div",{
  1037. styles : {
  1038. "padding-left" : "5px",
  1039. "font-size" : "12px",
  1040. "float" : "left",
  1041. "overflow" : "hidden",
  1042. "text-overflow" : "ellipsis",
  1043. "white-space" : "nowrap"
  1044. },
  1045. text : this.data.title
  1046. }).inject( node );
  1047. this.titleNode.setStyle("width", coordinate.width - this.timeNode.getSize().x - 6 );
  1048. //}
  1049. this.tooltip = new MWF.xApplication.Calendar.EventTooltip(this.app.content, this.node, this.app, this.data, {
  1050. axis : "y", "delay" : 350
  1051. });
  1052. this.tooltip.view = this.view;
  1053. },
  1054. getContainer : function(){
  1055. return this.calendar.dataTdList[ this.index.weekIndex ]
  1056. },
  1057. getCoordinate : function(){
  1058. var data = this.data;
  1059. var top = this.yIndex * 24;
  1060. var width = MWFCalendarMonthView.DayWidth - 3;
  1061. var left = this.index.dayIndex * MWFCalendarMonthView.DayWidth;
  1062. //var width = ( infor.diff / MWFCalendarMonthView.WeekMsec ) * MWFCalendarMonthView.WeekWidth - 2;
  1063. //var left = ( infor.left / MWFCalendarMonthView.WeekMsec ) * MWFCalendarMonthView.WeekWidth + 3;
  1064. return {
  1065. top : top + 2,
  1066. left : left,
  1067. width : width
  1068. }
  1069. },
  1070. resize : function(){
  1071. var coordinate = this.getCoordinate();
  1072. this.node.setStyles( coordinate );
  1073. this.titleNode.setStyle("width", coordinate.width - this.timeNode.getSize().x - 6 );
  1074. },
  1075. reload: function(){
  1076. if( this.tooltip )this.tooltip.destroy();
  1077. this.view.reload();
  1078. },
  1079. destroy : function(){
  1080. if( this.tooltip )this.tooltip.destroy();
  1081. this.node.destroy();
  1082. }
  1083. });
  1084. MWFCalendarMonthView.Document = new Class({
  1085. initialize: function(day, data, index){
  1086. this.day = day;
  1087. this.css = this.day.css;
  1088. this.view = this.day.view;
  1089. this.app = this.day.app;
  1090. this.container = this.day.contentNode;
  1091. this.data = data;
  1092. this.index = index;
  1093. this.load();
  1094. },
  1095. load: function(){
  1096. this.nodeStyles = (this.day.type == "today") ? this.css.calendarNode_today : this.css.calendarNode;
  1097. this.node = new Element("div", {
  1098. "styles": this.nodeStyles
  1099. }).inject(this.container);
  1100. this.iconNode = new Element("div", {"styles": this.css.calendarIconNode}).inject(this.node);
  1101. this.timeNode = new Element("div", {"styles": this.css.calendarTimeNode}).inject(this.node);
  1102. this.textNode = new Element("div", {"styles": this.css.calendarTextNode}).inject(this.node);
  1103. var timeStr = Date.parse(this.data.startTime).format("%H:%M");
  1104. this.timeNode.set("text", timeStr);
  1105. this.textNode.set("text", this.data.subject);
  1106. //this.node.set("title", this.data.subject);
  1107. //
  1108. //if (this.data.myWaitAccept){
  1109. // this.iconNode.setStyle("background", "url(/x_component_Calendar/$MonthView/"+this.app.options.style+"/icon/invite.png) no-repeat center center");
  1110. //}
  1111. this.node.addEvents({
  1112. mouseenter : function(){
  1113. this.day.collapseReady = false;
  1114. this.node.setStyles( this.css.calendarNode_over );
  1115. //this.showTooltip();
  1116. }.bind(this),
  1117. mouseleave : function(){
  1118. this.node.setStyles( this.nodeStyles );
  1119. }.bind(this),
  1120. "click": function(){this.openCalendar();}.bind(this)
  1121. });
  1122. this.loadTooltip();
  1123. },
  1124. loadTooltip : function(){
  1125. this.tooltip = new MWF.xApplication.Calendar.EventTooltip(this.app.content, this.node, this.app, this.data, {
  1126. axis : "x",
  1127. hiddenDelay : 300,
  1128. displayDelay : 300,
  1129. onShow : function(){
  1130. this.day.collapseDisable = true;
  1131. }.bind(this),
  1132. onQueryCreate : function(){
  1133. this.day.collapseDisable = true;
  1134. }.bind(this),
  1135. onHide : function(){
  1136. this.day.collapseDisable = false;
  1137. this.day.collapse();
  1138. }.bind(this)
  1139. });
  1140. this.tooltip.view = this.view;
  1141. },
  1142. showTooltip: function( ){
  1143. //if( this.index > 3 && this.day.isCollapse ){
  1144. //}else{
  1145. if( this.tooltip ){
  1146. this.tooltip.load();
  1147. }else{
  1148. this.tooltip = new MWF.xApplication.Calendar.EventTooltip(this.app.content, this.node, this.app, this.data, {
  1149. axis : "x", "delay" : 150
  1150. //onShow : function(){
  1151. // this.day.collapseDisable = true;
  1152. //}.bind(this),
  1153. //onQueryCreate : function(){
  1154. // this.day.collapseDisable = true;
  1155. //}.bind(this),
  1156. //onHide : function(){
  1157. // this.day.collapseDisable = false;
  1158. //}.bind(this)
  1159. });
  1160. this.tooltip.view = this.view;
  1161. this.tooltip.load();
  1162. }
  1163. //}
  1164. },
  1165. openCalendar: function(){
  1166. this.form = new MWF.xApplication.Calendar.CalendarForm(this,this.data, {}, {app:this.app});
  1167. this.form.view = this;
  1168. this.form.open();
  1169. },
  1170. destroy: function(){
  1171. if(this.tooltip)this.tooltip.destroy();
  1172. this.node.destroy();
  1173. MWF.release(this);
  1174. },
  1175. reload: function(){
  1176. this.view.reload();
  1177. }
  1178. });
  1179. MWFCalendarMonthView.MonthSelector = new Class({
  1180. Implements: [Events],
  1181. initialize: function(date, calendar){
  1182. this.calendar = calendar;
  1183. this.css = this.calendar.css;
  1184. this.app = this.calendar.app;
  1185. this.date = date;
  1186. this.year = this.date.get("year");
  1187. this.load();
  1188. },
  1189. load: function(){
  1190. this.monthSelectNode = new Element("div", {"styles": this.css.calendarMonthSelectNode}).inject(this.calendar.container);
  1191. this.monthSelectNode.position({
  1192. relativeTo: this.calendar.titleTextNode,
  1193. position: 'bottomCenter',
  1194. edge: 'upperCenter'
  1195. });
  1196. this.monthSelectNode.addEvent("mousedown", function(e){e.stopPropagation();});
  1197. this.monthSelectTitleNode = new Element("div", {"styles": this.css.calendarMonthSelectTitleNode}).inject(this.monthSelectNode);
  1198. this.monthSelectPrevYearNode = new Element("div", {"styles": this.css.calendarMonthSelectTitlePrevYearNode}).inject(this.monthSelectTitleNode);
  1199. this.monthSelectNextYearNode = new Element("div", {"styles": this.css.calendarMonthSelectTitleNextYearNode}).inject(this.monthSelectTitleNode);
  1200. this.monthSelectTextNode = new Element("div", {"styles": this.css.calendarMonthSelectTitleTextNode}).inject(this.monthSelectTitleNode);
  1201. this.monthSelectTextNode.set("text", this.year);
  1202. var html = "<tr><td></td><td></td><td></td></tr>";
  1203. html += "<tr><td></td><td></td><td></td></tr>";
  1204. html += "<tr><td></td><td></td><td></td></tr>";
  1205. html += "<tr><td></td><td></td><td></td></tr>";
  1206. this.monthSelectTable = new Element("table", {
  1207. "styles": {"margin-top": "10px"},
  1208. "height": "200px",
  1209. "width": "90%",
  1210. "align": "center",
  1211. "border": "0",
  1212. "cellPadding": "0",
  1213. "cellSpacing": "0", //5
  1214. "html": html
  1215. }).inject(this.monthSelectNode);
  1216. //this.loadMonth();
  1217. this.monthSelectBottomNode = new Element("div", {"styles": this.css.calendarMonthSelectBottomNode, "text": this.app.lp.today}).inject(this.monthSelectNode);
  1218. this.setEvent();
  1219. },
  1220. loadMonth: function(){
  1221. this.monthSelectTextNode.set("text", this.year);
  1222. var d = new Date();
  1223. var todayY = d.get("year");
  1224. var todayM = d.get("month");
  1225. var thisY = this.date.get("year");
  1226. var thisM = this.date.get("month");
  1227. var _self = this;
  1228. var tds = this.monthSelectTable.getElements("td");
  1229. tds.each(function(td, idx){
  1230. td.empty();
  1231. td.removeEvents("mouseover");
  1232. td.removeEvents("mouseout");
  1233. td.removeEvents("mousedown");
  1234. td.removeEvents("mouseup");
  1235. td.removeEvents("click");
  1236. var m = idx+1;
  1237. td.store("month", m);
  1238. td.setStyles(this.css.calendarMonthSelectTdNode);
  1239. td.setStyle("background-color", "#FFF");
  1240. if ((this.year == todayY) && (idx == todayM)){
  1241. new Element("div", {
  1242. styles : _self.css.calendarMonthSelectTodayNode,
  1243. text : ""+m+this.app.lp.month
  1244. }).inject( td );
  1245. }else if ((this.year == thisY) && (idx == thisM)){
  1246. //td.setStyle("background-color", "#EEE");
  1247. new Element("div", {
  1248. styles : _self.css.calendarMonthSelectCurrentNode,
  1249. text : ""+m+this.app.lp.month
  1250. }).inject( td );
  1251. }else{
  1252. td.set("text", ""+m+this.app.lp.month);
  1253. }
  1254. td.addEvents({
  1255. "mouseover": function(){this.setStyles(_self.css.calendarMonthSelectTdNode_over);},
  1256. "mouseout": function(){this.setStyles(_self.css.calendarMonthSelectTdNode);},
  1257. "mousedown": function(){this.setStyles(_self.css.calendarMonthSelectTdNode_down);},
  1258. "mouseup": function(){this.setStyles(_self.css.calendarMonthSelectTdNode_over);},
  1259. "click": function(){
  1260. _self.selectedMonth(this);
  1261. }
  1262. });
  1263. }.bind(this));
  1264. },
  1265. setEvent: function(){
  1266. this.monthSelectPrevYearNode.addEvent("click", function(){
  1267. this.prevYear();
  1268. }.bind(this));
  1269. this.monthSelectNextYearNode.addEvent("click", function(){
  1270. this.nextYear();
  1271. }.bind(this));
  1272. this.monthSelectBottomNode.addEvents({
  1273. "mouuseover" : function(){ this.monthSelectBottomNode.setStyles( this.css.calendarMonthSelectBottomNode_over ); }.bind(this),
  1274. "mouuseout" : function(){ this.monthSelectBottomNode.setStyles( this.css.calendarMonthSelectBottomNode ); }.bind(this),
  1275. "click" : function(){ this.todayMonth(); }.bind(this)
  1276. });
  1277. },
  1278. prevYear: function(){
  1279. this.year--;
  1280. if (this.year<1900) this.year=1900;
  1281. this.monthSelectTextNode.set("text", this.year);
  1282. this.loadMonth();
  1283. },
  1284. nextYear: function(){
  1285. this.year++;
  1286. //if (this.year<1900) this.year=1900;
  1287. this.monthSelectTextNode.set("text", this.year);
  1288. this.loadMonth();
  1289. },
  1290. todayMonth: function(){
  1291. var d = new Date();
  1292. this.calendar.changeMonthTo(d);
  1293. this.hide();
  1294. },
  1295. selectedMonth: function(td){
  1296. var m = td.retrieve("month");
  1297. var d = Date.parse(this.year+"/"+m+"/1");
  1298. this.calendar.changeMonthTo(d);
  1299. this.hide();
  1300. },
  1301. show: function(){
  1302. this.date = this.calendar.date;
  1303. this.year = this.date.get("year");
  1304. this.loadMonth();
  1305. this.monthSelectNode.setStyle("display", "block");
  1306. this.hideFun = this.hide.bind(this);
  1307. document.body.addEvent("mousedown", this.hideFun);
  1308. },
  1309. hide: function(){
  1310. this.monthSelectNode.setStyle("display", "none");
  1311. document.body.removeEvent("mousedown", this.hideFun);
  1312. },
  1313. destroy: function(){
  1314. //this.titleNode.destroy();
  1315. //this.titleNode = null;
  1316. //this.titleDayNode = null;
  1317. //this.titleInforNode = null;
  1318. //
  1319. //delete this.calendar.days[this.key];
  1320. //
  1321. //this.node.empty();
  1322. //MWF.release(this);
  1323. }
  1324. });