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

package/dist/index.modern.js

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import React, { useState, useEffect, useMemo } from 'react';
-import { DatePicker, Select, Calendar, Tooltip, Table } from 'antd';
+import { DatePicker, Tooltip, Table, Select, Calendar } from 'antd';
 import clsx$1, { clsx } from 'clsx';
 import isBetween from 'dayjs/plugin/isBetween';
 
@@ -56,8 +56,13 @@ var useEffectAfterMounted = function useEffectAfterMounted(callback, dependencie
   }, dependencies);
 };
 
+var HOURS_PER_DAY = 24;
 var MINUTES_PER_HOUR = 60;
 var TIME_FORMAT = 'HH:mm';
+var MIN_HEIGHT_HIDE_DETAILS = 140;
+var MIN_HEIGHT_HIDE_ALL = 105;
+var MIN_HEIGHT_EVENT = 50;
+var BORDER_WEEKLY_CELL = 1;
 var DAYS_OF_WEEK;
 (function (DAYS_OF_WEEK) {
   DAYS_OF_WEEK["Monday"] = "Monday";
@@ -103,13 +108,15 @@ var EVENT_TYPES;
 (function (EVENT_TYPES) {
   EVENT_TYPES["TEACHING"] = "TEACHING";
   EVENT_TYPES["BUSY"] = "BUSY";
-  EVENT_TYPES["TIME_OFF"] = "TIME_OFF";
+  EVENT_TYPES["HOLIDAY"] = "HOLIDAY";
   EVENT_TYPES["OTHER"] = "OTHER";
+  EVENT_TYPES["LIVE_ONLINE"] = "LIVE_ONLINE";
 })(EVENT_TYPES || (EVENT_TYPES = {}));
-var FORMAT_DATE_CARLENDA = {
-  MONTH_AND_WEEK: 'MMMM, YYYY',
-  DATE: 'MMMM DD, YYYY'
-};
+var FORMAT_DATE_CARLENDA;
+(function (FORMAT_DATE_CARLENDA) {
+  FORMAT_DATE_CARLENDA["MONTH_AND_WEEK"] = "MMMM DD";
+  FORMAT_DATE_CARLENDA["DATE"] = "DD";
+})(FORMAT_DATE_CARLENDA || (FORMAT_DATE_CARLENDA = {}));
 var LEARNING_MODE;
 (function (LEARNING_MODE) {
   LEARNING_MODE["ONLINE"] = "ONLINE";
@@ -119,15 +126,20 @@ var LEARNING_MODE;
   LEARNING_MODE["HOLIDAY"] = "HOLIDAY";
   LEARNING_MODE["OVERDUE"] = "OVERDUE";
   LEARNING_MODE["TEST"] = "TEST";
+  LEARNING_MODE["KEY_BEFORE_CONTENT"] = "KEY_BEFORE_CONTENT";
 })(LEARNING_MODE || (LEARNING_MODE = {}));
+var CALENDAR_TYPE;
+(function (CALENDAR_TYPE) {
+  CALENDAR_TYPE["OPS"] = "OPS";
+  CALENDAR_TYPE["LMS"] = "LMS";
+})(CALENDAR_TYPE || (CALENDAR_TYPE = {}));
 
 var _convertType;
 var customDateFormat = function customDateFormat(value, formatStr) {
   return dayjs(value).format(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 convertType = (_convertType = {}, _convertType[EVENT_TYPES.TEACHING] = 'info', _convertType[EVENT_TYPES.BUSY] = 'error', _convertType[EVENT_TYPES.HOLIDAY] = 'warning', _convertType[EVENT_TYPES.OTHER] = 'success', _convertType[EVENT_TYPES.LIVE_ONLINE] = 'purple', _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', '[]');
@@ -182,7 +194,9 @@ var checkIsAllday = function checkIsAllday(startDate, endDate) {
   }
   return startDate.format(TIME_FORMAT) === startDate.startOf('day').format(TIME_FORMAT) && endDate.format(TIME_FORMAT) === endDate.endOf('day').format(TIME_FORMAT) && startDate.isBefore(endDate);
 };
+var hoursOfDayKeys = Object.values(HOUR_OF_DAY);
 
+var _getIconEvent;
 var Left = function Left() {
   return React.createElement("svg", {
     width: '16',
@@ -271,42 +285,87 @@ var Star = function Star() {
     fill: '#F57C00'
   }));
 };
-var LeftArrowIcon = function LeftArrowIcon() {
+var TestIcon = function TestIcon() {
   return React.createElement("svg", {
-    width: '8',
-    height: '11',
-    viewBox: '0 0 8 11',
-    fill: 'currentColor',
+    width: '14',
+    height: '15',
+    viewBox: '0 0 14 15',
+    fill: 'none',
     xmlns: 'http://www.w3.org/2000/svg'
   }, React.createElement("path", {
-    d: 'M7.3125 0.368526L7.3125 10.631C7.3125 10.9388 6.9875 11.1107 6.76562 10.9201L0.815625 5.78884C0.645313 5.64196 0.645313 5.35915 0.815625 5.21071L6.76562 0.079463C6.9875 -0.111162 7.3125 0.0607128 7.3125 0.368526Z',
-    fill: '#404041'
+    d: 'M4.38413 3.03685H7.85239C8.24984 3.03685 8.52203 2.6436 8.37463 2.28174L7.99366 1.34663C7.90843 1.13708 7.7017 1 7.47142 1H4.76462C4.53482 1 4.32762 1.13754 4.24238 1.34663L3.86189 2.28174C3.71449 2.6436 3.98668 3.03685 4.38413 3.03685Z',
+    fill: '#FFB800'
+  }), React.createElement("path", {
+    d: 'M12.7209 8.27831C12.3488 7.9183 11.7508 7.9183 11.3788 8.27831L10.9775 8.67433L12.3206 9.98607L12.7209 9.59375C13.0929 9.22912 13.0929 8.64294 12.7209 8.27831Z',
+    fill: '#FFB800'
+  }), React.createElement("path", {
+    d: 'M10.4791 9.16455L8.18108 11.4169C8.12928 11.4631 8.09631 11.5277 8.0869 11.597L7.90795 12.6124C7.87028 12.8385 8.06806 13.0324 8.29881 12.9955L9.33952 12.8247C9.40545 12.8108 9.47138 12.7785 9.51847 12.7324L11.8212 10.4754L10.4791 9.16455Z',
+    fill: '#FFB800'
+  }), React.createElement("path", {
+    d: 'M9.68361 2.01953H9.02857L9.03092 2.02553C9.18727 2.40816 9.13923 2.84156 8.90331 3.18312C8.66738 3.52513 8.27464 3.7296 7.85317 3.7296H4.38444C3.96297 3.7296 3.57023 3.52559 3.33431 3.18312C3.09791 2.8411 3.05035 2.40816 3.20622 2.02507L3.20857 2.01953H2.55401C1.69224 2.01953 1 2.70263 1 3.54267V11.4768C1 12.3169 1.69224 13 2.55401 13H7.25888C7.20285 12.8412 7.1826 12.6709 7.21085 12.5006L7.39074 11.4791C7.41805 11.2728 7.53154 11.0591 7.70625 10.904L10.196 8.46286L10.8764 7.79037C10.9852 7.68514 11.1081 7.60298 11.2367 7.5319V3.54267C11.2376 2.70263 10.5407 2.01953 9.68361 2.01953ZM3.90128 9.69568H3.47229C3.23824 9.69568 3.04846 9.50967 3.04846 9.28028C3.04846 9.05088 3.23824 8.86488 3.47229 8.86488H3.90176C4.1358 8.86488 4.32558 9.05088 4.32558 9.28028C4.32558 9.50967 4.13533 9.69568 3.90128 9.69568ZM3.90128 7.17512H3.47229C3.23824 7.17512 3.04846 6.98911 3.04846 6.75972C3.04846 6.53032 3.23824 6.34432 3.47229 6.34432H3.90176C4.1358 6.34432 4.32558 6.53032 4.32558 6.75972C4.32558 6.98911 4.13533 7.17512 3.90128 7.17512ZM7.69683 9.69522H5.60128C5.36723 9.69522 5.17745 9.50921 5.17745 9.27981C5.17745 9.05042 5.36723 8.86441 5.60128 8.86441H7.69683C7.93087 8.86441 8.12065 9.05042 8.12065 9.27981C8.12065 9.50921 7.93135 9.69522 7.69683 9.69522ZM8.76533 7.17512H5.60033C5.36629 7.17512 5.17651 6.98911 5.17651 6.75972C5.17651 6.53032 5.36629 6.34432 5.60033 6.34432H8.76533C8.99937 6.34432 9.18915 6.53032 9.18915 6.75972C9.18915 6.98911 8.99937 7.17512 8.76533 7.17512Z',
+    fill: '#FFB800'
   }));
 };
-var RightArrowIcon = function RightArrowIcon() {
+var HiddenEyeIcon = function HiddenEyeIcon() {
   return React.createElement("svg", {
-    width: '8',
-    height: '11',
-    viewBox: '0 0 8 11',
-    fill: 'currentColor',
+    width: '16',
+    height: '17',
+    viewBox: '0 0 16 17',
+    fill: 'none',
     xmlns: 'http://www.w3.org/2000/svg'
   }, React.createElement("path", {
-    d: 'M0.6875 0.368526L0.6875 10.631C0.6875 10.9388 1.0125 11.1107 1.23438 10.9201L7.18437 5.78884C7.35469 5.64196 7.35469 5.35915 7.18437 5.21071L1.23438 0.079463C1.0125 -0.111162 0.6875 0.0607128 0.6875 0.368526Z',
-    fill: '#404041'
+    d: 'M7.92867 10.5001C8.45911 10.5001 8.96782 10.2894 9.34289 9.91436C9.71796 9.53929 9.92868 9.03058 9.92868 8.50015C9.92868 8.44158 9.926 8.38354 9.921 8.32622L7.75475 10.4925C7.81207 10.4975 7.86992 10.5001 7.92867 10.5001ZM14.5487 2.31372L13.7858 1.55157C13.759 1.5248 13.7227 1.50977 13.6848 1.50977C13.647 1.50977 13.6106 1.5248 13.5839 1.55157L11.6317 3.50425C10.5548 2.9539 9.34427 2.67872 8.0001 2.67872C4.56796 2.67872 2.00725 4.46622 0.31796 8.04122C0.250059 8.185 0.214844 8.34203 0.214844 8.50104C0.214844 8.66005 0.250059 8.81708 0.31796 8.96086C0.99296 10.3826 1.80576 11.5222 2.75635 12.3796L0.867246 14.268C0.840475 14.2948 0.825437 14.3311 0.825437 14.369C0.825437 14.4069 0.840475 14.4432 0.867246 14.47L1.62957 15.2323C1.65636 15.2591 1.69268 15.2741 1.73055 15.2741C1.76842 15.2741 1.80474 15.2591 1.83153 15.2323L14.5487 2.51586C14.562 2.50259 14.5725 2.48684 14.5797 2.46949C14.5869 2.45215 14.5906 2.43356 14.5906 2.41479C14.5906 2.39602 14.5869 2.37743 14.5797 2.36008C14.5725 2.34274 14.562 2.32698 14.5487 2.31372ZM4.78582 8.50015C4.78577 7.9573 4.92632 7.4237 5.1938 6.95132C5.46127 6.47894 5.84653 6.08389 6.31206 5.80466C6.77758 5.52543 7.30749 5.37154 7.85017 5.35798C8.39285 5.34442 8.92979 5.47166 9.40868 5.72729L8.54046 6.5955C8.19032 6.48339 7.81606 6.46989 7.45875 6.55648C7.10143 6.64307 6.77488 6.82641 6.51491 7.08638C6.25494 7.34635 6.0716 7.67291 5.98501 8.03022C5.89841 8.38753 5.91192 8.76179 6.02403 9.11193L5.15582 9.98015C4.91218 9.52493 4.78506 9.01646 4.78582 8.50015Z',
+    fill: '#DCDDDD'
+  }), React.createElement("path", {
+    d: 'M15.6819 8.03917C15.0533 6.71536 14.3052 5.6359 13.4374 4.80078L10.8635 7.37489C11.0805 7.94206 11.1286 8.55992 11.002 9.15383C10.8754 9.74774 10.5795 10.2923 10.1501 10.7217C9.72073 11.1511 9.17618 11.4469 8.58227 11.5735C7.98836 11.7001 7.3705 11.652 6.80333 11.4351L4.62012 13.6183C5.63297 14.087 6.75952 14.3213 7.99976 14.3213C11.4319 14.3213 13.9926 12.5338 15.6819 8.95882C15.7498 8.81504 15.785 8.65801 15.785 8.499C15.785 8.33999 15.7498 8.18295 15.6819 8.03917Z',
+    fill: '#DCDDDD'
   }));
 };
-var FilterIcon = function FilterIcon() {
+var EyeIcon = function EyeIcon() {
   return React.createElement("svg", {
-    width: '35',
-    height: '35',
-    viewBox: '0 0 35 35',
-    fill: 'currentColor',
+    width: '16',
+    height: '17',
+    viewBox: '0 0 16 17',
+    fill: 'none',
     xmlns: 'http://www.w3.org/2000/svg'
   }, React.createElement("path", {
-    d: 'M26.5 8.4961V26.5036H8.5V8.4961H26.5ZM28 6.99609L7 6.99619L7 28.0036L28 27.9961V6.99609ZM10.2625 9.9886H17.7625V24.9886H10.2625V9.9886Z',
-    fill: 'currentColor'
+    d: 'M5.92868 8.50014C5.92868 9.03057 6.13939 9.53928 6.51446 9.91435C6.88953 10.2894 7.39824 10.5001 7.92868 10.5001C8.45911 10.5001 8.96782 10.2894 9.34289 9.91435C9.71796 9.53928 9.92868 9.03057 9.92868 8.50014C9.92868 7.96971 9.71796 7.461 9.34289 7.08593C8.96782 6.71085 8.45911 6.50014 7.92868 6.50014C7.39824 6.50014 6.88953 6.71085 6.51446 7.08593C6.13939 7.461 5.92868 7.96971 5.92868 8.50014ZM15.6822 8.03943C13.9894 4.47335 11.4305 2.67871 8.0001 2.67871C4.56796 2.67871 2.01082 4.47335 0.31796 8.04121C0.250059 8.18499 0.214844 8.34203 0.214844 8.50103C0.214844 8.66004 0.250059 8.81707 0.31796 8.96085C2.01082 12.5269 4.56975 14.3216 8.0001 14.3216C11.4322 14.3216 13.9894 12.5269 15.6822 8.95907C15.8197 8.66978 15.8197 8.33407 15.6822 8.03943ZM7.92868 11.643C6.19296 11.643 4.78582 10.2359 4.78582 8.50014C4.78582 6.76443 6.19296 5.35728 7.92868 5.35728C9.66439 5.35728 11.0715 6.76443 11.0715 8.50014C11.0715 10.2359 9.66439 11.643 7.92868 11.643Z',
+    fill: '#DCDDDD'
+  }));
+};
+var FlagIcon = function FlagIcon() {
+  return React.createElement("svg", {
+    width: '14',
+    height: '15',
+    viewBox: '0 0 14 15',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg'
+  }, React.createElement("path", {
+    d: 'M11.229 5.1665L12.7165 3.18317C12.7813 3.09646 12.8208 2.99343 12.8304 2.8856C12.8401 2.77776 12.8196 2.66936 12.7711 2.57252C12.7227 2.47568 12.6483 2.39422 12.5563 2.33723C12.4642 2.28025 12.3581 2.24999 12.2498 2.24984H5.24984C5.24984 2.09513 5.18838 1.94675 5.07898 1.83736C4.96959 1.72796 4.82121 1.6665 4.6665 1.6665C4.51179 1.6665 4.36342 1.72796 4.25402 1.83736C4.14463 1.94675 4.08317 2.09513 4.08317 2.24984V12.1665H3.49984C3.34513 12.1665 3.19675 12.228 3.08736 12.3374C2.97796 12.4468 2.9165 12.5951 2.9165 12.7498C2.9165 12.9045 2.97796 13.0529 3.08736 13.1623C3.19675 13.2717 3.34513 13.3332 3.49984 13.3332H5.83317C5.98788 13.3332 6.13625 13.2717 6.24565 13.1623C6.35505 13.0529 6.4165 12.9045 6.4165 12.7498C6.4165 12.5951 6.35505 12.4468 6.24565 12.3374C6.13625 12.228 5.98788 12.1665 5.83317 12.1665H5.24984V8.08317H12.2498C12.3581 8.08302 12.4642 8.05276 12.5563 7.99578C12.6483 7.93879 12.7227 7.85733 12.7711 7.76049C12.8196 7.66365 12.8401 7.55525 12.8304 7.44741C12.8208 7.33957 12.7813 7.23654 12.7165 7.14984L11.229 5.1665Z',
+    fill: '#FFB800'
   }));
 };
+var GoldStarIcon = function GoldStarIcon() {
+  return React.createElement("svg", {
+    width: '14',
+    height: '15',
+    viewBox: '0 0 14 15',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg'
+  }, React.createElement("g", {
+    clipPath: 'url(#clip0_23522_33890)'
+  }, React.createElement("path", {
+    d: 'M13.9308 5.27509L9.73388 4.66514L7.85774 0.86162C7.8065 0.757482 7.7222 0.67318 7.61806 0.621937C7.35689 0.493005 7.03951 0.600449 6.90893 0.86162L5.03279 4.66514L0.835862 5.27509C0.720153 5.29162 0.614362 5.34617 0.533366 5.42882C0.435446 5.52946 0.381488 5.66486 0.383347 5.80527C0.385207 5.94568 0.442733 6.0796 0.543284 6.17762L3.57982 9.13811L2.86242 13.3185C2.8456 13.4158 2.85636 13.5158 2.89348 13.6072C2.93061 13.6987 2.99261 13.7779 3.07246 13.8359C3.15231 13.8939 3.24682 13.9283 3.34526 13.9353C3.4437 13.9424 3.54213 13.9216 3.62941 13.8756L7.38333 11.9019L11.1373 13.8756C11.2397 13.9301 11.3588 13.9483 11.4728 13.9285C11.7604 13.8789 11.9538 13.6061 11.9042 13.3185L11.1869 9.13811L14.2234 6.17762C14.306 6.09662 14.3606 5.99083 14.3771 5.87512C14.4217 5.58585 14.2201 5.31807 13.9308 5.27509Z',
+    fill: '#FFB800'
+  })), React.createElement("defs", null, React.createElement("clipPath", {
+    id: 'clip0_23522_33890'
+  }, React.createElement("rect", {
+    width: '14',
+    height: '14',
+    fill: 'white',
+    transform: 'translate(0 0.5)'
+  }))));
+};
 var TagIcon = function TagIcon() {
   return React.createElement("svg", {
     width: '20',
@@ -330,7 +389,7 @@ var EducationIcon = function EducationIcon() {
     fill: 'none',
     xmlns: 'http://www.w3.org/2000/svg'
   }, React.createElement("g", {
-    clipPath: 'url(#clip0_19555_31783)'
+    clipPath: 'url(#clip0_22306_18116)'
   }, React.createElement("path", {
     d: 'M10 14.9699L3.75 11.3984V15.243L10 18.7148L16.25 15.243V11.3984L10 14.9699Z',
     fill: '#21272A'
@@ -338,7 +397,7 @@ var EducationIcon = function EducationIcon() {
     d: 'M20.0098 8.0002L10 2.28027L-0.00976562 8.0002L10 13.7201L18.125 9.07715V15.5002H20V8.00566L20.0098 8.0002Z',
     fill: '#21272A'
   })), React.createElement("defs", null, React.createElement("clipPath", {
-    id: 'clip0_19555_31783'
+    id: 'clip0_22306_18116'
   }, React.createElement("rect", {
     width: '20',
     height: '20',
@@ -346,40 +405,19 @@ var EducationIcon = function EducationIcon() {
     transform: 'translate(0 0.5)'
   }))));
 };
-var BookIcon = function BookIcon() {
+var FilterIcon = function FilterIcon() {
   return React.createElement("svg", {
-    width: '14',
-    height: '15',
-    viewBox: '0 0 14 15',
-    fill: 'none',
+    width: '35',
+    height: '35',
+    viewBox: '0 0 35 35',
+    fill: 'currentColor',
     xmlns: 'http://www.w3.org/2000/svg'
   }, React.createElement("path", {
-    d: 'M6.56246 3.55091H6.52163C5.24353 2.80405 3.83672 2.30346 2.37413 2.07508C2.22462 2.0524 2.07197 2.06228 1.92663 2.10404C1.78129 2.14581 1.64669 2.21847 1.53203 2.31707C1.41737 2.41566 1.32536 2.53786 1.2623 2.67531C1.19923 2.81275 1.1666 2.96219 1.16663 3.11341V10.3526C1.1661 10.599 1.25325 10.8376 1.41248 11.0257C1.57171 11.2138 1.79265 11.3391 2.03579 11.3792C3.59665 11.6587 5.10804 12.1658 6.52163 12.8842H6.56246V3.55091ZM3.19079 4.88675H4.51496C4.63099 4.88675 4.74227 4.93284 4.82432 5.01489C4.90637 5.09693 4.95246 5.20821 4.95246 5.32425C4.95246 5.44028 4.90637 5.55156 4.82432 5.63361C4.74227 5.71565 4.63099 5.76175 4.51496 5.76175H3.19079C3.07476 5.76175 2.96348 5.71565 2.88144 5.63361C2.79939 5.55156 2.75329 5.44028 2.75329 5.32425C2.75329 5.20821 2.79939 5.09693 2.88144 5.01489C2.96348 4.93284 3.07476 4.88675 3.19079 4.88675ZM4.94079 7.51175H3.19079C3.13334 7.51175 3.07645 7.50043 3.02337 7.47844C2.97029 7.45646 2.92206 7.42423 2.88144 7.38361C2.84081 7.34298 2.80858 7.29475 2.7866 7.24167C2.76461 7.18859 2.75329 7.1317 2.75329 7.07425C2.75329 7.01679 2.76461 6.9599 2.7866 6.90682C2.80858 6.85374 2.84081 6.80551 2.88144 6.76489C2.92206 6.72426 2.97029 6.69204 3.02337 6.67005C3.07645 6.64806 3.13334 6.63675 3.19079 6.63675H4.94079C5.05683 6.63675 5.16811 6.68284 5.25015 6.76489C5.3322 6.84693 5.37829 6.95821 5.37829 7.07425C5.37829 7.19028 5.3322 7.30156 5.25015 7.38361C5.16811 7.46565 5.05683 7.51175 4.94079 7.51175ZM12.8333 3.07258V10.3759C12.8359 10.6193 12.7525 10.8558 12.5977 11.0436C12.443 11.2315 12.2268 11.3586 11.9875 11.4026C10.4162 11.6579 8.89472 12.1578 7.47829 12.8842H7.43746V3.55091H7.47829C8.75371 2.81159 10.15 2.30403 11.6025 2.05175C11.7521 2.02656 11.9054 2.03394 12.052 2.07337C12.1985 2.11281 12.3349 2.18337 12.4517 2.28025C12.5685 2.37714 12.6631 2.49806 12.7289 2.63479C12.7948 2.77152 12.8304 2.92084 12.8333 3.07258Z',
-    fill: '#FFB800'
+    d: 'M26.5 8.4961V26.5036H8.5V8.4961H26.5ZM28 6.99609L7 6.99619L7 28.0036L28 27.9961V6.99609ZM10.2625 9.9886H17.7625V24.9886H10.2625V9.9886Z',
+    fill: 'currentColor'
   }));
 };
-var GoldStarIcon = function GoldStarIcon() {
-  return React.createElement("svg", {
-    width: '14',
-    height: '15',
-    viewBox: '0 0 14 15',
-    fill: 'none',
-    xmlns: 'http://www.w3.org/2000/svg'
-  }, React.createElement("g", {
-    clipPath: 'url(#clip0_19479_10426)'
-  }, React.createElement("path", {
-    d: 'M13.9307 5.27509L9.73376 4.66514L7.85762 0.86162C7.80638 0.757482 7.72207 0.67318 7.61794 0.621937C7.35676 0.493005 7.03939 0.600449 6.90881 0.86162L5.03267 4.66514L0.83574 5.27509C0.720031 5.29162 0.61424 5.34617 0.533244 5.42882C0.435324 5.52946 0.381366 5.66486 0.383225 5.80527C0.385085 5.94568 0.442611 6.0796 0.543162 6.17762L3.57969 9.13811L2.8623 13.3185C2.84548 13.4158 2.85624 13.5158 2.89336 13.6072C2.93049 13.6987 2.99249 13.7779 3.07234 13.8359C3.15219 13.8939 3.2467 13.9283 3.34514 13.9353C3.44358 13.9424 3.54201 13.9216 3.62928 13.8756L7.38321 11.9019L11.1371 13.8756C11.2396 13.9301 11.3586 13.9483 11.4727 13.9285C11.7603 13.8789 11.9537 13.6061 11.9041 13.3185L11.1867 9.13811L14.2233 6.17762C14.3059 6.09662 14.3605 5.99083 14.377 5.87512C14.4216 5.58585 14.22 5.31807 13.9307 5.27509Z',
-    fill: '#FFB800'
-  })), React.createElement("defs", null, React.createElement("clipPath", {
-    id: 'clip0_19479_10426'
-  }, React.createElement("rect", {
-    width: '14',
-    height: '14',
-    fill: 'white',
-    transform: 'translate(0 0.5)'
-  }))));
-};
-var EyeIcon = function EyeIcon() {
+var LeftArrowIcon = function LeftArrowIcon() {
   return React.createElement("svg", {
     width: '16',
     height: '17',
@@ -387,27 +425,42 @@ var EyeIcon = function EyeIcon() {
     fill: 'none',
     xmlns: 'http://www.w3.org/2000/svg'
   }, React.createElement("path", {
-    d: 'M5.92868 8.50014C5.92868 9.03057 6.13939 9.53928 6.51446 9.91435C6.88953 10.2894 7.39824 10.5001 7.92868 10.5001C8.45911 10.5001 8.96782 10.2894 9.34289 9.91435C9.71796 9.53928 9.92868 9.03057 9.92868 8.50014C9.92868 7.96971 9.71796 7.461 9.34289 7.08593C8.96782 6.71085 8.45911 6.50014 7.92868 6.50014C7.39824 6.50014 6.88953 6.71085 6.51446 7.08593C6.13939 7.461 5.92868 7.96971 5.92868 8.50014ZM15.6822 8.03943C13.9894 4.47335 11.4305 2.67871 8.0001 2.67871C4.56796 2.67871 2.01082 4.47335 0.31796 8.04121C0.250059 8.18499 0.214844 8.34203 0.214844 8.50103C0.214844 8.66004 0.250059 8.81707 0.31796 8.96085C2.01082 12.5269 4.56975 14.3216 8.0001 14.3216C11.4322 14.3216 13.9894 12.5269 15.6822 8.95907C15.8197 8.66978 15.8197 8.33407 15.6822 8.03943ZM7.92868 11.643C6.19296 11.643 4.78582 10.2359 4.78582 8.50014C4.78582 6.76443 6.19296 5.35728 7.92868 5.35728C9.66439 5.35728 11.0715 6.76443 11.0715 8.50014C11.0715 10.2359 9.66439 11.643 7.92868 11.643Z',
-    fill: '#DCDDDD'
+    d: 'M11.3125 3.36853V13.631C11.3125 13.9388 10.9875 14.1107 10.7656 13.9201L4.81563 8.78884C4.64531 8.64196 4.64531 8.35915 4.81563 8.21071L10.7656 3.07946C10.9875 2.88884 11.3125 3.06071 11.3125 3.36853Z',
+    fill: '#404041'
   }));
 };
-var HiddenEyeIcon = function HiddenEyeIcon() {
+var RightArrowIcon = function RightArrowIcon() {
   return React.createElement("svg", {
-    width: '16',
-    height: '17',
-    viewBox: '0 0 16 17',
+    width: '8',
+    height: '11',
+    viewBox: '0 0 8 11',
     fill: 'none',
     xmlns: 'http://www.w3.org/2000/svg'
   }, React.createElement("path", {
-    d: 'M7.92867 10.5001C8.45911 10.5001 8.96782 10.2894 9.34289 9.91436C9.71796 9.53929 9.92868 9.03058 9.92868 8.50015C9.92868 8.44158 9.926 8.38354 9.921 8.32622L7.75475 10.4925C7.81207 10.4975 7.86992 10.5001 7.92867 10.5001ZM14.5487 2.31372L13.7858 1.55157C13.759 1.5248 13.7227 1.50977 13.6848 1.50977C13.647 1.50977 13.6106 1.5248 13.5839 1.55157L11.6317 3.50425C10.5548 2.9539 9.34427 2.67872 8.0001 2.67872C4.56796 2.67872 2.00725 4.46622 0.31796 8.04122C0.250059 8.185 0.214844 8.34203 0.214844 8.50104C0.214844 8.66005 0.250059 8.81708 0.31796 8.96086C0.99296 10.3826 1.80576 11.5222 2.75635 12.3796L0.867246 14.268C0.840475 14.2948 0.825437 14.3311 0.825437 14.369C0.825437 14.4069 0.840475 14.4432 0.867246 14.47L1.62957 15.2323C1.65636 15.2591 1.69268 15.2741 1.73055 15.2741C1.76842 15.2741 1.80474 15.2591 1.83153 15.2323L14.5487 2.51586C14.562 2.50259 14.5725 2.48684 14.5797 2.46949C14.5869 2.45215 14.5906 2.43356 14.5906 2.41479C14.5906 2.39602 14.5869 2.37743 14.5797 2.36008C14.5725 2.34274 14.562 2.32698 14.5487 2.31372ZM4.78582 8.50015C4.78577 7.9573 4.92632 7.4237 5.1938 6.95132C5.46127 6.47894 5.84653 6.08389 6.31206 5.80466C6.77758 5.52543 7.30749 5.37154 7.85017 5.35798C8.39285 5.34442 8.92979 5.47166 9.40868 5.72729L8.54046 6.5955C8.19032 6.48339 7.81606 6.46989 7.45875 6.55648C7.10143 6.64307 6.77488 6.82641 6.51491 7.08638C6.25494 7.34635 6.0716 7.67291 5.98501 8.03022C5.89841 8.38753 5.91192 8.76179 6.02403 9.11193L5.15582 9.98015C4.91218 9.52493 4.78506 9.01646 4.78582 8.50015Z',
-    fill: '#DCDDDD'
-  }), React.createElement("path", {
-    d: 'M15.6819 8.03917C15.0533 6.71536 14.3052 5.6359 13.4374 4.80078L10.8635 7.37489C11.0805 7.94206 11.1286 8.55992 11.002 9.15383C10.8754 9.74774 10.5795 10.2923 10.1501 10.7217C9.72073 11.1511 9.17618 11.4469 8.58227 11.5735C7.98836 11.7001 7.3705 11.652 6.80333 11.4351L4.62012 13.6183C5.63297 14.087 6.75952 14.3213 7.99976 14.3213C11.4319 14.3213 13.9926 12.5338 15.6819 8.95882C15.7498 8.81504 15.785 8.65801 15.785 8.499C15.785 8.33999 15.7498 8.18295 15.6819 8.03917Z',
-    fill: '#DCDDDD'
+    d: 'M0.6875 0.368526L0.6875 10.631C0.6875 10.9388 1.0125 11.1107 1.23438 10.9201L7.18437 5.78884C7.35469 5.64196 7.35469 5.35915 7.18437 5.21071L1.23438 0.079463C1.0125 -0.111162 0.6875 0.0607128 0.6875 0.368526Z',
+    fill: '#404041'
   }));
 };
+var getIconEvent = (_getIconEvent = {}, _getIconEvent[EVENT_TYPES.TEACHING] = React.createElement(Book, null), _getIconEvent[EVENT_TYPES.BUSY] = React.createElement(CalendarDelete, null), _getIconEvent[EVENT_TYPES.HOLIDAY] = React.createElement(Star, null), _getIconEvent[EVENT_TYPES.OTHER] = React.createElement(CalendarAccept, null), _getIconEvent[EVENT_TYPES.LIVE_ONLINE] = '', _getIconEvent);
+var getIconforEvent = function getIconforEvent(event) {
+  if (event.source === CALENDAR_TYPE.LMS) {
+    var icon = [];
+    if (event.isCaseStudy) {
+      icon.push(React.createElement(GoldStarIcon, null));
+    }
+    if (event.isTest) {
+      icon.push(React.createElement(TestIcon, null));
+    }
+    if (event.isKeyContentBefore) {
+      icon.push(React.createElement(FlagIcon, null));
+    }
+    return icon;
+  } else {
+    return getIconEvent[event.type];
+  }
+};
 
-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 styles = {"transform":"_3-Pu9","cursor-pointer":"_2Mcv6","resize":"_uCXxT","rounded-none":"_3EfQZ","border":"_3-abu","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":"_3vIFr","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-purple":"_30cym","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","event--min-height":"_ZZSJH","weekly-event":"_hnHem","weekly-event__title":"_21a0T","weekly-event__date":"_PiKmX","weekly-event--collapse":"_1pvXT","btn-lms-default":"_1GA3p","ant-select-dropdown":"__OFBr","text-lms-primary":"_1gLzS","header-calendar_filter":"_1fd_Y","ant-picker-calendar-header":"_2IWLV","ant-picker-calendar-mode-switch":"_2jvy8","hover-item":"_3im6B","weekly-event__title_icon":"_3OUWM","monthly-event__date_tablet":"_2HhKK","calendar-filter":"_2n63y","see-more":"_1uakm","weekly-calendar-lms__cell":"__PqI3"};
 
 var Button = function Button(_ref) {
   var _ref$type = _ref.type,
@@ -416,6 +469,7 @@ var Button = function Button(_ref) {
     color = _ref$color === void 0 ? 'default' : _ref$color,
     onClick = _ref.onClick,
     children = _ref.children;
+  console.log('value:', styles["btn-" + color]);
   return React.createElement("button", {
     type: type,
     onClick: onClick,
@@ -495,263 +549,50 @@ var HeaderCalendar = function HeaderCalendar(_ref) {
   }, "Week")));
 };
 
-var SelectBox = function SelectBox(_ref) {
-  var value = _ref.value,
-    options = _ref.options,
-    defaultValue = _ref.defaultValue,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    disabled = _ref.disabled,
-    onChange = _ref.onChange;
-  return React.createElement(Select, {
-    defaultValue: defaultValue,
-    className: className,
-    disabled: disabled,
-    options: options,
-    value: value,
-    onChange: onChange
-  });
+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 LMSHeaderCalendar = function LMSHeaderCalendar(_ref) {
-  var title = _ref.title,
-    showTeacherName = _ref.showTeacherName,
-    currentDate = _ref.currentDate,
-    setCurrentDate = _ref.setCurrentDate,
-    calendarMode = _ref.calendarMode,
-    setCalendarMode = _ref.setCalendarMode,
-    toggleTurnOnFilter = _ref.toggleTurnOnFilter,
-    filter = _ref.filter;
-  var options = [{
-    value: 'month',
-    label: 'Month'
-  }, {
-    value: 'week',
-    label: 'Week'
-  }];
-  var handleChangeDate = function handleChangeDate(date) {
-    setCurrentDate(date);
-  };
-  var handleChangeMode = function handleChangeMode(mode) {
-    setCalendarMode(mode);
-    setCurrentDate(dayjs());
-  };
-  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
-  }, React.createElement(FilterIcon, null)), React.createElement("div", {
-    className: "" + styles['header-calendar__nav']
-  }, React.createElement(Icon, {
-    icon: React.createElement(LeftArrowIcon, null),
-    onClick: function onClick() {
-      return handleChangeDate(currentDate.subtract(1, calendarMode));
-    },
-    className: styles['rounded-none']
-  }), React.createElement(DatePicker, {
-    picker: calendarMode === 'day' ? 'date' : calendarMode,
-    onChange: handleChangeDate,
-    format: function format(value) {
-      return customDateFormat(value, calendarMode === 'day' ? FORMAT_DATE_CARLENDA.DATE : FORMAT_DATE_CARLENDA.MONTH_AND_WEEK);
+var MonthlyEvent = function MonthlyEvent(_ref) {
+  var _event$title, _event$title2;
+  var event = _ref.event,
+    isSameMonth = _ref.isSameMonth,
+    onEventDetail = _ref.onEventDetail;
+  var formattedDate = customDateFormat(event.startDate, TIME_FORMAT) + ' - ' + customDateFormat(event.endDate, TIME_FORMAT);
+  var formattedDateStart = customDateFormat(event.startDate, TIME_FORMAT);
+  return React.createElement(React.Fragment, null, React.createElement("li", {
+    className: styles["event-" + (isSameMonth ? convertType[event.type] : 'default')],
+    style: {
+      cursor: 'pointer'
     },
-    value: currentDate,
-    allowClear: false,
-    suffixIcon: null,
-    className: styles['header-calendar__date-picker'],
-    size: 'large'
-  }), React.createElement(Icon, {
-    icon: React.createElement(RightArrowIcon, null),
-    onClick: function onClick() {
-      return handleChangeDate(currentDate.add(1, calendarMode));
-    }
-  }))), showTeacherName && React.createElement("div", {
-    className: styles['header-calendar__title']
-  }, title), React.createElement("div", {
-    className: styles['header-calendar__controls']
-  }, React.createElement(Button, {
-    color: 'lms-default',
     onClick: function onClick() {
-      return handleChangeDate(dayjs());
-    }
-  }, "Today"), React.createElement("div", {
-    className: styles['header-calendar__divider']
-  }), React.createElement(SelectBox, {
-    value: calendarMode,
-    options: options,
-    className: 'select-mode',
-    onChange: function onChange(mode) {
-      handleChangeMode(mode);
+      return onEventDetail && onEventDetail(event);
     }
-  })));
-};
-
-var styles$1 = {"ant-picker-calendar-header":"_2Y9jk","ant-radio-group":"_3puh0","ant-picker-calendar-month-select":"_1b_yY","calendar-filter":"_1K0QG","calendar-filter_title":"_1kmo4","calendar-filter_note_blue":"_3yl3q","calendar-filter_note_pureple":"_dS6FM","calendar-filter_note_green":"_2v-Pp","calendar-filter_note_yellow":"_1u4J8","calendar-filter_note_red":"_1RLYM","calendar-filter_content_list_item":"_29aaM","calendar-filter_content_item_eye":"_1yCoo"};
-
-var FilterCalendar = function FilterCalendar(_ref) {
-  var filter = _ref.filter,
-    setFilter = _ref.setFilter,
-    courses = _ref.courses;
-  var noteFilter = useMemo(function () {
-    return [{
-      title: 'Online',
-      icon: React.createElement("div", {
-        className: styles$1['calendar-filter_note_blue']
-      }),
-      value: LEARNING_MODE.ONLINE
-    }, {
-      title: 'Live Online',
-      icon: React.createElement("div", {
-        className: styles$1['calendar-filter_note_pureple']
-      }),
-      value: LEARNING_MODE.LIVE_ONLINE
-    }, {
-      title: 'Offline',
-      icon: React.createElement("div", {
-        className: styles$1['calendar-filter_note_green']
-      }),
-      value: LEARNING_MODE.OFFLINE
-    }, {
-      title: 'Case Study',
-      icon: React.createElement(GoldStarIcon, null),
-      value: LEARNING_MODE.CASE_STUDY
-    }, {
-      title: 'Test',
-      icon: React.createElement(BookIcon, null),
-      value: LEARNING_MODE.TEST
-    }, {
-      title: 'Holiday',
-      icon: React.createElement("div", {
-        className: styles$1['calendar-filter_note_yellow']
-      }),
-      value: LEARNING_MODE.HOLIDAY
-    }, {
-      title: 'Overdue',
-      icon: React.createElement("div", {
-        className: styles$1['calendar-filter_note_red']
-      }),
-      value: LEARNING_MODE.OVERDUE
-    }];
-  }, []);
-  var handleFilter = function handleFilter(type, value) {
-    switch (type) {
-      case 'course':
-        {
-          setFilter(function (prev) {
-            var courseId = prev.courseId || [];
-            var updatedCourseId = courseId.includes(value) ? courseId.filter(function (item) {
-              return item !== value;
-            }) : [].concat(courseId, [value]);
-            return _extends({}, prev, {
-              courseId: updatedCourseId
-            });
-          });
-          break;
-        }
-      case 'note':
-        {
-          setFilter(function (prev) {
-            var typeArray = prev.type || [];
-            var updatedType = typeArray.includes(value) ? typeArray.filter(function (item) {
-              return item !== value;
-            }) : [].concat(typeArray, [value]);
-            return _extends({}, prev, {
-              type: updatedType
-            });
-          });
-          break;
-        }
-      case 'day':
-        {
-          setFilter(function (prev) {
-            return _extends({}, prev, {
-              day: value
-            });
-          });
-          break;
-        }
-    }
-  };
-  var handleFilterday = function handleFilterday(date) {
-    handleFilter('day', date.toString());
-  };
-  return React.createElement("div", {
-    className: styles$1['calendar-filter']
-  }, React.createElement(Calendar, {
-    mode: 'month',
-    fullscreen: false,
-    onChange: handleFilterday
-  }), React.createElement("div", null, React.createElement("div", {
-    className: styles$1['calendar-filter_title']
-  }, React.createElement(TagIcon, null), React.createElement("h3", null, "Notes")), React.createElement("div", null, noteFilter.map(function (item) {
-    var _filter$type;
-    return React.createElement("div", {
-      className: styles$1['calendar-filter_content_list_item'],
-      key: item.value
-    }, React.createElement("div", {
-      className: styles$1['calendar-filter_content_list_item']
-    }, item.icon, item.title), React.createElement("div", {
-      onClick: function onClick() {
-        return handleFilter('note', item.value);
-      },
-      className: styles$1['calendar-filter_content_item_eye']
-    }, (_filter$type = filter.type) !== null && _filter$type !== void 0 && _filter$type.includes(item.value) ? React.createElement(EyeIcon, null) : React.createElement(HiddenEyeIcon, null)));
-  }))), React.createElement("div", null, React.createElement("div", {
-    className: styles$1['calendar-filter_title']
-  }, React.createElement(EducationIcon, null), React.createElement("h3", null, "My courses")), React.createElement("div", null, courses === null || courses === void 0 ? void 0 : courses.map(function (item, key) {
-    var _filter$courseId;
-    return React.createElement("div", {
-      key: key,
-      className: styles$1['calendar-filter_content_list_item']
-    }, React.createElement("div", {
-      className: styles$1['calendar-filter_content_list_item']
-    }, item.name), React.createElement("div", {
-      onClick: function onClick() {
-        return handleFilter('course', item.id);
-      },
-      className: styles$1['calendar-filter_content_item_eye']
-    }, (_filter$courseId = filter.courseId) !== null && _filter$courseId !== void 0 && _filter$courseId.includes(item.id) ? React.createElement(EyeIcon, null) : React.createElement(HiddenEyeIcon, null)));
-  }))));
-};
-
-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,
-    onEventDetail = _ref.onEventDetail;
-  var formattedDate = customDateFormat(event.startDate, TIME_FORMAT) + ' - ' + customDateFormat(event.endDate, TIME_FORMAT);
-  return React.createElement(React.Fragment, null, React.createElement("li", {
-    className: styles["event-" + (isSameMonth ? convertType[event.type] : 'default')],
-    style: {
-      cursor: 'pointer'
-    },
-    onClick: function onClick() {
-      return onEventDetail && onEventDetail(event);
-    }
-  }, React.createElement("div", {
-    className: styles['monthly-event__title']
-  }, React.createElement(CustomTooltip, {
-    title: event.title
-  }, event.title)), React.createElement("div", {
-    className: styles['monthly-event__date']
-  }, React.createElement(CustomTooltip, {
-    title: formattedDate
-  }, formattedDate))));
+  }, React.createElement("div", {
+    className: styles['monthly-event__title']
+  }, React.createElement("div", {
+    className: styles['weekly-event__title_icon']
+  }, getIconforEvent(event)), React.createElement(CustomTooltip, {
+    title: event.title
+  }, (event === null || event === void 0 ? void 0 : (_event$title = event.title) === null || _event$title === void 0 ? void 0 : _event$title.length) > 5 ? (event === null || event === void 0 ? void 0 : (_event$title2 = event.title) === null || _event$title2 === void 0 ? void 0 : _event$title2.slice(0, 5)) + '...' : event === null || event === void 0 ? void 0 : event.title)), React.createElement("div", {
+    className: styles['monthly-event__date']
+  }, React.createElement(CustomTooltip, {
+    title: formattedDate
+  }, formattedDate)), React.createElement("div", {
+    className: styles['monthly-event__date_tablet']
+  }, getIconforEvent(event), React.createElement(CustomTooltip, {
+    title: formattedDate
+  }, formattedDateStart))));
 };
 
 var MonthlyCell = function MonthlyCell(_ref) {
@@ -903,56 +744,62 @@ 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 calculateBoxSize = function calculateBoxSize(startTime, endTime, isAllDay) {
+  if (isAllDay) {
+    return {
+      top: 10,
+      height: 50
+    };
+  }
   var minutes = dayjs(startTime).minute();
-  var diffMinutes = dayjs(endTime).diff(startTime, 'hour', true);
+  var diffMinutes = dayjs(endTime).diff(startTime, 'minute', true);
+  var top = Math.floor(minutes / MINUTES_PER_HOUR * 100);
+  var height = Math.floor(diffMinutes / MINUTES_PER_HOUR * 100);
+  var border = Math.floor((top + height) / MINUTES_PER_HOUR * BORDER_WEEKLY_CELL);
   return {
-    width: diffMinutes || 1,
-    left: Math.floor(minutes / MINUTES_PER_HOUR * 100)
+    top: top,
+    height: height + border
   };
 };
-var LMSWeeklyEvent = function LMSWeeklyEvent(_ref) {
+var WeeklyEvent = function WeeklyEvent(_ref) {
   var event = _ref.event,
     onOpenDetail = _ref.onOpenDetail,
-    onEventDetail = _ref.onEventDetail;
+    onEventDetail = _ref.onEventDetail,
+    zIndex = _ref.zIndex;
+  var _calculateBoxSize = calculateBoxSize(event.startDate, event.endDate, event.isAllDay),
+    top = _calculateBoxSize.top,
+    height = _calculateBoxSize.height;
+  var isMinHeight = height < MIN_HEIGHT_EVENT;
   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]],
+    className: clsx$1(styles["event-" + convertType[event.type]], isMinHeight && styles['event--min-height']),
     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
+      top: top + "%",
+      height: Math.max(height, MIN_HEIGHT_EVENT) + "%",
+      zIndex: zIndex
     }
   }, React.createElement("div", {
-    className: clsx$1(styles['weekly-event'])
+    className: clsx$1(styles['weekly-event'], height <= MIN_HEIGHT_HIDE_ALL && styles['weekly-event--collapse'])
   }, React.createElement("div", {
-    className: clsx$1(styles['weekly-event--collapse'])
+    className: clsx$1(height <= MIN_HEIGHT_HIDE_DETAILS && styles['weekly-event--collapse'])
   }, React.createElement("div", {
-    className: styles.flex
-  }, getIconEvent[event.type]), React.createElement("div", {
     className: styles['weekly-event__title']
-  }, React.createElement(CustomTooltip, {
+  }, React.createElement("div", {
+    className: styles['weekly-event__title_icon']
+  }, getIconforEvent(event)), React.createElement(CustomTooltip, {
     title: event.title
-  }, event.title))), React.createElement("div", {
+  }, event.title.length > 5 ? event.title.slice(0, 5) + '...' : '')), React.createElement("div", {
     className: styles['weekly-event__date']
   }, React.createElement(CustomTooltip, {
     title: formattedDate
-  }, formattedDate))));
+  }, formattedDate)))));
 };
 
-var LMSWeeklyCell = function LMSWeeklyCell(_ref) {
-  var _events;
+var WeeklyCell = function WeeklyCell(_ref) {
   var events = _ref.events,
     date = _ref.date,
     onOpenDetail = _ref.onOpenDetail,
@@ -963,19 +810,19 @@ var LMSWeeklyCell = function LMSWeeklyCell(_ref) {
     if (e.target !== e.currentTarget) return;
     onOpenCreate(dayjs(date).toDate());
   };
-  events = (_events = events) === null || _events === void 0 ? void 0 : _events.sort(function (a, b) {
+  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) {
+    var isAllDay = events.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, {
+    if (isAllDay && events.length > 1) {
+      return React.createElement(React.Fragment, null, React.createElement(WeeklyEvent, {
         event: events[0],
         onOpenDetail: onOpenDetail,
-        onEventDetail: onEventDetail
+        onEventDetail: onEventDetail,
+        zIndex: 1
       }), React.createElement("div", {
         className: styles['see-more']
       }, React.createElement(CustomTooltip, {
@@ -983,21 +830,23 @@ var LMSWeeklyCell = function LMSWeeklyCell(_ref) {
         title: React.createElement("div", {
           className: styles['calendar-tooltip']
         }, events.slice(1, events.length).map(function (event, index) {
-          return React.createElement(LMSWeeklyEvent, {
+          return React.createElement(WeeklyEvent, {
             event: event,
             onOpenDetail: onOpenDetail,
             onEventDetail: onEventDetail,
-            key: index + 1
+            key: index + 1,
+            zIndex: 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, {
+    return events.map(function (event, index) {
+      return React.createElement(WeeklyEvent, {
         key: index,
         event: event,
         onOpenDetail: onOpenDetail,
-        onEventDetail: onEventDetail
+        onEventDetail: onEventDetail,
+        zIndex: index + 1
       });
     });
   }, [events]);
@@ -1008,29 +857,56 @@ var LMSWeeklyCell = function LMSWeeklyCell(_ref) {
 };
 
 dayjs.extend(isBetween);
-var LMSWeeklyCalendar = function LMSWeeklyCalendar(_ref) {
+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 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;
-    }, {});
-  };
+    loading = _ref.loading,
+    type = _ref.type;
   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,
@@ -1038,31 +914,18 @@ var LMSWeeklyCalendar = function LMSWeeklyCalendar(_ref) {
         return React.createElement("div", null, value);
       }
     };
-    var hours = Array.from({
-      length: 17
-    }, function (_, i) {
-      return 7 + i;
-    });
-    var timeColums = hours.map(function (time, index) {
+    var dayColumns = Object.values(DAYS_OF_WEEK).map(function (day, 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'),
+        }, 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(LMSWeeklyCell, {
+          return React.createElement(WeeklyCell, {
             key: index,
-            events: value === null || value === void 0 ? void 0 : value.events,
-            date: value === null || value === void 0 ? void 0 : value.date,
+            events: value.events,
+            date: value.date,
             onOpenDetail: onOpenDetail,
             onOpenCreate: onOpenCreate,
             onEventDetail: onEventDetail
@@ -1070,15 +933,211 @@ var LMSWeeklyCalendar = function LMSWeeklyCalendar(_ref) {
         }
       };
     });
-    return [hourColumn].concat(timeColums);
+    return [hourColumn].concat(dayColumns);
   };
   var getTableData = function getTableData() {
     var data = [];
-    for (var i = 0; i < 7; i++) {
-      var targetHour = dayjs(startDate).add(i, 'day');
+    data.push(_extends({
+      id: -1,
+      hour: 'All day'
+    }, getEventAllDay(events, startDate)));
+    var count = type === CALENDAR_TYPE.LMS ? 7 : 0;
+    for (var i = count; i < HOURS_PER_DAY; i++) {
+      var targetHour = dayjs(startDate).add(i, 'hour');
       data.push(_extends({
         id: i,
-        hour: React.createElement("div", null, React.createElement("div", {
+        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 calculateBoxSize$1 = 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$1(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['weekly-event__title']
+  }, React.createElement("div", {
+    className: styles['weekly-event__title_icon']
+  }, getIconforEvent(event)), React.createElement(CustomTooltip, {
+    title: event.title
+  }, event.title.length > 5 ? event.title.slice(0, 5) + '...' : ''))), 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'] + " " + styles['weekly-calendar-lms__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 + 1, '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']
@@ -1100,6 +1159,282 @@ var LMSWeeklyCalendar = function LMSWeeklyCalendar(_ref) {
   });
 };
 
+function LMSModeWeeklyCalendar(_ref) {
+  var startDate = _ref.startDate,
+    endDate = _ref.endDate,
+    events = _ref.events,
+    norms = _ref.norms,
+    _ref$showWeeklyNorm = _ref.showWeeklyNorm,
+    showWeeklyNorm = _ref$showWeeklyNorm === void 0 ? false : _ref$showWeeklyNorm,
+    onOpenDetail = _ref.onOpenDetail,
+    onOpenCreate = _ref.onOpenCreate,
+    onEventDetail = _ref.onEventDetail,
+    loading = _ref.loading;
+  var _useState = useState(window.innerWidth),
+    windowWidth = _useState[0],
+    setWindowWidth = _useState[1];
+  useEffect(function () {
+    var handleResize = function handleResize() {
+      setWindowWidth(window.innerWidth);
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return React.createElement(React.Fragment, null, windowWidth > 1024 ? React.createElement(WeeklyCalendar, {
+    startDate: startDate,
+    endDate: endDate,
+    events: events,
+    norms: norms,
+    showWeeklyNorm: showWeeklyNorm,
+    onOpenDetail: onOpenDetail,
+    onOpenCreate: onOpenCreate,
+    onEventDetail: onEventDetail,
+    loading: loading,
+    type: CALENDAR_TYPE.LMS
+  }) : React.createElement(LMSWeeklyCalendar, {
+    startDate: startDate,
+    endDate: endDate,
+    events: events,
+    norms: norms,
+    onOpenDetail: onOpenDetail,
+    onOpenCreate: onOpenCreate,
+    onEventDetail: onEventDetail,
+    loading: loading,
+    type: CALENDAR_TYPE.LMS
+  }));
+}
+
+var SelectBox = function SelectBox(_ref) {
+  var value = _ref.value,
+    options = _ref.options,
+    defaultValue = _ref.defaultValue,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    disabled = _ref.disabled,
+    onChange = _ref.onChange;
+  return React.createElement(Select, {
+    defaultValue: defaultValue,
+    className: className,
+    disabled: disabled,
+    options: options,
+    value: value,
+    onChange: onChange
+  });
+};
+
+var LMSHeaderCalendar = function LMSHeaderCalendar(_ref) {
+  var title = _ref.title,
+    showTeacherName = _ref.showTeacherName,
+    currentDate = _ref.currentDate,
+    setCurrentDate = _ref.setCurrentDate,
+    calendarMode = _ref.calendarMode,
+    setCalendarMode = _ref.setCalendarMode,
+    toggleTurnOnFilter = _ref.toggleTurnOnFilter,
+    filter = _ref.filter,
+    hasFilter = _ref.hasFilter;
+  var options = [{
+    value: 'month',
+    label: 'Month'
+  }, {
+    value: 'week',
+    label: 'Week'
+  }];
+  var handleChangeDate = function handleChangeDate(date) {
+    setCurrentDate(date);
+  };
+  var handleChangeMode = function handleChangeMode(mode) {
+    setCalendarMode(mode);
+    setCurrentDate(dayjs());
+  };
+  return React.createElement("div", {
+    className: styles['header-calendar']
+  }, React.createElement("div", {
+    className: styles['header-calendar_filter']
+  }, hasFilter && React.createElement("div", {
+    className: clsx$1(styles['hover-item'], filter.isOpen && styles['text-lms-primary']),
+    onClick: toggleTurnOnFilter
+  }, React.createElement(FilterIcon, null)), React.createElement("div", {
+    className: "" + styles['header-calendar__nav']
+  }, React.createElement(Icon, {
+    icon: React.createElement(LeftArrowIcon, null),
+    onClick: function onClick() {
+      return handleChangeDate(currentDate.subtract(1, calendarMode));
+    },
+    className: styles['rounded-none']
+  }), React.createElement(DatePicker, {
+    picker: calendarMode === 'day' ? 'date' : calendarMode,
+    onChange: handleChangeDate,
+    format: function format(value) {
+      return customDateFormat(value, calendarMode === 'day' ? FORMAT_DATE_CARLENDA.DATE : FORMAT_DATE_CARLENDA.MONTH_AND_WEEK);
+    },
+    value: currentDate,
+    allowClear: false,
+    suffixIcon: null,
+    className: styles['header-calendar__date-picker'],
+    size: 'large'
+  }), React.createElement(Icon, {
+    icon: React.createElement(RightArrowIcon, null),
+    onClick: function onClick() {
+      return handleChangeDate(currentDate.add(1, calendarMode));
+    }
+  }))), showTeacherName && React.createElement("div", {
+    className: styles['header-calendar__title']
+  }, title), React.createElement("div", {
+    className: styles['header-calendar__controls']
+  }, React.createElement(Button, {
+    color: 'lms-default',
+    onClick: function onClick() {
+      return handleChangeDate(dayjs());
+    }
+  }, "Today"), React.createElement("div", {
+    className: styles['header-calendar__divider']
+  }), React.createElement(SelectBox, {
+    value: calendarMode,
+    options: options,
+    className: 'select-mode',
+    onChange: function onChange(mode) {
+      handleChangeMode(mode);
+    }
+  })));
+};
+
+var styles$1 = {"ant-picker-calendar-header":"_2Y9jk","ant-radio-group":"_3puh0","ant-picker-calendar-month-select":"_1b_yY","calendar-filter":"_1K0QG","calendar-filter_title":"_1kmo4","calendar-filter_note_blue":"_3yl3q","calendar-filter_note_pureple":"_dS6FM","calendar-filter_note_green":"_2v-Pp","calendar-filter_note_yellow":"_1u4J8","calendar-filter_note_red":"_1RLYM","calendar-filter_content_list_item":"_29aaM","calendar-filter_content_item_eye":"_1yCoo"};
+
+var FilterCalendar = function FilterCalendar(_ref) {
+  var filter = _ref.filter,
+    setFilter = _ref.setFilter,
+    courses = _ref.courses,
+    onRefetchAPI = _ref.onRefetchAPI;
+  var noteFilter = useMemo(function () {
+    return [{
+      title: 'Online',
+      icon: React.createElement("div", {
+        className: styles$1['calendar-filter_note_blue']
+      }),
+      value: LEARNING_MODE.ONLINE
+    }, {
+      title: 'Live Online',
+      icon: React.createElement("div", {
+        className: styles$1['calendar-filter_note_pureple']
+      }),
+      value: LEARNING_MODE.LIVE_ONLINE
+    }, {
+      title: 'Offline',
+      icon: React.createElement("div", {
+        className: styles$1['calendar-filter_note_green']
+      }),
+      value: LEARNING_MODE.OFFLINE
+    }, {
+      title: 'Test',
+      icon: React.createElement(TestIcon, null),
+      value: LEARNING_MODE.TEST
+    }, {
+      title: 'Case Study',
+      icon: React.createElement(GoldStarIcon, null),
+      value: LEARNING_MODE.CASE_STUDY
+    }, {
+      title: 'Key Content Before',
+      icon: React.createElement(FlagIcon, null),
+      value: LEARNING_MODE.KEY_BEFORE_CONTENT
+    }, {
+      title: 'Holiday',
+      icon: React.createElement("div", {
+        className: styles$1['calendar-filter_note_yellow']
+      }),
+      value: LEARNING_MODE.HOLIDAY
+    }, {
+      title: 'Overdue',
+      icon: React.createElement("div", {
+        className: styles$1['calendar-filter_note_red']
+      }),
+      value: LEARNING_MODE.OVERDUE
+    }];
+  }, []);
+  var handleFilter = function handleFilter(type, value) {
+    switch (type) {
+      case 'course':
+        {
+          setFilter(function (prev) {
+            var courseId = prev.courseId || [];
+            var updatedCourseId = courseId.includes(value) ? courseId.filter(function (item) {
+              return item !== value;
+            }) : [].concat(courseId, [value]);
+            return _extends({}, prev, {
+              courseId: updatedCourseId
+            });
+          });
+          break;
+        }
+      case 'note':
+        {
+          setFilter(function (prev) {
+            var typeArray = prev.type || [];
+            var updatedType = typeArray.includes(value) ? typeArray.filter(function (item) {
+              return item !== value;
+            }) : [].concat(typeArray, [value]);
+            return _extends({}, prev, {
+              type: updatedType
+            });
+          });
+          break;
+        }
+      case 'day':
+        {
+          setFilter(function (prev) {
+            return _extends({}, prev, {
+              day: value
+            });
+          });
+          break;
+        }
+    }
+  };
+  var handleFilterday = function handleFilterday(date) {
+    onRefetchAPI(date.toDate());
+    handleFilter('day', date.toString());
+  };
+  return React.createElement("div", {
+    className: styles$1['calendar-filter']
+  }, React.createElement(Calendar, {
+    mode: 'month',
+    className: styles$1['custom-today-picker'],
+    fullscreen: false,
+    onChange: handleFilterday
+  }), React.createElement("div", null, React.createElement("div", {
+    className: styles$1['calendar-filter_title']
+  }, React.createElement(TagIcon, null), React.createElement("h3", null, "Notes")), React.createElement("div", null, noteFilter.map(function (item) {
+    var _filter$type;
+    return React.createElement("div", {
+      className: styles$1['calendar-filter_content_list_item'],
+      key: item.value
+    }, React.createElement("div", {
+      className: styles$1['calendar-filter_content_list_item']
+    }, item.icon, item.title), React.createElement("div", {
+      onClick: function onClick() {
+        return handleFilter('note', item.value);
+      },
+      className: styles$1['calendar-filter_content_item_eye']
+    }, (_filter$type = filter.type) !== null && _filter$type !== void 0 && _filter$type.includes(item.value) ? React.createElement(EyeIcon, null) : React.createElement(HiddenEyeIcon, null)));
+  }))), React.createElement("div", null, React.createElement("div", {
+    className: styles$1['calendar-filter_title']
+  }, React.createElement(EducationIcon, null), React.createElement("h3", null, "My courses")), React.createElement("div", null, courses === null || courses === void 0 ? void 0 : courses.map(function (item, key) {
+    var _filter$courseId;
+    return React.createElement("div", {
+      key: key,
+      className: styles$1['calendar-filter_content_list_item']
+    }, React.createElement("div", {
+      className: styles$1['calendar-filter_content_list_item']
+    }, item.name), React.createElement("div", {
+      onClick: function onClick() {
+        return handleFilter('course', item.id);
+      },
+      className: styles$1['calendar-filter_content_item_eye']
+    }, (_filter$courseId = filter.courseId) !== null && _filter$courseId !== void 0 && _filter$courseId.includes(item.id) ? React.createElement(EyeIcon, null) : React.createElement(HiddenEyeIcon, null)));
+  }))));
+};
+
 var SAPPCalendar = function SAPPCalendar(_ref) {
   var teacherName = _ref.teacherName,
     events = _ref.events,
@@ -1115,80 +1450,81 @@ var SAPPCalendar = function SAPPCalendar(_ref) {
     onEventDetail = _ref.onEventDetail,
     loading = _ref.loading,
     _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'normal' : _ref$type,
+    type = _ref$type === void 0 ? 'OPS' : _ref$type,
     courses = _ref.courses,
-    onFilter = _ref.onFilter;
+    onfilter = _ref.onfilter,
+    _ref$hasFilter = _ref.hasFilter,
+    hasFilter = _ref$hasFilter === void 0 ? false : _ref$hasFilter,
+    _ref$headerType = _ref.headerType,
+    headerType = _ref$headerType === void 0 ? CALENDAR_TYPE.OPS : _ref$headerType;
   var _useState = useState(dayjs()),
     currentDate = _useState[0],
     setCurrentDate = _useState[1];
-  var _useState2 = useState('week'),
+  var _useState2 = useState('month'),
     calendarMode = _useState2[0],
     setCalendarMode = _useState2[1];
   var _useState3 = useState({
+      courseId: courses ? courses.map(function (item) {
+        return item.id;
+      }) : [],
       isOpen: false,
       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;
-      }) : []
+      day: ''
     }),
     filter = _useState3[0],
     setFilter = _useState3[1];
   var startDate = useMemo(function () {
-    if (calendarMode === 'day') {
-      return dayjs(currentDate).startOf('day');
-    }
     return dayjs(currentDate).startOf(calendarMode).startOf('week').add(1, 'day');
   }, [currentDate, calendarMode]);
   var endDate = useMemo(function () {
-    if (calendarMode === 'day') {
-      return dayjs(currentDate).endOf('day');
-    }
     return dayjs(currentDate).endOf(calendarMode).endOf('week').add(1, 'day');
   }, [currentDate, calendarMode]);
   var splittedEvents = splitEventsIntoDays(events);
   splittedEvents.sort(function (a, b) {
     return dayjs(a.startDate).diff(b.startDate);
   });
-  var handleToggleFilter = function handleToggleFilter() {
-    setFilter(function (prev) {
-      return _extends({}, filter, {
-        isOpen: !prev.isOpen
-      });
-    });
+  var handleFilterDate = function handleFilterDate(date) {
+    setCurrentDate(date);
   };
+  useEffect(function () {
+    onfilter && onfilter(filter);
+  }, [filter]);
   useEffectAfterMounted(function () {
     onRefetchAPI(startDate.toDate(), endDate.toDate());
   }, [startDate, endDate]);
-  console.log('course:', courses);
-  useEffect(function () {
-    if (type === 'filter') {
-      onFilter && onFilter(filter);
-    }
-  }, [filter]);
   return React.createElement("div", {
     className: styles['sapp-calendar']
   }, filter.isOpen && React.createElement(FilterCalendar, {
-    courses: courses,
     filter: filter,
-    setFilter: setFilter
+    setFilter: setFilter,
+    onRefetchAPI: function onRefetchAPI(date) {
+      return handleFilterDate(dayjs(date));
+    }
   }), React.createElement("div", {
     className: styles['sapp-calendar__container']
-  }, type === 'normal' ? React.createElement(HeaderCalendar, {
+  }, headerType === CALENDAR_TYPE.LMS ? React.createElement(LMSHeaderCalendar, {
     title: teacherName,
     showTeacherName: showTeacherName,
     currentDate: currentDate,
     setCurrentDate: setCurrentDate,
     calendarMode: calendarMode,
-    setCalendarMode: setCalendarMode
-  }) : React.createElement(LMSHeaderCalendar, {
+    setCalendarMode: setCalendarMode,
+    toggleTurnOnFilter: function toggleTurnOnFilter() {
+      return setFilter(function (prev) {
+        return _extends({}, prev, {
+          isOpen: !filter.isOpen
+        });
+      });
+    },
+    hasFilter: hasFilter,
+    filter: filter
+  }) : React.createElement(HeaderCalendar, {
     title: teacherName,
     showTeacherName: showTeacherName,
     currentDate: currentDate,
     setCurrentDate: setCurrentDate,
     calendarMode: calendarMode,
-    setCalendarMode: setCalendarMode,
-    toggleTurnOnFilter: handleToggleFilter,
-    filter: filter
+    setCalendarMode: setCalendarMode
   }), calendarMode === 'month' && React.createElement(MonthlyCalendar, {
     currentDate: currentDate,
     startDate: startDate,
@@ -1200,11 +1536,22 @@ var SAPPCalendar = function SAPPCalendar(_ref) {
     onOpenCreate: onOpenCreate,
     onEventDetail: onEventDetail,
     loading: loading
-  }), calendarMode === 'week' && React.createElement(LMSWeeklyCalendar, {
+  }), calendarMode === 'week' && type === CALENDAR_TYPE.LMS && React.createElement(LMSModeWeeklyCalendar, {
+    startDate: startDate,
+    endDate: endDate,
+    events: splittedEvents,
+    norms: norms,
+    showWeeklyNorm: showWeeklyNorm,
+    onOpenDetail: onOpenDetail,
+    onOpenCreate: onOpenCreate,
+    onEventDetail: onEventDetail,
+    loading: loading
+  }), calendarMode === 'week' && type === CALENDAR_TYPE.OPS && React.createElement(WeeklyCalendar, {
     startDate: startDate,
     endDate: endDate,
     events: splittedEvents,
     norms: norms,
+    showWeeklyNorm: showWeeklyNorm,
     onOpenDetail: onOpenDetail,
     onOpenCreate: onOpenCreate,
     onEventDetail: onEventDetail,