Calendar.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. (function (global, factory) {
  2. if (typeof define === "function" && define.amd) {
  3. define("/App/Calendar", ["exports", "Site", "Config"], factory);
  4. } else if (typeof exports !== "undefined") {
  5. factory(exports, require("Site"), require("Config"));
  6. } else {
  7. var mod = {
  8. exports: {}
  9. };
  10. factory(mod.exports, global.Site, global.Config);
  11. global.AppCalendar = mod.exports;
  12. }
  13. })(this, function (_exports, _Site2, _Config) {
  14. "use strict";
  15. Object.defineProperty(_exports, "__esModule", {
  16. value: true
  17. });
  18. _exports.run = run;
  19. _exports.getInstance = getInstance;
  20. _exports.default = _exports.AppCalendar = void 0;
  21. _Site2 = babelHelpers.interopRequireDefault(_Site2);
  22. var AppCalendar =
  23. /*#__PURE__*/
  24. function (_Site) {
  25. babelHelpers.inherits(AppCalendar, _Site);
  26. function AppCalendar() {
  27. babelHelpers.classCallCheck(this, AppCalendar);
  28. return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(AppCalendar).apply(this, arguments));
  29. }
  30. babelHelpers.createClass(AppCalendar, [{
  31. key: "initialize",
  32. value: function initialize() {
  33. babelHelpers.get(babelHelpers.getPrototypeOf(AppCalendar.prototype), "initialize", this).call(this);
  34. this.$actionToggleBtn = $('.site-action-toggle');
  35. this.$addNewCalendarForm = $('#addNewCalendar').modal({
  36. show: false
  37. });
  38. }
  39. }, {
  40. key: "process",
  41. value: function process() {
  42. babelHelpers.get(babelHelpers.getPrototypeOf(AppCalendar.prototype), "process", this).call(this);
  43. this.handleFullcalendar();
  44. this.handleSelective();
  45. this.handleAction();
  46. this.handleListItem();
  47. this.handleEventList();
  48. }
  49. }, {
  50. key: "handleFullcalendar",
  51. value: function handleFullcalendar() {
  52. var myEvents = [{
  53. title: 'All Day Event',
  54. start: '2016-10-01'
  55. }, {
  56. title: 'Long Event',
  57. start: '2016-10-07',
  58. end: '2016-10-10',
  59. backgroundColor: (0, _Config.colors)('cyan', 600),
  60. borderColor: (0, _Config.colors)('cyan', 600)
  61. }, {
  62. id: 999,
  63. title: 'Repeating Event',
  64. start: '2016-10-09T16:00:00',
  65. backgroundColor: (0, _Config.colors)('red', 600),
  66. borderColor: (0, _Config.colors)('red', 600)
  67. }, {
  68. title: 'Conference',
  69. start: '2016-10-11',
  70. end: '2016-10-13'
  71. }, {
  72. title: 'Meeting',
  73. start: '2016-10-12T10:30:00',
  74. end: '2016-10-12T12:30:00'
  75. }, {
  76. title: 'Lunch',
  77. start: '2016-10-12T12:00:00'
  78. }, {
  79. title: 'Meeting',
  80. start: '2016-10-12T14:30:00'
  81. }, {
  82. title: 'Happy Hour',
  83. start: '2016-10-12T17:30:00'
  84. }, {
  85. title: 'Dinner',
  86. start: '2016-10-12T20:00:00'
  87. }, {
  88. title: 'Birthday Party',
  89. start: '2016-10-13T07:00:00'
  90. }];
  91. var myOptions = {
  92. header: {
  93. left: null,
  94. center: 'prev,title,next',
  95. right: 'month,agendaWeek,agendaDay'
  96. },
  97. defaultDate: '2016-10-12',
  98. selectable: true,
  99. selectHelper: true,
  100. select: function select() {
  101. $('#addNewEvent').modal('show');
  102. },
  103. editable: true,
  104. eventLimit: true,
  105. windowResize: function windowResize(view) {
  106. var width = $(window).outerWidth();
  107. var options = Object.assign({}, myOptions);
  108. options.events = view.calendar.clientEvents();
  109. options.aspectRatio = width < 667 ? 0.5 : 1.35;
  110. $('#calendar').fullCalendar('destroy');
  111. $('#calendar').fullCalendar(options);
  112. },
  113. eventClick: function eventClick(event) {
  114. var color = event.backgroundColor ? event.backgroundColor : (0, _Config.colors)('blue', 600);
  115. $('#editEname').val(event.title);
  116. if (event.start) {
  117. $('#editStarts').datepicker('update', event.start._d);
  118. } else {
  119. $('#editStarts').datepicker('update', '');
  120. }
  121. if (event.end) {
  122. $('#editEnds').datepicker('update', event.end._d);
  123. } else {
  124. $('#editEnds').datepicker('update', '');
  125. }
  126. $('#editColor [type=radio]').each(function () {
  127. var $this = $(this);
  128. var _value = $this.data('color').split('|');
  129. var value = (0, _Config.colors)(_value[0], _value[1]);
  130. if (value === color) {
  131. $this.prop('checked', true);
  132. } else {
  133. $this.prop('checked', false);
  134. }
  135. });
  136. $('#editNewEvent').modal('show').one('hidden.bs.modal', function (e) {
  137. event.title = $('#editEname').val();
  138. var color = $('#editColor [type=radio]:checked').data('color').split('|');
  139. color = (0, _Config.colors)(color[0], color[1]);
  140. event.backgroundColor = color;
  141. event.borderColor = color;
  142. event.start = new Date($('#editStarts').data('datepicker').getDate());
  143. event.end = new Date($('#editEnds').data('datepicker').getDate());
  144. $('#calendar').fullCalendar('updateEvent', event);
  145. });
  146. },
  147. eventDragStart: function eventDragStart() {
  148. $('.site-action').data('actionBtn').show();
  149. },
  150. eventDragStop: function eventDragStop() {
  151. $('.site-action').data('actionBtn').hide();
  152. },
  153. events: myEvents,
  154. droppable: true
  155. };
  156. var _options;
  157. var myOptionsMobile = Object.assign({}, myOptions);
  158. myOptionsMobile.aspectRatio = 0.5;
  159. _options = $(window).outerWidth() < 667 ? myOptionsMobile : myOptions;
  160. $('#editNewEvent').modal();
  161. $('#calendar').fullCalendar(_options);
  162. }
  163. }, {
  164. key: "handleSelective",
  165. value: function handleSelective() {
  166. var member = [{
  167. id: 'uid_1',
  168. name: 'Herman Beck',
  169. avatar: '../../../../global/portraits/1.jpg'
  170. }, {
  171. id: 'uid_2',
  172. name: 'Mary Adams',
  173. avatar: '../../../../global/portraits/2.jpg'
  174. }, {
  175. id: 'uid_3',
  176. name: 'Caleb Richards',
  177. avatar: '../../../../global/portraits/3.jpg'
  178. }, {
  179. id: 'uid_4',
  180. name: 'June Lane',
  181. avatar: '../../../../global/portraits/4.jpg'
  182. }];
  183. var items = [{
  184. id: 'uid_1',
  185. name: 'Herman Beck',
  186. avatar: '../../../../global/portraits/1.jpg'
  187. }, {
  188. id: 'uid_2',
  189. name: 'Caleb Richards',
  190. avatar: '../../../../global/portraits/2.jpg'
  191. }];
  192. $('.plugin-selective').selective({
  193. namespace: 'addMember',
  194. local: member,
  195. selected: items,
  196. buildFromHtml: false,
  197. tpl: {
  198. optionValue: function optionValue(data) {
  199. return data.id;
  200. },
  201. frame: function frame() {
  202. return "<div class=\"".concat(this.namespace, "\">\n ").concat(this.options.tpl.items.call(this), "\n <div class=\"").concat(this.namespace, "-trigger\">\n ").concat(this.options.tpl.triggerButton.call(this), "\n <div class=\"").concat(this.namespace, "-trigger-dropdown\">\n ").concat(this.options.tpl.list.call(this), "\n </div>\n </div>\n </div>");
  203. },
  204. triggerButton: function triggerButton() {
  205. return "<div class=\"".concat(this.namespace, "-trigger-button\"><i class=\"wb-plus\"></i></div>");
  206. },
  207. listItem: function listItem(data) {
  208. return "<li class=\"".concat(this.namespace, "-list-item\"><img class=\"avatar\" src=\"").concat(data.avatar, "\">").concat(data.name, "</li>");
  209. },
  210. item: function item(data) {
  211. return "<li class=\"".concat(this.namespace, "-item\"><img class=\"avatar\" src=\"").concat(data.avatar, "\" title=\"").concat(data.name, "\">").concat(this.options.tpl.itemRemove.call(this), "</li>");
  212. },
  213. itemRemove: function itemRemove() {
  214. return "<span class=\"".concat(this.namespace, "-remove\"><i class=\"wb-minus-circle\"></i></span>");
  215. },
  216. option: function option(data) {
  217. return "<option value=\"".concat(this.options.tpl.optionValue.call(this, data), "\">").concat(data.name, "</option>");
  218. }
  219. }
  220. });
  221. }
  222. }, {
  223. key: "handleAction",
  224. value: function handleAction() {
  225. var _this = this;
  226. this.$actionToggleBtn.on('click', function (e) {
  227. _this.$addNewCalendarForm.modal('show');
  228. e.stopPropagation();
  229. });
  230. }
  231. }, {
  232. key: "handleEventList",
  233. value: function handleEventList() {
  234. $('#addNewEventBtn').on('click', function () {
  235. $('#addNewEvent').modal('show');
  236. });
  237. $('.calendar-list .calendar-event').each(function () {
  238. var $this = $(this);
  239. var color = $this.data('color').split('-');
  240. $this.data('event', {
  241. title: $this.data('title'),
  242. stick: $this.data('stick'),
  243. backgroundColor: (0, _Config.colors)(color[0], color[1]),
  244. borderColor: (0, _Config.colors)(color[0], color[1])
  245. });
  246. $this.draggable({
  247. zIndex: 999,
  248. revert: true,
  249. revertDuration: 0,
  250. appendTo: '.page',
  251. helper: function helper() {
  252. return "<a class=\"fc-day-grid-event fc-event fc-start fc-end\" style=\"background-color:".concat((0, _Config.colors)(color[0], color[1]), ";border-color:").concat((0, _Config.colors)(color[0], color[1]), "\">\n <div class=\"fc-content\">\n <span class=\"fc-title\">").concat($this.data('title'), "</span>\n </div>\n </a>");
  253. }
  254. });
  255. });
  256. }
  257. }, {
  258. key: "handleListItem",
  259. value: function handleListItem() {
  260. this.$actionToggleBtn.on('click', function (e) {
  261. $('#addNewCalendar').modal('show');
  262. e.stopPropagation();
  263. });
  264. $(document).on('click', '[data-tag=list-delete]', function (e) {
  265. bootbox.dialog({
  266. message: 'Do you want to delete the calendar?',
  267. buttons: {
  268. success: {
  269. label: 'Delete',
  270. className: 'btn-danger',
  271. callback: function callback() {// $(e.target).closest('.list-group-item').remove();
  272. }
  273. }
  274. }
  275. });
  276. });
  277. }
  278. }]);
  279. return AppCalendar;
  280. }(_Site2.default);
  281. _exports.AppCalendar = AppCalendar;
  282. var instance = null;
  283. function getInstance() {
  284. if (!instance) {
  285. instance = new AppCalendar();
  286. }
  287. return instance;
  288. }
  289. function run() {
  290. var app = getInstance();
  291. app.run();
  292. }
  293. var _default = AppCalendar;
  294. _exports.default = _default;
  295. });