default.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. /* eslint-disable */
  2. function init() {
  3. cal.setCalendars(CalendarList);
  4. setRenderRangeText();
  5. setSchedules();
  6. setEventListener();
  7. }
  8. function getDataAction(target) {
  9. return target.dataset ? target.dataset.action : target.getAttribute('data-action');
  10. }
  11. function setDropdownCalendarType() {
  12. var calendarTypeName = document.getElementById('calendarTypeName');
  13. var calendarTypeIcon = document.getElementById('calendarTypeIcon');
  14. var options = cal.getOptions();
  15. var type = cal.getViewName();
  16. var iconClassName;
  17. if (type === 'day') {
  18. type = 'Daily';
  19. iconClassName = 'calendar-icon ic_view_day';
  20. } else if (type === 'week') {
  21. type = 'Weekly';
  22. iconClassName = 'calendar-icon ic_view_week';
  23. } else if (options.month.visibleWeeksCount === 2) {
  24. type = '2 weeks';
  25. iconClassName = 'calendar-icon ic_view_week';
  26. } else if (options.month.visibleWeeksCount === 3) {
  27. type = '3 weeks';
  28. iconClassName = 'calendar-icon ic_view_week';
  29. } else {
  30. type = 'Monthly';
  31. iconClassName = 'calendar-icon ic_view_month';
  32. }
  33. calendarTypeName.innerHTML = type;
  34. calendarTypeIcon.className = iconClassName;
  35. }
  36. function onClickMenu(e) {
  37. var target = $(e.target).closest('a[role="menuitem"]')[0];
  38. var action = getDataAction(target);
  39. var options = cal.getOptions();
  40. var viewName = '';
  41. switch (action) {
  42. case 'toggle-daily':
  43. viewName = 'day';
  44. break;
  45. case 'toggle-weekly':
  46. viewName = 'week';
  47. break;
  48. case 'toggle-monthly':
  49. options.month.visibleWeeksCount = 0;
  50. viewName = 'month';
  51. break;
  52. case 'toggle-weeks2':
  53. options.month.visibleWeeksCount = 2;
  54. viewName = 'month';
  55. break;
  56. case 'toggle-weeks3':
  57. options.month.visibleWeeksCount = 3;
  58. viewName = 'month';
  59. break;
  60. case 'toggle-narrow-weekend':
  61. options.month.narrowWeekend = !options.month.narrowWeekend;
  62. options.week.narrowWeekend = !options.week.narrowWeekend;
  63. viewName = cal.getViewName();
  64. target.querySelector('input').checked = options.month.narrowWeekend;
  65. break;
  66. case 'toggle-start-day-1':
  67. options.month.startDayOfWeek = options.month.startDayOfWeek ? 0 : 1;
  68. options.week.startDayOfWeek = options.week.startDayOfWeek ? 0 : 1;
  69. viewName = cal.getViewName();
  70. target.querySelector('input').checked = options.month.startDayOfWeek;
  71. break;
  72. case 'toggle-workweek':
  73. options.month.workweek = !options.month.workweek;
  74. options.week.workweek = !options.week.workweek;
  75. viewName = cal.getViewName();
  76. target.querySelector('input').checked = !options.month.workweek;
  77. break;
  78. default:
  79. break;
  80. }
  81. cal.setOptions(options, true);
  82. cal.changeView(viewName, true);
  83. setDropdownCalendarType();
  84. setRenderRangeText();
  85. setSchedules();
  86. }
  87. function onClickNavi(e) {
  88. var action = getDataAction(e.target);
  89. switch (action) {
  90. case 'move-prev':
  91. cal.prev();
  92. break;
  93. case 'move-next':
  94. cal.next();
  95. break;
  96. case 'move-today':
  97. cal.today();
  98. break;
  99. default:
  100. return;
  101. }
  102. setRenderRangeText();
  103. setSchedules();
  104. }
  105. function setRenderRangeText() {
  106. var renderRange = document.getElementById('renderRange');
  107. var options = cal.getOptions();
  108. var viewName = cal.getViewName();
  109. var html = [];
  110. if (viewName === 'day') {
  111. html.push(moment(cal.getDate().getTime()).format('YYYY.MM.DD'));
  112. } else if (viewName === 'month' &&
  113. (!options.month.visibleWeeksCount || options.month.visibleWeeksCount > 4)) {
  114. html.push(moment(cal.getDate().getTime()).format('YYYY.MM'));
  115. } else {
  116. html.push(moment(cal.getDateRangeStart().getTime()).format('YYYY.MM.DD'));
  117. html.push(' ~ ');
  118. html.push(moment(cal.getDateRangeEnd().getTime()).format(' MM.DD'));
  119. }
  120. renderRange.innerHTML = html.join('');
  121. }
  122. function setSchedules() {
  123. cal.clear();
  124. generateSchedule(cal.getViewName(), cal.getDateRangeStart(), cal.getDateRangeEnd());
  125. cal.createSchedules(ScheduleList);
  126. refreshScheduleVisibility();
  127. }
  128. function refreshScheduleVisibility() {
  129. var calendarElements = Array.prototype.slice.call(document.querySelectorAll('#calendarList input'));
  130. CalendarList.forEach(function(calendar) {
  131. cal.toggleSchedules(calendar.id, !calendar.checked, false);
  132. });
  133. cal.render(true);
  134. calendarElements.forEach(function(input) {
  135. var span = input.nextElementSibling;
  136. span.style.backgroundColor = input.checked ? span.style.borderColor : 'transparent';
  137. });
  138. }
  139. resizeThrottled = tui.util.throttle(function() {
  140. cal.render();
  141. }, 50);
  142. function setEventListener() {
  143. $('.dropdown-menu a[role="menuitem"]').on('click', onClickMenu);
  144. $('#menu-navi').on('click', onClickNavi);
  145. window.addEventListener('resize', resizeThrottled);
  146. }
  147. cal.on({
  148. 'clickTimezonesCollapseBtn': function(timezonesCollapsed) {
  149. if (timezonesCollapsed) {
  150. cal.setTheme({
  151. 'week.daygridLeft.width': '77px',
  152. 'week.timegridLeft.width': '77px'
  153. });
  154. } else {
  155. cal.setTheme({
  156. 'week.daygridLeft.width': '60px',
  157. 'week.timegridLeft.width': '60px'
  158. });
  159. }
  160. return true;
  161. }
  162. });
  163. init();