calendar.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. var Calendar = function () {
  2. return {
  3. //main function to initiate the module
  4. init: function () {
  5. App.addResponsiveHandler(function () {
  6. Calendar.initCalendar();
  7. });
  8. $('.page-sidebar .sidebar-toggler').click(function () {
  9. Calendar.initCalendar();
  10. });
  11. Calendar.initCalendar();
  12. },
  13. initCalendar: function () {
  14. if (!jQuery().fullCalendar) {
  15. return;
  16. }
  17. var date = new Date();
  18. var d = date.getDate();
  19. var m = date.getMonth();
  20. var y = date.getFullYear();
  21. var h = {};
  22. if (App.isRTL()) {
  23. if ($('#calendar').parents(".portlet").width() <= 720) {
  24. $('#calendar').addClass("mobile");
  25. h = {
  26. right: 'title, prev, next',
  27. center: '',
  28. right: 'agendaDay, agendaWeek, month, today'
  29. };
  30. } else {
  31. $('#calendar').removeClass("mobile");
  32. h = {
  33. right: 'title',
  34. center: '',
  35. left: 'agendaDay, agendaWeek, month, today, prev,next'
  36. };
  37. }
  38. } else {
  39. if ($('#calendar').parents(".portlet").width() <= 720) {
  40. $('#calendar').addClass("mobile");
  41. h = {
  42. left: 'title, prev, next',
  43. center: '',
  44. right: 'today,month,agendaWeek,agendaDay'
  45. };
  46. } else {
  47. $('#calendar').removeClass("mobile");
  48. h = {
  49. left: 'title',
  50. center: '',
  51. right: 'prev,next,today,month,agendaWeek,agendaDay'
  52. };
  53. }
  54. }
  55. var initDrag = function (el) {
  56. // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
  57. // it doesn't need to have a start or end
  58. var eventObject = {
  59. title: $.trim(el.text()) // use the element's text as the event title
  60. };
  61. // store the Event Object in the DOM element so we can get to it later
  62. el.data('eventObject', eventObject);
  63. // make the event draggable using jQuery UI
  64. el.draggable({
  65. zIndex: 999,
  66. revert: true, // will cause the event to go back to its
  67. revertDuration: 0 // original position after the drag
  68. });
  69. }
  70. var addEvent = function (title) {
  71. title = title.length == 0 ? "Untitled Event" : title;
  72. var html = $('<div class="external-event label">' + title + '</div>');
  73. jQuery('#event_box').append(html);
  74. initDrag(html);
  75. }
  76. $('#external-events div.external-event').each(function () {
  77. initDrag($(this))
  78. });
  79. $('#event_add').unbind('click').click(function () {
  80. var title = $('#event_title').val();
  81. addEvent(title);
  82. });
  83. //predefined events
  84. $('#event_box').html("");
  85. addEvent("My Event 1");
  86. addEvent("My Event 2");
  87. addEvent("My Event 3");
  88. addEvent("My Event 4");
  89. addEvent("My Event 5");
  90. addEvent("My Event 6");
  91. $('#calendar').fullCalendar('destroy'); // destroy the calendar
  92. $('#calendar').fullCalendar({ //re-initialize the calendar
  93. header: h,
  94. slotMinutes: 15,
  95. editable: true,
  96. droppable: true, // this allows things to be dropped onto the calendar !!!
  97. drop: function (date, allDay) { // this function is called when something is dropped
  98. // retrieve the dropped element's stored Event Object
  99. var originalEventObject = $(this).data('eventObject');
  100. // we need to copy it, so that multiple events don't have a reference to the same object
  101. var copiedEventObject = $.extend({}, originalEventObject);
  102. // assign it the date that was reported
  103. copiedEventObject.start = date;
  104. copiedEventObject.allDay = allDay;
  105. copiedEventObject.className = $(this).attr("data-class");
  106. // render the event on the calendar
  107. // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
  108. $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
  109. // is the "remove after drop" checkbox checked?
  110. if ($('#drop-remove').is(':checked')) {
  111. // if so, remove the element from the "Draggable Events" list
  112. $(this).remove();
  113. }
  114. },
  115. events: [{
  116. title: 'All Day Event',
  117. start: new Date(y, m, 1),
  118. backgroundColor: App.getLayoutColorCode('yellow')
  119. }, {
  120. title: 'Long Event',
  121. start: new Date(y, m, d - 5),
  122. end: new Date(y, m, d - 2),
  123. backgroundColor: App.getLayoutColorCode('green')
  124. }, {
  125. title: 'Repeating Event',
  126. start: new Date(y, m, d - 3, 16, 0),
  127. allDay: false,
  128. backgroundColor: App.getLayoutColorCode('red')
  129. }, {
  130. title: 'Repeating Event',
  131. start: new Date(y, m, d + 4, 16, 0),
  132. allDay: false,
  133. backgroundColor: App.getLayoutColorCode('green')
  134. }, {
  135. title: 'Meeting',
  136. start: new Date(y, m, d, 10, 30),
  137. allDay: false,
  138. }, {
  139. title: 'Lunch',
  140. start: new Date(y, m, d, 12, 0),
  141. end: new Date(y, m, d, 14, 0),
  142. backgroundColor: App.getLayoutColorCode('grey'),
  143. allDay: false,
  144. }, {
  145. title: 'Birthday Party',
  146. start: new Date(y, m, d + 1, 19, 0),
  147. end: new Date(y, m, d + 1, 22, 30),
  148. backgroundColor: App.getLayoutColorCode('purple'),
  149. allDay: false,
  150. }, {
  151. title: 'Click for Google',
  152. start: new Date(y, m, 28),
  153. end: new Date(y, m, 29),
  154. backgroundColor: App.getLayoutColorCode('yellow'),
  155. url: 'http://google.com/',
  156. }
  157. ]
  158. });
  159. }
  160. };
  161. }();