sapp-common-package-test-final 1.0.10 → 1.0.12

package/dist/index.modern.js

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import React, { useState, useEffect, useMemo } from 'react';
-import { DatePicker, Tooltip, Table, Select, Calendar } from 'antd';
+import { DatePicker, Select, Calendar, Tooltip, Table } from 'antd';
 import clsx$1, { clsx } from 'clsx';
 import isBetween from 'dayjs/plugin/isBetween';
 
@@ -56,7 +56,6 @@ var useEffectAfterMounted = function useEffectAfterMounted(callback, dependencie
   }, dependencies);
 };
 
-var HOURS_PER_DAY = 24;
 var MINUTES_PER_HOUR = 60;
 var TIME_FORMAT = 'HH:mm';
 var DAYS_OF_WEEK;
@@ -69,6 +68,37 @@ var DAYS_OF_WEEK;
   DAYS_OF_WEEK["Saturday"] = "Saturday";
   DAYS_OF_WEEK["Sunday"] = "Sunday";
 })(DAYS_OF_WEEK || (DAYS_OF_WEEK = {}));
+var DAYS_OF_WEEK_SHORTEN;
+(function (DAYS_OF_WEEK_SHORTEN) {
+  DAYS_OF_WEEK_SHORTEN["Monday"] = "Mon";
+  DAYS_OF_WEEK_SHORTEN["Tuesday"] = "Tue";
+  DAYS_OF_WEEK_SHORTEN["Wednesday"] = "Wed";
+  DAYS_OF_WEEK_SHORTEN["Thursday"] = "Thur";
+  DAYS_OF_WEEK_SHORTEN["Friday"] = "Fri";
+  DAYS_OF_WEEK_SHORTEN["Saturday"] = "Sat";
+  DAYS_OF_WEEK_SHORTEN["Sunday"] = "Sun";
+})(DAYS_OF_WEEK_SHORTEN || (DAYS_OF_WEEK_SHORTEN = {}));
+var HOUR_OF_DAY;
+(function (HOUR_OF_DAY) {
+  HOUR_OF_DAY["07:00"] = "07:00";
+  HOUR_OF_DAY["08:00"] = "08:00";
+  HOUR_OF_DAY["09:00"] = "09:00";
+  HOUR_OF_DAY["10:00"] = "10:00";
+  HOUR_OF_DAY["11:00"] = "11:00";
+  HOUR_OF_DAY["12:00"] = "12:00";
+  HOUR_OF_DAY["13:00"] = "13:00";
+  HOUR_OF_DAY["14:00"] = "14:00";
+  HOUR_OF_DAY["15:00"] = "15:00";
+  HOUR_OF_DAY["16:00"] = "16:00";
+  HOUR_OF_DAY["17:00"] = "17:00";
+  HOUR_OF_DAY["18:00"] = "18:00";
+  HOUR_OF_DAY["19:00"] = "19:00";
+  HOUR_OF_DAY["20:00"] = "20:00";
+  HOUR_OF_DAY["21:00"] = "21:00";
+  HOUR_OF_DAY["22:00"] = "22:00";
+  HOUR_OF_DAY["23:00"] = "23:00";
+  HOUR_OF_DAY["24:00"] = "24:00";
+})(HOUR_OF_DAY || (HOUR_OF_DAY = {}));
 var EVENT_TYPES;
 (function (EVENT_TYPES) {
   EVENT_TYPES["TEACHING"] = "TEACHING";
@@ -80,6 +110,16 @@ var FORMAT_DATE_CARLENDA = {
   MONTH_AND_WEEK: 'MMMM, YYYY',
   DATE: 'MMMM DD, YYYY'
 };
+var LEARNING_MODE;
+(function (LEARNING_MODE) {
+  LEARNING_MODE["ONLINE"] = "ONLINE";
+  LEARNING_MODE["LIVE_ONLINE"] = "LIVE_ONLINE";
+  LEARNING_MODE["OFFLINE"] = "OFFLINE";
+  LEARNING_MODE["CASE_STUDY"] = "CASE_STUDY";
+  LEARNING_MODE["HOLIDAY"] = "HOLIDAY";
+  LEARNING_MODE["OVERDUE"] = "OVERDUE";
+  LEARNING_MODE["TEST"] = "TEST";
+})(LEARNING_MODE || (LEARNING_MODE = {}));
 
 var _convertType;
 var customDateFormat = function customDateFormat(value, formatStr) {
@@ -87,6 +127,7 @@ var customDateFormat = function customDateFormat(value, formatStr) {
 };
 var convertType = (_convertType = {}, _convertType[EVENT_TYPES.TEACHING] = 'info', _convertType[EVENT_TYPES.BUSY] = 'error', _convertType[EVENT_TYPES.TIME_OFF] = 'warning', _convertType[EVENT_TYPES.OTHER] = 'success', _convertType);
 var daysOfWeekKeys = Object.values(DAYS_OF_WEEK);
+var hoursOfDayKeys = Object.values(HOUR_OF_DAY);
 var calculateNormOfWeek = function calculateNormOfWeek(norms, events, startDate, endDate) {
   var norm = norms.find(function (norm) {
     return startDate.isBetween(norm.startDate, norm.endDate, 'day', '[]') && endDate.isBetween(norm.startDate, norm.endDate, 'day', '[]');
@@ -366,7 +407,7 @@ var HiddenEyeIcon = function HiddenEyeIcon() {
   }));
 };
 
-var styles = {"flex":"_2hGgU","transform":"_3-Pu9","cursor-pointer":"_2Mcv6","rounded-none":"_3EfQZ","border-gray-4":"_3-NVJ","bg-button":"_3-gs3","bg-info/10":"_2ENMR","bg-white":"_rF-HF","!text-error":"_3mBZd","text-black":"_Irb_H","text-gray-600":"_1pL5w","text-info":"_NLvfI","text-secondary-text":"_H-zEU","filter":"_p0OEu","sapp-calendar":"_18t93","btn":"_1oiD_","icon":"_-E7rn","btn-default":"_3WrnL","btn-primary":"_2-qBL","event-info":"_xYqjb","event-warning":"_1oq3N","event-success":"_1hTMm","event-error":"_1hEJk","event-default":"_8FWXy","sapp-calendar__container":"_102cL","header-calendar":"_3Yvs5","header-calendar__nav":"_18m93","header-calendar__date-picker":"_2GTYD","header-calendar__title":"_35LQ0","header-calendar__controls":"_FqVqb","header-calendar__divider":"_3kHog","monthly-calendar":"_2NDGW","weekly-calendar":"_1QrJs","monthly-calendar__title":"_3Tsy4","monthly-calendar__title-active":"_1Dyjm","weekly-norm__cell":"_sGK9m","weekly-norm__value":"_1Jsb-","monthly-calendar__cell":"_2hVZ4","monthly-calendar__cell--active":"_1uenJ","calendar-tooltip":"_2Uo1f","monthly-event__title":"_2gsg7","monthly-event__date":"_2GtPn","weekly-calendar__title":"_5WuQ8","weekly-calendar__cell":"_3lPkV","weekly-event":"_hnHem","weekly-event__title":"_21a0T","weekly-event__date":"_PiKmX","weekly-event--collapse":"_1pvXT","btn-lms-default":"_1GA3p","text-lms-primary":"_1gLzS","select-mode":"_12I9I","ant-select-dropdown-placement-bottomLeft":"_1ZvuX"};
+var styles = {"flex":"_2hGgU","transform":"_3-Pu9","cursor-pointer":"_2Mcv6","rounded-none":"_3EfQZ","border-gray-4":"_3-NVJ","bg-button":"_3-gs3","bg-info/10":"_2ENMR","bg-white":"_rF-HF","!text-error":"_3mBZd","text-black":"_Irb_H","text-gray-600":"_1pL5w","text-info":"_NLvfI","text-secondary-text":"_H-zEU","filter":"_p0OEu","sapp-calendar":"_18t93","btn":"_1oiD_","icon":"_-E7rn","btn-default":"_3WrnL","btn-primary":"_2-qBL","event-info":"_xYqjb","event-warning":"_1oq3N","event-success":"_1hTMm","event-error":"_1hEJk","event-default":"_8FWXy","sapp-calendar__container":"_102cL","header-calendar":"_3Yvs5","header-calendar__nav":"_18m93","header-calendar__date-picker":"_2GTYD","header-calendar__title":"_35LQ0","header-calendar__controls":"_FqVqb","header-calendar__divider":"_3kHog","monthly-calendar":"_2NDGW","weekly-calendar":"_1QrJs","monthly-calendar__title":"_3Tsy4","monthly-calendar__title-active":"_1Dyjm","weekly-norm__cell":"_sGK9m","weekly-norm__value":"_1Jsb-","monthly-calendar__cell":"_2hVZ4","monthly-calendar__cell--active":"_1uenJ","calendar-tooltip":"_2Uo1f","monthly-event__title":"_2gsg7","monthly-event__date":"_2GtPn","weekly-calendar__title":"_5WuQ8","weekly-calendar__cell":"_3lPkV","weekly-event":"_hnHem","weekly-event__title":"_21a0T","weekly-event__date":"_PiKmX","weekly-event--collapse":"_1pvXT","btn-lms-default":"_1GA3p","text-lms-primary":"_1gLzS","select-mode":"_12I9I","ant-select-dropdown-placement-bottomLeft":"_1ZvuX","header-calendar_filter":"_1fd_Y","lms-calendar__tablet":"_1sVO3"};
 
 var Button = function Button(_ref) {
   var _ref$type = _ref.type,
@@ -454,234 +495,6 @@ var HeaderCalendar = function HeaderCalendar(_ref) {
   }, "Week")));
 };
 
-var CustomTooltip = function CustomTooltip(_ref) {
-  var title = _ref.title,
-    children = _ref.children,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'top' : _ref$placement;
-  return React.createElement(Tooltip, {
-    color: '#ffffff',
-    title: React.createElement("div", {
-      className: styles['text-gray-600']
-    }, title),
-    placement: placement
-  }, React.createElement("div", null, children));
-};
-
-var _getIconEvent;
-var calculateBoxSize = function calculateBoxSize(startTime, endTime, isAllDay) {
-  if (isAllDay) {
-    return {
-      top: 10,
-      height: 50
-    };
-  }
-  var minutes = dayjs(startTime).minute();
-  var diffMinutes = dayjs(endTime).diff(startTime, 'minute', true);
-  return {
-    top: Math.floor(minutes / MINUTES_PER_HOUR * 100),
-    height: Math.floor(diffMinutes / MINUTES_PER_HOUR * 100)
-  };
-};
-var getIconEvent = (_getIconEvent = {}, _getIconEvent[EVENT_TYPES.TEACHING] = React.createElement(Book, null), _getIconEvent[EVENT_TYPES.BUSY] = React.createElement(CalendarDelete, null), _getIconEvent[EVENT_TYPES.TIME_OFF] = React.createElement(Star, null), _getIconEvent[EVENT_TYPES.OTHER] = React.createElement(CalendarAccept, null), _getIconEvent);
-var MIN_HEIGHT_HIDE_DETAILS = 140;
-var MIN_HEIGHT_HIDE_ALL = 105;
-var WeeklyEvent = function WeeklyEvent(_ref) {
-  var event = _ref.event,
-    onOpenDetail = _ref.onOpenDetail,
-    onEventDetail = _ref.onEventDetail;
-  var _calculateBoxSize = calculateBoxSize(event.startDate, event.endDate, event.isAllDay),
-    top = _calculateBoxSize.top,
-    height = _calculateBoxSize.height;
-  var formattedDate = customDateFormat(event.startDate, TIME_FORMAT) + ' - ' + customDateFormat(event.endDate, TIME_FORMAT);
-  return React.createElement("div", {
-    className: styles["event-" + convertType[event.type]],
-    onClick: function onClick() {
-      onOpenDetail(dayjs(event.startDate).toDate(), [event]);
-      onEventDetail && onEventDetail(event);
-    },
-    style: {
-      top: top + "%",
-      height: height + "%",
-      zIndex: event.type === EVENT_TYPES.BUSY ? 2 : 1
-    }
-  }, React.createElement("div", {
-    className: clsx$1(styles['weekly-event'], height <= MIN_HEIGHT_HIDE_ALL && styles['weekly-event--collapse'])
-  }, React.createElement("div", {
-    className: styles.flex
-  }, getIconEvent[event.type]), React.createElement("div", {
-    className: clsx$1(height <= MIN_HEIGHT_HIDE_DETAILS && styles['weekly-event--collapse'])
-  }, React.createElement("div", {
-    className: styles['weekly-event__title']
-  }, React.createElement(CustomTooltip, {
-    title: event.title
-  }, event.title)), React.createElement("div", {
-    className: styles['weekly-event__date']
-  }, React.createElement(CustomTooltip, {
-    title: formattedDate
-  }, formattedDate)))));
-};
-
-var WeeklyCell = function WeeklyCell(_ref) {
-  var events = _ref.events,
-    date = _ref.date,
-    onOpenDetail = _ref.onOpenDetail,
-    onOpenCreate = _ref.onOpenCreate,
-    onEventDetail = _ref.onEventDetail;
-  var isToday = dayjs().isSame(date, 'day');
-  var handleOpenCreateModal = function handleOpenCreateModal(e) {
-    if (e.target !== e.currentTarget) return;
-    onOpenCreate(dayjs(date).toDate());
-  };
-  events.sort(function (a, b) {
-    return a.type === EVENT_TYPES.BUSY && b.type !== EVENT_TYPES.BUSY ? 1 : -1;
-  });
-  var renderWeeklyEvent = useMemo(function () {
-    var isAllDay = events.some(function (item) {
-      return item.isAllDay;
-    });
-    if (isAllDay && events.length > 1) {
-      return React.createElement(React.Fragment, null, React.createElement(WeeklyEvent, {
-        event: events[0],
-        onOpenDetail: onOpenDetail,
-        onEventDetail: onEventDetail
-      }), React.createElement("div", {
-        className: styles['see-more']
-      }, React.createElement(CustomTooltip, {
-        placement: 'bottom',
-        title: React.createElement("div", {
-          className: styles['calendar-tooltip']
-        }, events.slice(1, events.length).map(function (event, index) {
-          return React.createElement(WeeklyEvent, {
-            event: event,
-            onOpenDetail: onOpenDetail,
-            onEventDetail: onEventDetail,
-            key: index + 1
-          });
-        }))
-      }, "+", Math.max(events.length - 1, 0), " More")));
-    }
-    return events.map(function (event, index) {
-      return React.createElement(WeeklyEvent, {
-        key: index,
-        event: event,
-        onOpenDetail: onOpenDetail,
-        onEventDetail: onEventDetail
-      });
-    });
-  }, [events]);
-  return React.createElement("div", {
-    className: styles['weekly-calendar__cell'] + " " + (isToday ? styles['bg-info/10'] : styles['bg-white']),
-    onClick: handleOpenCreateModal
-  }, renderWeeklyEvent);
-};
-
-dayjs.extend(isBetween);
-var getEventAllDay = function getEventAllDay(events, targetDate) {
-  return daysOfWeekKeys.reduce(function (acc, day, index) {
-    var currentDate = targetDate.add(index, 'day');
-    acc[day] = {
-      events: events.reduce(function (filteredEvents, event) {
-        if (dayjs(event.startDate).isSame(currentDate.startOf('day')) && checkIsAllday(dayjs(event.startDate), dayjs(event.endDate))) {
-          filteredEvents.push(_extends({}, event, {
-            isAllDay: true
-          }));
-        }
-        return filteredEvents;
-      }, []),
-      date: currentDate
-    };
-    return acc;
-  }, {});
-};
-var getEventsOfDay = function getEventsOfDay(events, targetHour) {
-  return daysOfWeekKeys.reduce(function (acc, day, index) {
-    var currentDate = targetHour.add(index, 'day');
-    acc[day] = {
-      events: events.filter(function (event) {
-        return dayjs(event.startDate).isSame(currentDate, 'hour') && !checkIsAllday(dayjs(event.startDate), dayjs(event.endDate));
-      }),
-      date: currentDate
-    };
-    return acc;
-  }, {});
-};
-var WeeklyCalendar = function WeeklyCalendar(_ref) {
-  var startDate = _ref.startDate,
-    endDate = _ref.endDate,
-    events = _ref.events,
-    norms = _ref.norms,
-    showWeeklyNorm = _ref.showWeeklyNorm,
-    onOpenDetail = _ref.onOpenDetail,
-    onOpenCreate = _ref.onOpenCreate,
-    onEventDetail = _ref.onEventDetail,
-    loading = _ref.loading;
-  var getTableColumns = function getTableColumns() {
-    var _calculateNormOfWeek = calculateNormOfWeek(norms, events, startDate, endDate),
-      normOfWeek = _calculateNormOfWeek.normOfWeek,
-      totalNorm = _calculateNormOfWeek.totalNorm;
-    var hourColumn = {
-      title: React.createElement("div", {
-        className: styles['weekly-calendar__title']
-      }, showWeeklyNorm && React.createElement(React.Fragment, null, React.createElement("div", null, "Weekly Norm"), React.createElement("div", {
-        className: clsx$1(normOfWeek > totalNorm && styles['!text-error'])
-      }, normOfWeek + "/" + totalNorm))),
-      dataIndex: 'hour',
-      key: 'hour',
-      width: 1,
-      render: function render(value) {
-        return React.createElement("div", null, value);
-      }
-    };
-    var dayColumns = Object.values(DAYS_OF_WEEK).map(function (day, index) {
-      return {
-        title: React.createElement("div", {
-          className: styles['weekly-calendar__title']
-        }, React.createElement("div", null, day.slice(0, 3)), React.createElement("div", null, dayjs(startDate).add(index, 'day').format('DD/MM'))),
-        dataIndex: day,
-        key: day,
-        render: function render(value) {
-          return React.createElement(WeeklyCell, {
-            key: index,
-            events: value.events,
-            date: value.date,
-            onOpenDetail: onOpenDetail,
-            onOpenCreate: onOpenCreate,
-            onEventDetail: onEventDetail
-          });
-        }
-      };
-    });
-    return [hourColumn].concat(dayColumns);
-  };
-  var getTableData = function getTableData() {
-    var data = [];
-    data.push(_extends({
-      id: -1,
-      hour: 'All day'
-    }, getEventAllDay(events, startDate)));
-    for (var i = 0; i < HOURS_PER_DAY; i++) {
-      var targetHour = dayjs(startDate).add(i, 'hour');
-      data.push(_extends({
-        id: i,
-        hour: targetHour.format('HH:mm')
-      }, getEventsOfDay(events, targetHour)));
-    }
-    return data;
-  };
-  return React.createElement(Table, {
-    rowKey: function rowKey(record) {
-      return record.id;
-    },
-    columns: getTableColumns(),
-    dataSource: getTableData(),
-    pagination: false,
-    rowHoverable: false,
-    className: styles['weekly-calendar'],
-    loading: loading
-  });
-};
-
 var SelectBox = function SelectBox(_ref) {
   var value = _ref.value,
     options = _ref.options,
@@ -725,6 +538,8 @@ var LMSHeaderCalendar = function LMSHeaderCalendar(_ref) {
   };
   return React.createElement("div", {
     className: styles['header-calendar']
+  }, React.createElement("div", {
+    className: styles['header-calendar_filter']
   }, React.createElement("div", {
     className: clsx$1('cursor-pointer', filter.isOpen && styles['text-lms-primary']),
     onClick: toggleTurnOnFilter
@@ -752,7 +567,7 @@ var LMSHeaderCalendar = function LMSHeaderCalendar(_ref) {
     onClick: function onClick() {
       return handleChangeDate(currentDate.add(1, calendarMode));
     }
-  })), showTeacherName && React.createElement("div", {
+  }))), showTeacherName && React.createElement("div", {
     className: styles['header-calendar__title']
   }, title), React.createElement("div", {
     className: styles['header-calendar__controls']
@@ -779,46 +594,45 @@ var FilterCalendar = function FilterCalendar(_ref) {
   var filter = _ref.filter,
     setFilter = _ref.setFilter,
     courses = _ref.courses;
-  console.log('course:', courses);
   var noteFilter = useMemo(function () {
     return [{
       title: 'Online',
       icon: React.createElement("div", {
         className: styles$1['calendar-filter_note_blue']
       }),
-      value: 'ONLINE'
+      value: LEARNING_MODE.ONLINE
     }, {
       title: 'Live Online',
       icon: React.createElement("div", {
         className: styles$1['calendar-filter_note_pureple']
       }),
-      value: 'LIVE_ONLINE'
+      value: LEARNING_MODE.LIVE_ONLINE
     }, {
       title: 'Offline',
       icon: React.createElement("div", {
         className: styles$1['calendar-filter_note_green']
       }),
-      value: 'OFFLINE'
+      value: LEARNING_MODE.OFFLINE
     }, {
       title: 'Case Study',
       icon: React.createElement(GoldStarIcon, null),
-      value: 'CASE_STUDY'
+      value: LEARNING_MODE.CASE_STUDY
     }, {
       title: 'Test',
       icon: React.createElement(BookIcon, null),
-      value: 'TEST'
+      value: LEARNING_MODE.TEST
     }, {
       title: 'Holiday',
       icon: React.createElement("div", {
         className: styles$1['calendar-filter_note_yellow']
       }),
-      value: 'HOLIDAY'
+      value: LEARNING_MODE.HOLIDAY
     }, {
       title: 'Overdue',
       icon: React.createElement("div", {
         className: styles$1['calendar-filter_note_red']
       }),
-      value: 'OVERDUE'
+      value: LEARNING_MODE.OVERDUE
     }];
   }, []);
   var handleFilter = function handleFilter(type, value) {
@@ -902,6 +716,20 @@ var FilterCalendar = function FilterCalendar(_ref) {
   }))));
 };
 
+var CustomTooltip = function CustomTooltip(_ref) {
+  var title = _ref.title,
+    children = _ref.children,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top' : _ref$placement;
+  return React.createElement(Tooltip, {
+    color: '#ffffff',
+    title: React.createElement("div", {
+      className: styles['text-gray-600']
+    }, title),
+    placement: placement
+  }, React.createElement("div", null, children));
+};
+
 var MonthlyEvent = function MonthlyEvent(_ref) {
   var event = _ref.event,
     isSameMonth = _ref.isSameMonth,
@@ -1075,8 +903,204 @@ var MonthlyCalendar = function MonthlyCalendar(_ref) {
   });
 };
 
+var _getIconEvent;
+var getIconEvent = (_getIconEvent = {}, _getIconEvent[EVENT_TYPES.TEACHING] = React.createElement(Book, null), _getIconEvent[EVENT_TYPES.BUSY] = React.createElement(CalendarDelete, null), _getIconEvent[EVENT_TYPES.TIME_OFF] = React.createElement(Star, null), _getIconEvent[EVENT_TYPES.OTHER] = React.createElement(CalendarAccept, null), _getIconEvent);
+var calculateBoxSize = function calculateBoxSize(startTime, endTime) {
+  var minutes = dayjs(startTime).minute();
+  var diffMinutes = dayjs(endTime).diff(startTime, 'hour', true);
+  return {
+    width: diffMinutes || 1,
+    left: Math.floor(minutes / MINUTES_PER_HOUR * 100)
+  };
+};
+var LMSWeeklyEvent = function LMSWeeklyEvent(_ref) {
+  var event = _ref.event,
+    onOpenDetail = _ref.onOpenDetail,
+    onEventDetail = _ref.onEventDetail;
+  var formattedDate = customDateFormat(event.startDate, TIME_FORMAT) + ' - ' + customDateFormat(event.endDate, TIME_FORMAT);
+  var _calculateBoxSize = calculateBoxSize(event.startDate, event.endDate),
+    width = _calculateBoxSize.width,
+    left = _calculateBoxSize.left;
+  return React.createElement("div", {
+    className: styles["event-" + convertType[event.type]],
+    onClick: function onClick() {
+      onOpenDetail(dayjs(event.startDate).toDate(), [event]);
+      onEventDetail && onEventDetail(event);
+    },
+    style: {
+      top: "0%",
+      height: "100%",
+      width: width * 100 + '%',
+      left: left + '%',
+      zIndex: event.type === EVENT_TYPES.BUSY ? 2 : 1
+    }
+  }, React.createElement("div", {
+    className: clsx$1(styles['weekly-event'])
+  }, React.createElement("div", {
+    className: clsx$1(styles['weekly-event--collapse'])
+  }, React.createElement("div", {
+    className: styles.flex
+  }, getIconEvent[event.type]), React.createElement("div", {
+    className: styles['weekly-event__title']
+  }, React.createElement(CustomTooltip, {
+    title: event.title
+  }, event.title))), React.createElement("div", {
+    className: styles['weekly-event__date']
+  }, React.createElement(CustomTooltip, {
+    title: formattedDate
+  }, formattedDate))));
+};
+
+var LMSWeeklyCell = function LMSWeeklyCell(_ref) {
+  var _events;
+  var events = _ref.events,
+    date = _ref.date,
+    onOpenDetail = _ref.onOpenDetail,
+    onOpenCreate = _ref.onOpenCreate,
+    onEventDetail = _ref.onEventDetail;
+  var isToday = dayjs().isSame(date, 'day');
+  var handleOpenCreateModal = function handleOpenCreateModal(e) {
+    if (e.target !== e.currentTarget) return;
+    onOpenCreate(dayjs(date).toDate());
+  };
+  events = (_events = events) === null || _events === void 0 ? void 0 : _events.sort(function (a, b) {
+    return a.type === EVENT_TYPES.BUSY && b.type !== EVENT_TYPES.BUSY ? 1 : -1;
+  });
+  var renderWeeklyEvent = useMemo(function () {
+    var _events2, _events3, _events4;
+    var isAllDay = (_events2 = events) === null || _events2 === void 0 ? void 0 : _events2.some(function (item) {
+      return item.isAllDay;
+    });
+    if (isAllDay && ((_events3 = events) === null || _events3 === void 0 ? void 0 : _events3.length) > 1) {
+      return React.createElement(React.Fragment, null, React.createElement(LMSWeeklyEvent, {
+        event: events[0],
+        onOpenDetail: onOpenDetail,
+        onEventDetail: onEventDetail
+      }), React.createElement("div", {
+        className: styles['see-more']
+      }, React.createElement(CustomTooltip, {
+        placement: 'bottom',
+        title: React.createElement("div", {
+          className: styles['calendar-tooltip']
+        }, events.slice(1, events.length).map(function (event, index) {
+          return React.createElement(LMSWeeklyEvent, {
+            event: event,
+            onOpenDetail: onOpenDetail,
+            onEventDetail: onEventDetail,
+            key: index + 1
+          });
+        }))
+      }, "+", Math.max(events.length - 1, 0), " More")));
+    }
+    return (_events4 = events) === null || _events4 === void 0 ? void 0 : _events4.map(function (event, index) {
+      return React.createElement(LMSWeeklyEvent, {
+        key: index,
+        event: event,
+        onOpenDetail: onOpenDetail,
+        onEventDetail: onEventDetail
+      });
+    });
+  }, [events]);
+  return React.createElement("div", {
+    className: styles['weekly-calendar__cell'] + " " + (isToday ? styles['bg-info/10'] : styles['bg-white']),
+    onClick: handleOpenCreateModal
+  }, renderWeeklyEvent);
+};
+
+dayjs.extend(isBetween);
+var LMSWeeklyCalendar = function LMSWeeklyCalendar(_ref) {
+  var startDate = _ref.startDate,
+    events = _ref.events,
+    onOpenDetail = _ref.onOpenDetail,
+    onOpenCreate = _ref.onOpenCreate,
+    onEventDetail = _ref.onEventDetail,
+    loading = _ref.loading;
+  var getEventsOfHour = function getEventsOfHour(events, targetHour) {
+    return hoursOfDayKeys.reduce(function (acc, hour) {
+      acc[hour] = {
+        events: events.filter(function (event) {
+          return dayjs(event.startDate).isSame(dayjs(targetHour.format('YYYY-MM-DD') + "T" + hour + ":00"), 'hour') && !checkIsAllday(dayjs(event.startDate), dayjs(event.endDate));
+        }),
+        date: dayjs(targetHour.format('YYYY-MM-DD') + "T" + hour)
+      };
+      return acc;
+    }, {});
+  };
+  var getTableColumns = function getTableColumns() {
+    var hourColumn = {
+      title: React.createElement("div", {
+        className: styles['weekly-calendar__title']
+      }),
+      dataIndex: 'hour',
+      key: 'hour',
+      width: 1,
+      render: function render(value) {
+        return React.createElement("div", null, value);
+      }
+    };
+    var hours = Array.from({
+      length: 17
+    }, function (_, i) {
+      return 7 + i;
+    });
+    var timeColums = hours.map(function (time, index) {
+      return {
+        title: React.createElement("div", {
+          className: styles['weekly-calendar__title']
+        }, time % 2 !== 0 ? React.createElement("div", {
+          style: {
+            textAlign: 'start'
+          }
+        }, time < 10 ? '0' + time + ':00' : time + ':00') : React.createElement("div", {
+          style: {
+            minWidth: '35px'
+          }
+        })),
+        dataIndex: "" + (time < 10 ? '0' + time + ':00' : time + ':00'),
+        key: "" + (time < 10 ? '0' + time + ':00' : time + ':00'),
+        render: function render(value) {
+          return React.createElement(LMSWeeklyCell, {
+            key: index,
+            events: value === null || value === void 0 ? void 0 : value.events,
+            date: value === null || value === void 0 ? void 0 : value.date,
+            onOpenDetail: onOpenDetail,
+            onOpenCreate: onOpenCreate,
+            onEventDetail: onEventDetail
+          });
+        }
+      };
+    });
+    return [hourColumn].concat(timeColums);
+  };
+  var getTableData = function getTableData() {
+    var data = [];
+    for (var i = 0; i < 7; i++) {
+      var targetHour = dayjs(startDate).add(i, 'day');
+      data.push(_extends({
+        id: i,
+        hour: React.createElement("div", null, React.createElement("div", {
+          className: styles['lms-calendar__tablet']
+        }, Object.values(DAYS_OF_WEEK_SHORTEN)[i]), React.createElement("div", {
+          className: styles['lms-calendar__tablet']
+        }, dayjs(startDate).add(i, 'day').format('DD')))
+      }, getEventsOfHour(events, targetHour)));
+    }
+    return data;
+  };
+  return React.createElement(Table, {
+    rowKey: function rowKey(record) {
+      return record.id;
+    },
+    columns: getTableColumns(),
+    dataSource: getTableData(),
+    pagination: false,
+    rowHoverable: false,
+    className: styles['weekly-calendar'],
+    loading: loading
+  });
+};
+
 var SAPPCalendar = function SAPPCalendar(_ref) {
-  var _courses$map;
   var teacherName = _ref.teacherName,
     events = _ref.events,
     _ref$norms = _ref.norms,
@@ -1097,15 +1121,15 @@ var SAPPCalendar = function SAPPCalendar(_ref) {
   var _useState = useState(dayjs()),
     currentDate = _useState[0],
     setCurrentDate = _useState[1];
-  var _useState2 = useState('month'),
+  var _useState2 = useState('week'),
     calendarMode = _useState2[0],
     setCalendarMode = _useState2[1];
   var _useState3 = useState({
       isOpen: false,
-      type: ['ONLINE', 'LIVE_ONLINE', 'OFFLINE', 'CASE_STUDY', 'TEST', 'HOLIDAY', 'OVERDUE'],
-      courseId: (_courses$map = courses === null || courses === void 0 ? void 0 : courses.map(function (item) {
+      type: Object.values(LEARNING_MODE),
+      courseId: courses !== null && courses !== void 0 && courses.length ? courses === null || courses === void 0 ? void 0 : courses.map(function (item) {
         return item.id;
-      })) != null ? _courses$map : []
+      }) : []
     }),
     filter = _useState3[0],
     setFilter = _useState3[1];
@@ -1176,12 +1200,11 @@ var SAPPCalendar = function SAPPCalendar(_ref) {
     onOpenCreate: onOpenCreate,
     onEventDetail: onEventDetail,
     loading: loading
-  }), calendarMode === 'week' && React.createElement(WeeklyCalendar, {
+  }), calendarMode === 'week' && React.createElement(LMSWeeklyCalendar, {
     startDate: startDate,
     endDate: endDate,
     events: splittedEvents,
     norms: norms,
-    showWeeklyNorm: showWeeklyNorm,
     onOpenDetail: onOpenDetail,
     onOpenCreate: onOpenCreate,
     onEventDetail: onEventDetail,