month.tpl 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. var date = new Date();
  4. var d = date.getDate();
  5. var m = date.getMonth();
  6. var y = date.getFullYear();
  7. $("#dialog-form").dialog({
  8. autoOpen: false,
  9. modal : false,
  10. width : 550,
  11. height : 350
  12. });
  13. var calendar = $('#calendar').fullCalendar({
  14. header: {
  15. left: '',
  16. center: 'title',
  17. right: 'today prev,next month,agendaWeek,agendaDay',
  18. },
  19. buttonText: {$button_text},
  20. monthNames: {$month_names},
  21. monthNamesShort:{$month_names_short},
  22. dayNames: {$day_names},
  23. dayNamesShort: {$day_names_short},
  24. selectable : true,
  25. selectHelper: true,
  26. select: function(start, end, allDay, jsEvent, view) {
  27. /* When selecting one day or several days */
  28. var start_date = Math.round(start.getTime() / 1000);
  29. var end_date = Math.round(end.getTime() / 1000);
  30. if ({$can_add_events} == 1) {
  31. var url = '{$web_agenda_ajax_url}a=add_event&start='+start_date+'&end='+end_date+'&all_day='+allDay+'&view='+view.name;
  32. $('#start_date').html(start.toDateString() + " " + start.toTimeString().substr(0, 8));
  33. if (view.name != 'month') {
  34. $('#start_date').html(start.toDateString() + " " + start.toTimeString().substr(0, 8));
  35. if (start.toDateString() == end.toDateString()) {
  36. $('#end_date').html(' - '+end.toTimeString().substr(0, 8));
  37. } else {
  38. $('#end_date').html(' - '+end.toDateString()+" " + end.toTimeString().substr(0, 8));
  39. }
  40. } else {
  41. $('#start_date').html(start.toDateString());
  42. $('#end_date').html(' - ' + end.toDateString());
  43. }
  44. $('#color_calendar').html('{$type_label}');
  45. $('#color_calendar').addClass('label_tag');
  46. $('#color_calendar').addClass('{$type}_event');
  47. $("#dialog-form").dialog("open");
  48. $("#dialog-form").dialog({
  49. buttons: {
  50. "Add event": function() {
  51. var params = $("#add_event_form").serialize();
  52. $.ajax({
  53. url: url+'&'+params,
  54. success:function(data) {
  55. calendar.fullCalendar("refetchEvents");
  56. calendar.fullCalendar("rerenderEvents");
  57. $("#dialog-form").dialog("close");
  58. }
  59. });
  60. },
  61. },
  62. close: function() {
  63. $("#title").attr('value', '');
  64. $("#content").attr('value', '');
  65. }
  66. });
  67. //prevent the browser to follow the link
  68. return false;
  69. calendar.fullCalendar('unselect');
  70. }
  71. },
  72. eventRender: function(event, element) {
  73. if (event.description) {
  74. element.qtip({
  75. content: event.description,
  76. position: { at:'bottom left'},
  77. });
  78. }
  79. },
  80. eventClick: function(calEvent, jsEvent, view) {
  81. if (calEvent.editable) {
  82. var start_date = Math.round(calEvent.start.getTime() / 1000);
  83. if (calEvent.allDay == 1) {
  84. var end_date = '';
  85. } else {
  86. var end_date = Math.round(calEvent.end.getTime() / 1000);
  87. }
  88. $('#color_calendar').html('{$type_label}');
  89. $('#color_calendar').addClass('label_tag');
  90. $('#color_calendar').addClass('{$type}_event');
  91. $('#start_date').html(calEvent.start.getDate() +"/"+ calEvent.start.getMonth() +"/"+calEvent.start.getFullYear());
  92. if (end_date != '') {
  93. $('#end_date').html(' '+calEvent.end.getDate() +"/"+ calEvent.end.getMonth() +"/"+calEvent.end.getFullYear());
  94. }
  95. $("#title").attr('value', calEvent.title);
  96. $("#content").attr('value', calEvent.description);
  97. $("#dialog-form").dialog("open");
  98. var url = '{$web_agenda_ajax_url}a=edit_event&id='+calEvent.id+'&start='+start_date+'&end='+end_date+'&all_day='+calEvent.allDay+'&view='+view.name;
  99. var delete_url = '{$web_agenda_ajax_url}a=delete_event&id='+calEvent.id;
  100. $("#dialog-form").dialog({
  101. buttons: {
  102. "Edit" : function() {
  103. var params = $("#add_event_form").serialize();
  104. $.ajax({
  105. url: url+'&'+params,
  106. success:function() {
  107. calEvent.title = $("#title").val();
  108. calEvent.start = calEvent.start;
  109. calEvent.end = calEvent.end;
  110. calEvent.allDay = calEvent.allDay;
  111. calEvent.description = $("#content").val();
  112. calendar.fullCalendar('updateEvent',
  113. calEvent,
  114. true // make the event "stick"
  115. );
  116. $("#dialog-form").dialog("close");
  117. }
  118. });
  119. },
  120. "Delete": function() {
  121. $.ajax({
  122. url: delete_url,
  123. success:function() {
  124. calendar.fullCalendar('removeEvents',
  125. calEvent
  126. );
  127. calendar.fullCalendar("refetchEvents");
  128. calendar.fullCalendar("rerenderEvents");
  129. $("#dialog-form").dialog( "close" );
  130. }
  131. });
  132. }
  133. },
  134. close: function() {
  135. $("#title").attr('value', '');
  136. $("#content").attr('value', '');
  137. }
  138. });
  139. }
  140. },
  141. editable: true,
  142. events: "{$web_agenda_ajax_url}a=get_events",
  143. eventDrop: function(event, day_delta, minute_delta, all_day, revert_func) {
  144. $.ajax({
  145. url: '{$web_agenda_ajax_url}',
  146. data: {
  147. a: 'move_event', id: event.id, day_delta: day_delta, minute_delta: minute_delta
  148. }
  149. });
  150. },
  151. axisFormat: 'HH(:mm)',
  152. timeFormat: 'HH:mm{ - HH:mm}',
  153. loading: function(bool) {
  154. if (bool) $('#loading').show();
  155. else $('#loading').hide();
  156. }
  157. });
  158. });
  159. </script>
  160. <div id="dialog-form" style="display:none;">
  161. <div style="width:500px">
  162. <form id="add_event_form" name="form">
  163. <div class="row">
  164. <div class="label">
  165. <label for="date">{"Agenda"|get_lang}</label>
  166. </div>
  167. <div class="formw">
  168. <div id="color_calendar"></div>
  169. </div>
  170. </div>
  171. <div class="row">
  172. <div class="label">
  173. <label for="date">{"Date"|get_lang}</label>
  174. </div>
  175. <div class="formw">
  176. <span id="start_date"></span><span id="end_date"></span>
  177. </div>
  178. </div>
  179. <div class="row">
  180. <div class="label">
  181. <label for="name">{"Title"|get_lang}</label>
  182. </div>
  183. <div class="formw">
  184. <input type="text" name="title" id="title" size="40" />
  185. </div>
  186. </div>
  187. <div class="row">
  188. <div class="label">
  189. <label for="name">{"Description"|get_lang}</label>
  190. </div>
  191. <div class="formw">
  192. <textarea name="content" id="content" cols="40" rows="7"></textarea>
  193. </div>
  194. </div>
  195. </form>
  196. </div>
  197. </div>
  198. <div id='loading' style='position:absolute; display:none'>{"Loading"|get_lang}...</div>
  199. <div id='calendar'></div>