calendar.html 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. {extend name="common/common2" /}
  2. {block name="main"}
  3. <script src="/static/fullcalendar-3.10.2/lib/jquery.min.js"></script>
  4. <script src='/static/fullcalendar-3.10.2/lib/moment.min.js'></script>
  5. <script src="/static/fullcalendar-3.10.2/fullcalendar.min.js"></script>
  6. <script src="/static/fullcalendar-3.10.2/locale/zh-cn.js"></script>
  7. <link rel="stylesheet" href="/static/fullcalendar-3.10.2/fullcalendar.min.css" />
  8. <link href='/static/fullcalendar-3.10.2/fullcalendar.print.min.css' rel='stylesheet' media='print' />
  9. <style>
  10. .bgstatus{
  11. display: inline-block;
  12. width: 60px;
  13. height: 20px;
  14. line-height: 20px;
  15. color: #fff;
  16. border-radius: 3px;
  17. text-align: center;
  18. }
  19. .bgs0{
  20. background-color: #777777;
  21. }
  22. .bgs1{
  23. background-color: #478fca;
  24. }
  25. .bgs2{
  26. background-color: #69aa46;
  27. }
  28. .bgs3{
  29. background-color: #dd5a43;
  30. }
  31. </style>
  32. <div class="ibox">
  33. <div class="alert alert-info">
  34. 不同颜色的背景代表不同的任务状态:
  35. <span class="bgstatus bgs0">审核中</span>
  36. <!-- <span class="bgstatus bgs1">同意</span>-->
  37. <span class="bgstatus bgs2">同意</span>
  38. <!-- <span class="bgstatus bgs3">未完成</span>-->
  39. </div>
  40. <div class="ibox-content">
  41. <div class="row">
  42. <div class="col-xs-8">
  43. {if $meetingId >0}
  44. <a href="{:url('MeetingRoom/index')}" class="btn btn-sm btn-warning">表格显示</a>
  45. {else /}
  46. <a href="{:url('MeetingApply/index')}" class="btn btn-sm btn-warning">表格显示</a>
  47. {/if}
  48. </div>
  49. </div>
  50. </div>
  51. <div class="ibox-content">
  52. <div class="panel-group">
  53. <div class="panel panel-default">
  54. <div class="panel-heading clearfix">
  55. <div class="btn-group pull-left">
  56. {$m_title}
  57. </div>
  58. </div>
  59. <div class="panel-body">
  60. <div id="calendar"></div>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. {/block}
  67. {block name="script"}
  68. <script>
  69. var meetingId = '{$meetingId}';
  70. var url = "{:url('MeetingApply/taskjson')}?meetingId="+meetingId;
  71. var date = new Date();
  72. var d = date.getDate();
  73. var m = date.getMonth();
  74. var y = date.getFullYear();
  75. var calendar = $('#calendar').fullCalendar({
  76. firstDay: 1,
  77. locale:'zh-cn',
  78. currentTimezone: 'Asia/Shanghai',
  79. eventLimit: false, //多个记录,显示更多查看
  80. buttonText: {
  81. prev: '<',
  82. next: '>',
  83. prevYear: '去年',
  84. nextYear: '明年',
  85. today: '今天',
  86. month: '月',
  87. week: '周',
  88. day: '日'
  89. },
  90. header: {
  91. left: 'prev,next today',
  92. center: 'title',
  93. right: 'month,agendaWeek,agendaDay'
  94. },
  95. events: url,
  96. loading: function(bool) {
  97. if (bool) {
  98. var layerIndex = layer.load(1);
  99. } else {
  100. layer.closeAll('loading');
  101. }
  102. },
  103. eventRender: function(event, element) {
  104. element.html(event.title);
  105. },
  106. editable: false,
  107. selectable: true,
  108. selectHelper: true,
  109. // select: function(start, end, allDay) {
  110. // var start = formatDateTime(new Date(start));
  111. // var end = formatDateTime(new Date(end));
  112. // var addurl = "{:url('DeviceTask/add',[],'')}/id/0?type=1&start=" + start + "&end=" + end;
  113. // lay_open("添加计划任务", addurl);
  114. // calendar.fullCalendar('unselect');
  115. // }
  116. // ,
  117. // eventClick: function(calEvent, jsEvent, view) {
  118. // layer.confirm('请选择您想做的操作', {
  119. // icon: 3,
  120. // btn: ['添加', '编辑', '删除'],
  121. // skin: 'layer-ext-moon',
  122. // btn1: function(index) {
  123. // layer.close(index);
  124. // var start = formatDateTime(new Date(calEvent.start));
  125. // var end = formatDateTime(new Date(calEvent.end));
  126. // var addurl = "{:url('DeviceTask/add',[],'')}/id/0?type=1&start=" + start + "&end=" + end;
  127. // lay_open("添加计划任务", addurl);
  128. // calendar.fullCalendar('unselect');
  129. // },
  130. // btn2: function(index) {
  131. // layer.close(index);
  132. // var editurl = "{:url('DeviceTask/add',[],'')}/id/"+calEvent.taskid+"?type=1";
  133. // lay_open("编辑/查看", editurl);
  134. // },
  135. // btn3: function(index) {
  136. // layer.close(index);
  137. // layer.confirm('您确定要删除?', {
  138. // icon: 3,
  139. // btn: ['删除', '取消'],
  140. // skin: 'layer-ext-moon',
  141. // yes: function (index2) {
  142. // layer.close(index2);
  143. // $.ajax({
  144. // url: '{:url("DeviceTask/del",[],"")}/id/' + calEvent.taskid,
  145. // type: "GET",
  146. // success: function (result) {
  147. // if (result.code == 1) {
  148. // calendar.fullCalendar('removeEvents', function (ev) {
  149. // return (ev._id == calEvent._id);
  150. // });
  151. // } else {
  152. // layer.alert(result.msg, {
  153. // icon: 2,
  154. // skin: 'layer-ext-moon',
  155. // yes: function (index3) {
  156. // layer.close(index3);
  157. // }
  158. // });
  159. // }
  160. // },
  161. // error: function (result) {
  162. // layer.alert('请求出错,请重试', {
  163. // icon: 2,
  164. // skin: 'layer-ext-moon',
  165. // yes: function (index3) {
  166. // layer.close(index3);
  167. // }
  168. // });
  169. // }
  170. // });
  171. // }
  172. // });
  173. // }
  174. // });
  175. // }
  176. });
  177. var formatDateTime = function(date) {
  178. date = new Date(date.getTime() + date.getTimezoneOffset() * 60000);
  179. var y = date.getFullYear();
  180. var m = date.getMonth() + 1;
  181. m = m < 10 ? ('0' + m) : m;
  182. var d = date.getDate();
  183. d = d < 10 ? ('0' + d) : d;
  184. var h = date.getHours();
  185. h = h < 10 ? ('0' + h) : h;
  186. var minute = date.getMinutes();
  187. minute = minute < 10 ? ('0' + minute) : minute;
  188. var second = date.getSeconds();
  189. second = second < 10 ? ('0' + second) : second;
  190. return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
  191. };
  192. function lay_open (title,url) {
  193. layer.open({
  194. type: 2,
  195. title: title,
  196. shadeClose: true,
  197. shade: 0.3,
  198. maxmin: true,
  199. area: ['90%', '90%'],
  200. content: url,
  201. end: function () {
  202. }
  203. });
  204. }
  205. </script>
  206. {/block}