evui 2.0.8 → 2.1.1

package/src/components/datepicker/calendar.core.js

@@ -5,33 +5,64 @@
   consistent-return:
     ["error", { "treatUndefinedAsUnspecified": true }]
 */
-import _ from 'lodash';
+import { merge, remove } from 'lodash-es';
 
 class Calendar {
   constructor(target, options) {
     const today = new Date();
     const obj = {
       // default width, height(onePage)
-      width: 235,
-      height: 220,
+      width: 224,
+      height: 222,
       // style
       colors: {
-        background: '#fff',
-        border: 'f0f0f0',
-        thisMonthFont: '#202020',
-        thisMonthFill: '#f5f5f5',
-        prevNextMonthFont: '#ccc',
-        prevNextMonthFill: '#fff',
-        selectDayFill: 'rgba(0, 255, 0, 0.1)',
-        mousemoveDayFill: 'rgba(255, 0, 0, 0.1)',
+        light: {
+          background: '#FFFFFF',
+          border: '#CFCFCF',
+          thisMonthFont: '#202020',
+          thisMonthFill: '#F5F5F5',
+          yearMonthColor: '#505050',
+          prevNextMonthFont: '#CCCCCC',
+          prevNextMonthFill: '#FFFFFF',
+          selectDayFill: 'rgba(0, 255, 0, 0.3)',
+          mousemoveDayFill: 'rgba(255, 0, 0, 0.3)',
+          triangle: '#B2B2B2',
+          weekColor: '#000000',
+          dayColor: '#000000',
+          timeLabelFont: '#989898',
+          timeLabelFill: '#E5E5E5',
+          timeLabelStroke: '#CFCFCF',
+          timeAreaFill: '#E5E5E5',
+          selectDay: '#FFFFFF',
+        },
+        dark: {
+          background: '#191919',
+          border: '#333333',
+          thisMonthFont: '#FFFFFF',
+          thisMonthFill: '#333333',
+          yearMonthColor: '#FFFFFF',
+          prevNextMonthFont: '#999999',
+          prevNextMonthFill: '#191919',
+          selectDayFill: 'rgba(0, 255, 0, 0.3)',
+          mousemoveDayFill: 'rgba(255, 0, 0, 0.3)',
+          triangle: '#666666',
+          weekColor: '#FFFFFF',
+          dayColor: '#FFFFFF',
+          timeLabelFont: '#666666',
+          timeLabelFill: '#262626',
+          timeLabelStroke: '#CFCFCF',
+          timeAreaFill: '#191919',
+          selectDay: '#000000',
+        },
       },
-      font: 'bold 12px sans-serif',
+      font: 'bold 12px Roboto',
       padding: {
-        top: 5,
-        right: 5,
-        bottom: 5,
-        left: 5,
+        top: 1,
+        right: 1,
+        bottom: 1,
+        left: 1,
       },
+      theme: 'light',
 
       // 캔버스만 화면에 보여줄 경우 false (ref. datepicker-default.vue)
       // input text에 연계하여 드랍다운으로 보여줄 경우 true (ref. datepicker.vue)
@@ -56,8 +87,8 @@ class Calendar {
 
       // init parameter
       pickerArea: {
-        triangleLength: 15,
-        height: 25,
+        triangleLength: 10,
+        height: 35,
       },
       calendarArea: {
       },
@@ -72,7 +103,7 @@ class Calendar {
         // timeArea안에 hour, min, sec가 한 페이지에 몇 row * column으로 구성되는지
         columnCount: 6,
         rowCount: 2,
-        triangleLength: 13,
+        triangleLength: 10,
       },
 
       // canvas context style
@@ -99,7 +130,7 @@ class Calendar {
           bottom: 0,
           left: 0,
         },
-        font: '10px Roboto Condensed',
+        font: '12px Roboto',
       },
       // selectable: true, // 선택 가능 여부 (이번달 & 오늘 전까지)
 
@@ -121,9 +152,9 @@ class Calendar {
       timeTypeName: ['hour', 'minute', 'second'],
       titleType: {
         // 'fullName', 'numberName', 'abbrName' 중 선택
-        month: 'fullName',
+        month: 'abbrName',
         // 'abbrUpperName', 'abbrLowerName' 중 선택
-        dayOfTheWeek: 'abbrUpperName',
+        dayOfTheWeek: 'abbrLowerName',
       },
 
       // left : datepicker[default], right: timepicker - expand show?
@@ -134,12 +165,16 @@ class Calendar {
     };
 
     // parameter mapping
-    this.options = _.merge({}, obj, options);
+    this.options = merge({}, obj, options);
 
     // create & init canvas
     this.dropdown = document.createElement('div');
     this.dropdown.setAttribute('class', 'ev-calendar-dropdown');
-    this.dropdown.setAttribute('style', 'position: absolute; display: none; z-index: 1; background: #ffffff');
+    const bgColor = this.options.colors[this.options.theme].background;
+    this.dropdown.setAttribute('style', `position: absolute; display: none; 
+      z-index: 850; background: ${bgColor}; border-radius: 4px; 
+      box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.27); border: 0.5px solid #B2B2B2;
+      box-sizing: border-box;`);
     this.baseCanvas = document.createElement('canvas');
     this.baseCanvas.setAttribute('class', 'ev-calendar-canvas');
     this.context = this.baseCanvas.getContext('2d');
@@ -215,27 +250,12 @@ class Calendar {
     }
   }
 
-  removeDropdown() {
-    document.body.removeChild(this.dropdown);
-  }
-  showDropdown(e) {
-    this.dropdown.style.display = 'block';
-    let targetDivHeight = 0;
-    if (e.currentTarget && e.currentTarget.clientHeight) {
-      targetDivHeight = e.currentTarget.clientHeight;
-    }
-    this.dropdown.style.top = `${(e.pageY - e.layerY) + targetDivHeight}px`;
-    this.dropdown.style.left = `${e.pageX - e.layerX}px`;
-  }
-  hideDropdown() {
-    this.dropdown.style.display = 'none';
-  }
-
   init() {
     this.initOptionsProperty();
     this.initCalendarProperty();
     this.initCanvasProperty();
   }
+
   initOptionsProperty() {
     if (this.options.initSelectDayFlag
       && this.options.selectDayType === 'day'
@@ -244,30 +264,30 @@ class Calendar {
       if (!this.options.timeExpand) {
         this.options.initSelectDay = this.options.initSelectDay.setHours(0, 0, 0, 0);
       } else {
-        this.coordinate.timeArea.hour.select = this.options.initSelectDay.getHours();
-        this.coordinate.timeArea.minute.select = this.options.initSelectDay.getMinutes();
-        this.coordinate.timeArea.second.select = this.options.initSelectDay.getSeconds();
-        this.coordinate.timeArea.hour.page
-          = Math.floor(this.coordinate.timeArea.hour.select / 12) + 1;
-        this.coordinate.timeArea.minute.page
-          = Math.floor(this.coordinate.timeArea.minute.select / 12) + 1;
-        this.coordinate.timeArea.second.page
-          = Math.floor(this.coordinate.timeArea.second.select / 12) + 1;
+        const timeArea = this.coordinate.timeArea;
+        timeArea.hour.select = this.options.initSelectDay.getHours();
+        timeArea.minute.select = this.options.initSelectDay.getMinutes();
+        timeArea.second.select = this.options.initSelectDay.getSeconds();
+        timeArea.hour.page = Math.floor(timeArea.hour.select / 12) + 1;
+        timeArea.minute.page = Math.floor(timeArea.minute.select / 12) + 1;
+        timeArea.second.page = Math.floor(timeArea.second.select / 12) + 1;
       }
       const initSelectDay = new Date(this.options.initSelectDay);
+      const year = initSelectDay.getFullYear();
+      const month = initSelectDay.getMonth();
       const obj = {
-        year: initSelectDay.getFullYear(),
-        month: initSelectDay.getMonth() + 1,
+        year,
+        month: month + 1,
         day: initSelectDay.getDate(),
       };
       this.coordinate.calendarArea.selectDayArr.push(obj);
-      this.options.currentYearMonth =
-        new Date(initSelectDay.getFullYear(), initSelectDay.getMonth(), 1);
+      this.options.currentYearMonth = new Date(year, month, 1);
     }
     if (this.options.initLimitDay) {
       this.options.initLimitDay = this.options.initLimitDay.setHours(0, 0, 0, 0);
     }
   }
+
   initCanvasProperty() {
     // set total width, height 1
     if (this.options.width && this.options.height) {
@@ -295,9 +315,10 @@ class Calendar {
       startY: padding.top,
       height: pickerAreaHeight,
     };
+    const caPaddingLR = 10; // calendar area padding l/r
     this.coordinate.calendarArea.total = {
-      startX: padding.left,
-      width: commonAreaTotalWidth - 1,
+      startX: padding.left + caPaddingLR,
+      width: commonAreaTotalWidth - (caPaddingLR * 2) - 1,
       startY: +padding.top + +pickerAreaHeight,
       height: this.baseCanvas.height - pickerAreaHeight - padding.top - padding.bottom,
     };
@@ -335,13 +356,16 @@ class Calendar {
       });
     }
   }
+
   initCalendarProperty() {
     // 이번달 thisMonth월
     const thisMonth = this.options.currentYearMonth.getMonth() + 1;
+    // 이번 년도
+    const thisYear = this.options.currentYearMonth.getFullYear();
     // 저번달 마지막 날짜
-    this.prevMonthLastDate = +this.getLastDayOfMonth(thisMonth - 1);
+    this.prevMonthLastDate = +this.getLastDayOfMonth(thisMonth - 1, thisYear);
     // 이번달 마지막 날짜
-    this.thisMonthLastDate = +this.getLastDayOfMonth(thisMonth);
+    this.thisMonthLastDate = +this.getLastDayOfMonth(thisMonth, thisYear);
     // 이번달 첫번째 요일(sun : 0, sat : 6) & 해당 달력에서 선택된 달의 1일까지의 공백 before 일수
     this.thisMonthFirstDay = +this.options.currentYearMonth.getDay();
     // 이번달의 주 개수 (4주 ~ 6주)
@@ -350,132 +374,134 @@ class Calendar {
   }
 
   mouseInit() {
+    this.mousemove = this.onMousemove.bind(this);
+    this.mousedown = this.onMousedown.bind(this);
+    this.mouseleave = this.onMouseleave.bind(this);
+    this.mousewheel = this.onMousewheel.bind(this);
     this.initMouseclick();
     this.initMousemove();
     this.initMouseleave();
     this.initMousewheel();
   }
+
   initMousemove() {
-    this.overCanvas.addEventListener('mousemove', (e) => {
-      e.preventDefault();
-      // init value
-      const overCtx = this.overCtx;
-      let mouseoverFlag = false;
-
-      // mousemove on day box in calendar area
-      // e.offsetX의 너비에 + this.options.timeArea.titleWidth를 하는 이유는 calendarArea에서 마우스가
-      // 우측 title범위로 벗어나는 경우에 clear해주기 위함
-      const calendarAreaTotal = this.coordinate.calendarArea.total;
-      if (e.offsetX > calendarAreaTotal.startX
-        && e.offsetX < calendarAreaTotal.startX + calendarAreaTotal.width
-          + this.options.timeArea.titleWidth
-        && e.offsetY > calendarAreaTotal.startY
-        && e.offsetY < calendarAreaTotal.startY + calendarAreaTotal.height) {
-        this.clearCanvas(overCtx,
-          calendarAreaTotal.startX, calendarAreaTotal.startY,
-          calendarAreaTotal.width, calendarAreaTotal.height,
-        );
-        this.mousemoveDate(e);
-        mouseoverFlag = true;
-      }
+    this.overCanvas.addEventListener('mousemove', this.mousemove);
+  }
 
-      // mousemove on hour, minute, second box
-      const timeTypeName = this.options.timeTypeName;
-      const timeAreaTotal = this.coordinate.timeArea.total;
-      const localeType = this.options.localeType;
-      let condition = true;
-      if (e.offsetX > timeAreaTotal.startX
-        && e.offsetX < timeAreaTotal.startX + timeAreaTotal.width
-        && e.offsetY > timeAreaTotal.startY
-        && e.offsetY < timeAreaTotal.startY + timeAreaTotal.height
-      ) {
-        this.clearCanvas(overCtx,
-          timeAreaTotal.startX, timeAreaTotal.startY,
-          timeAreaTotal.width, timeAreaTotal.height,
-        );
-        timeTypeName.forEach((type) => {
-          if (localeType === 'YYYY-MM-DD HH:mm:ss') {
-            condition = type === 'hour' || type === 'minute' || type === 'second';
-          } else if (localeType === 'YYYY-MM-DD HH:mm') {
-            condition = type === 'hour' || type === 'minute';
-          } else if (localeType === 'YYYY-MM-DD HH') {
-            condition = type === 'hour';
-          } else if (localeType === 'YYYY-MM-DD') {
-            condition = false;
-          }
-          if (condition) {
-            const timeAreaType = this.coordinate.timeArea[type];
-            timeAreaType.data.forEach((v, idx) => {
-              if (timeAreaType.page === v.page) {
-                if (e.offsetY > v.startY && e.offsetY < v.startY + v.height
-                  && e.offsetX > v.startX && e.offsetX < v.startX + v.width) {
-                  this.dynamicDraw(
-                    overCtx, v.startX, v.startY,
-                    v.width, v.height,
-                    {
-                      fill: {
-                        show: true,
-                        color: this.options.colors.mousemoveDayFill,
-                      },
-                    },
-                  );
-                  mouseoverFlag = true;
-                }
-                if (timeAreaType.select === idx) {
-                  this.dynamicDraw(
-                    overCtx, v.startX, v.startY,
-                    v.width, v.height, {
-                      fill: {
-                        show: true,
-                        color: this.options.colors.selectDayFill,
-                      },
-                    },
-                  );
-                }
+  onMousemove(e) {
+    e.preventDefault();
+    // init value
+    const overCtx = this.overCtx;
+    let mouseoverFlag = false;
+
+    // mousemove on day box in calendar area
+    // e.offsetX의 너비에 + this.options.timeArea.titleWidth를 하는 이유는 calendarArea에서 마우스가
+    // 우측 title범위로 벗어나는 경우에 clear해주기 위함
+    const calendarAreaTotal = this.coordinate.calendarArea.total;
+    if (e.offsetX > calendarAreaTotal.startX
+      && e.offsetX < calendarAreaTotal.startX + calendarAreaTotal.width
+      + this.options.timeArea.titleWidth
+      && e.offsetY > calendarAreaTotal.startY
+      && e.offsetY < calendarAreaTotal.startY + calendarAreaTotal.height) {
+      this.clearCanvas(overCtx,
+        calendarAreaTotal.startX, calendarAreaTotal.startY,
+        calendarAreaTotal.width, calendarAreaTotal.height,
+      );
+      this.mousemoveDate(e);
+      mouseoverFlag = true;
+    }
+
+    // mousemove on hour, minute, second box
+    const timeTypeName = this.options.timeTypeName;
+    const timeAreaTotal = this.coordinate.timeArea.total;
+    const localeType = this.options.localeType;
+    let condition = true;
+    if (e.offsetX > timeAreaTotal.startX
+      && e.offsetX < timeAreaTotal.startX + timeAreaTotal.width
+      && e.offsetY > timeAreaTotal.startY
+      && e.offsetY < timeAreaTotal.startY + timeAreaTotal.height
+    ) {
+      this.clearCanvas(overCtx,
+        timeAreaTotal.startX, timeAreaTotal.startY,
+        timeAreaTotal.width, timeAreaTotal.height,
+      );
+      timeTypeName.forEach((type) => {
+        if (localeType === 'YYYY-MM-DD HH:mm:ss') {
+          condition = type === 'hour' || type === 'minute' || type === 'second';
+        } else if (localeType === 'YYYY-MM-DD HH:mm') {
+          condition = type === 'hour' || type === 'minute';
+        } else if (localeType === 'YYYY-MM-DD HH') {
+          condition = type === 'hour';
+        } else if (localeType === 'YYYY-MM-DD') {
+          condition = false;
+        }
+        if (condition) {
+          const timeAreaType = this.coordinate.timeArea[type];
+          timeAreaType.data.forEach((v, idx) => {
+            if (timeAreaType.page === v.page) {
+              if (e.offsetY > v.startY && e.offsetY < v.startY + v.height
+                && e.offsetX > v.startX && e.offsetX < v.startX + v.width) {
+                overCtx.beginPath();
+                const cx = v.startX + (v.width / 2);
+                const cy = v.startY + (v.height / 2);
+                const r = (v.width < v.height) ? (v.width / 2) : (v.height / 2);
+                overCtx.arc(cx, cy, r, 0, Math.PI * 2, true);
+                overCtx.fillStyle = this.options.colors[this.options.theme].mousemoveDayFill;
+                overCtx.fill();
+                mouseoverFlag = true;
               }
-            });
-          } else {
-            this.updateTimeArea(type);
-          }
-        });
+              if (timeAreaType.select === idx) {
+                overCtx.beginPath();
+                const cx = v.startX + (v.width / 2);
+                const cy = v.startY + (v.height / 2);
+                const r = (v.width < v.height) ? (v.width / 2) : (v.height / 2);
+                overCtx.arc(cx, cy, r, 0, Math.PI * 2, true);
+                overCtx.fillStyle = this.options.colors[this.options.theme].selectDayFill;
+                overCtx.fill();
+              }
+            }
+          });
+        } else {
+          this.updateTimeArea(type);
+        }
+      });
+    }
+
+    // mousemove on triangle in picker area (month)
+    const pickerAreaArrow = this.coordinate.pickerArea.arrow;
+    const pickerAreaOption = this.options.pickerArea;
+    let pickerAreaArrowOver = false;
+    pickerAreaArrow.forEach((v, idx) => {
+      pickerAreaArrowOver = this.existTriangle(
+        pickerAreaArrow[idx].centerX, pickerAreaArrow[idx].centerY,
+        v.direction, pickerAreaOption.triangleLength, e.offsetX, e.offsetY,
+      );
+      if (pickerAreaArrowOver) {
+        mouseoverFlag = true;
       }
+    });
 
-      // mousemove on triangle in picker area (month)
-      const pickerAreaArrow = this.coordinate.pickerArea.arrow;
-      const pickerAreaOption = this.options.pickerArea;
-      let pickerAreaArrowOver = false;
-      pickerAreaArrow.forEach((v, idx) => {
-        pickerAreaArrowOver = this.existTriangle(
-          pickerAreaArrow[idx].centerX, pickerAreaArrow[idx].centerY,
-          v.direction, pickerAreaOption.triangleLength, e.offsetX, e.offsetY,
+    // mousemove on triangle in time area (HMS)
+    const timeAreaOption = this.options.timeArea;
+    let timeAreaArrowOver = false;
+    this.options.timeTypeName.forEach((type) => {
+      const timeAreaTypeArrow = this.coordinate.timeArea[type].arrow;
+      timeAreaTypeArrow.forEach((v, idx) => {
+        timeAreaArrowOver = this.existTriangle(
+          timeAreaTypeArrow[idx].centerX, timeAreaTypeArrow[idx].centerY,
+          v.direction, timeAreaOption.triangleLength, e.offsetX, e.offsetY,
         );
-        if (pickerAreaArrowOver) {
+        if (timeAreaArrowOver) {
           mouseoverFlag = true;
         }
       });
-
-      // mousemove on triangle in time area (HMS)
-      const timeAreaOption = this.options.timeArea;
-      let timeAreaArrowOver = false;
-      this.options.timeTypeName.forEach((type) => {
-        const timeAreaTypeArrow = this.coordinate.timeArea[type].arrow;
-        timeAreaTypeArrow.forEach((v, idx) => {
-          timeAreaArrowOver = this.existTriangle(
-            timeAreaTypeArrow[idx].centerX, timeAreaTypeArrow[idx].centerY,
-            v.direction, timeAreaOption.triangleLength, e.offsetX, e.offsetY,
-          );
-          if (timeAreaArrowOver) {
-            mouseoverFlag = true;
-          }
-        });
-      });
-
-      if (mouseoverFlag) {
-        this.overCanvas.style.cursor = 'pointer';
-      } else {
-        this.overCanvas.style.cursor = 'default';
-      }
     });
+
+    if (mouseoverFlag) {
+      this.overCanvas.style.cursor = 'pointer';
+    } else {
+      this.overCanvas.style.cursor = 'default';
+    }
   }
 
   mouseclickDate(e) {
@@ -495,24 +521,22 @@ class Calendar {
         && e.offsetY > v.startY
         && e.offsetY < v.startY + v.height) {
         // // 오늘 이후 비활성화 시 return false
-        // if (this.options.limitToday) {
-        //   const mouseoverDay = new Date(v.date.year, v.date.month - 1, v.date.day);
-        //   const initLimitDay = new Date(this.options.initLimitDay);
-        //   // 선택된 날(default:오늘)의 요일 (일 : 0, 토 : 6)
-        //   const initSelectGetDay = initLimitDay.getDay();
-        //   // 선택된 날의 첫번째 일요일(선택된 날 기준 첫 날)
-        //   const initSelectSunday = new Date();
-        //   initSelectSunday.setDate(initLimitDay.getDate() - initSelectGetDay);
-        //   initSelectSunday.setHours(0, 0, 0, 0);
-        //   // 선택된 날(default:오늘)보다 크거나 선택된 날의 일요일 ~ 선택된 날 사이의 날짜인 경우 false
-        //   if (initLimitDay < mouseoverDay) {
-        //     return undefined;
-        //   } else if (initSelectSunday <= mouseoverDay && mouseoverDay <= initLimitDay) {
-        //     if (this.options.selectDayType === 'weekday') {
-        //       // 개발 필요
-        //     }
-        //   }
-        // }
+        if (this.options.limitToday) {
+          if (this.options.selectDayType === 'day') {
+            const mouseoverDay = new Date(v.date.year, v.date.month - 1, v.date.day);
+            const initLimitDay = new Date(this.options.initLimitDay);
+            // 선택된 날(default:오늘)의 요일 (일 : 0, 토 : 6)
+            const initSelectGetDay = initLimitDay.getDay();
+            // 선택된 날의 첫번째 일요일(선택된 날 기준 첫 날)
+            const initSelectSunday = new Date();
+            initSelectSunday.setDate(initLimitDay.getDate() - initSelectGetDay);
+            initSelectSunday.setHours(0, 0, 0, 0);
+            // 선택된 날(default:오늘)보다 크거나 선택된 날의 일요일 ~ 선택된 날 사이의 날짜인 경우 false
+            if (initLimitDay < mouseoverDay) {
+              return undefined;
+            }
+          }
+        }
         // selectDayType에 따라 선택
         if (this.options.selectDayType === 'weekday') {
           // 1주평일(5일)
@@ -541,7 +565,7 @@ class Calendar {
               }
             }
             if (exist) {
-              _.remove(selectDayArr, date);
+              remove(selectDayArr, date);
             } else {
               selectDayArr.push(date);
             }
@@ -567,7 +591,7 @@ class Calendar {
               }
             }
             if (exist) {
-              _.remove(selectDayArr, date);
+              remove(selectDayArr, date);
             } else {
               selectDayArr.push(date);
             }
@@ -590,7 +614,7 @@ class Calendar {
               }
             }
             if (exist) {
-              _.remove(selectDayArr, date);
+              remove(selectDayArr, date);
             } else {
               selectDayArr.push(date);
             }
@@ -625,16 +649,13 @@ class Calendar {
         timeAreaType.data.forEach((v, idx) => {
           if (timeAreaType.page === v.page
             && timeAreaType.select === idx) {
-            this.dynamicDraw(
-              overCtx, v.startX, v.startY,
-              v.width, v.height,
-              {
-                fill: {
-                  show: true,
-                  color: this.options.colors.selectDayFill,
-                },
-              },
-            );
+            overCtx.beginPath();
+            const cx = v.startX + (v.width / 2);
+            const cy = v.startY + (v.height / 2);
+            const r = (v.width < v.height) ? (v.width / 2) : (v.height / 2);
+            overCtx.arc(cx, cy, r, 0, Math.PI * 2, true);
+            overCtx.fillStyle = this.options.colors[this.options.theme].selectDayFill;
+            overCtx.fill();
           }
         });
       }
@@ -642,116 +663,121 @@ class Calendar {
   }
 
   initMouseclick() {
-    this.overCanvas.addEventListener('mousedown', (e) => {
-      e.preventDefault();
-      const pickerAreaTotal = this.coordinate.pickerArea.total;
-      const calendarAreaTotal = this.coordinate.calendarArea.total;
+    this.overCanvas.addEventListener('mousedown', this.mousedown);
+  }
 
-      // CLICK triangle in picker area (LEFT, RIGHT)
-      if (e.offsetX > pickerAreaTotal.startX
-        && e.offsetX < pickerAreaTotal.startX + pickerAreaTotal.width
-        && e.offsetY > pickerAreaTotal.startY
-        && e.offsetY < pickerAreaTotal.startY + pickerAreaTotal.height) {
-        const pickerAreaArrow = this.coordinate.pickerArea.arrow;
-        const pickerAreaOption = this.options.pickerArea;
-        const currDate = this.options.currentYearMonth;
+  onMousedown(e) {
+    e.preventDefault();
+    const pickerAreaTotal = this.coordinate.pickerArea.total;
+    const calendarAreaTotal = this.coordinate.calendarArea.total;
+
+    // CLICK triangle in picker area (LEFT, RIGHT)
+    if (e.offsetX > pickerAreaTotal.startX
+      && e.offsetX < pickerAreaTotal.startX + pickerAreaTotal.width
+      && e.offsetY > pickerAreaTotal.startY
+      && e.offsetY < pickerAreaTotal.startY + pickerAreaTotal.height) {
+      const pickerAreaArrow = this.coordinate.pickerArea.arrow;
+      const pickerAreaOption = this.options.pickerArea;
+      const currDate = this.options.currentYearMonth;
+      let exist = false;
+      pickerAreaArrow.forEach((v, idx) => {
+        exist = this.existTriangle(
+          pickerAreaArrow[idx].centerX, pickerAreaArrow[idx].centerY,
+          v.direction, pickerAreaOption.triangleLength, e.offsetX, e.offsetY,
+        );
+        if (exist) {
+          const year = currDate.getFullYear();
+          const month = currDate.getMonth();
+
+          if (v.direction === 'left') {
+            this.options.currentYearMonth = new Date(year, month - 1, 1);
+          } else if (v.direction === 'right') {
+            this.options.currentYearMonth = new Date(year, +month + +1, 1);
+          }
+          this.initCalendarProperty();
+          this.drawPickerArea();
+          this.drawCalendarDay();
+          this.clearCalendarArea();
+          this.mousemoveDate();
+        }
+      });
+    }
+
+    // CLICK Date logic
+    if (e.offsetX > calendarAreaTotal.startX
+      && e.offsetX < calendarAreaTotal.startX + calendarAreaTotal.width
+      && e.offsetY > calendarAreaTotal.startY
+      && e.offsetY < calendarAreaTotal.startY + calendarAreaTotal.height) {
+      this.mouseclickDate(e);
+    }
+
+    // CLICK triangle in time area (TOP, BOTTOM)
+    const timePageWidth = this.options.timeArea.pageWidth;
+    const timeAreaOption = this.options.timeArea;
+    const timeTypeName = this.options.timeTypeName;
+    timeTypeName.forEach((type) => {
+      const timeAreaType = this.coordinate.timeArea[type];
+      const timeAreaTypeTotal = timeAreaType.total;
+      if (e.offsetX > timeAreaTypeTotal.startX + timeAreaTypeTotal.width
+        && e.offsetX < (timeAreaTypeTotal.startX + timeAreaTypeTotal.width) + timePageWidth
+        && e.offsetY > timeAreaTypeTotal.startY
+        && e.offsetY < timeAreaTypeTotal.startY + timeAreaTypeTotal.height
+      ) {
         let exist = false;
-        pickerAreaArrow.forEach((v, idx) => {
+        timeAreaType.arrow.forEach((v) => {
           exist = this.existTriangle(
-            pickerAreaArrow[idx].centerX, pickerAreaArrow[idx].centerY,
-            v.direction, pickerAreaOption.triangleLength, e.offsetX, e.offsetY,
+            v.centerX, v.centerY,
+            v.direction, timeAreaOption.triangleLength, e.offsetX, e.offsetY,
           );
           if (exist) {
-            if (v.direction === 'left') {
-              this.options.currentYearMonth =
-                new Date(currDate.getFullYear(), currDate.getMonth() - 1, 1);
-            } else if (v.direction === 'right') {
-              this.options.currentYearMonth =
-                new Date(currDate.getFullYear(), +currDate.getMonth() + +1, 1);
+            if (v.direction === 'top') {
+              if (timeAreaType.page > 1) {
+                this.coordinate.timeArea[type].page -= 1;
+                this.drawTimeAreaContent(type);
+                this.drawSplitLine();
+                this.updateTimeArea(type);
+              }
+            } else if (v.direction === 'bottom') {
+              if (timeAreaType.page < timeAreaType.maxPage) {
+                this.coordinate.timeArea[type].page += 1;
+                this.drawTimeAreaContent(type);
+                this.drawSplitLine();
+                this.updateTimeArea(type);
+              }
             }
-            this.initCalendarProperty();
-            this.drawPickerArea();
-            this.drawCalendarDay();
-            this.clearCalendarArea();
-            this.mousemoveDate();
           }
         });
       }
+    });
 
-      // CLICK Date logic
-      if (e.offsetX > calendarAreaTotal.startX
-        && e.offsetX < calendarAreaTotal.startX + calendarAreaTotal.width
-        && e.offsetY > calendarAreaTotal.startY
-        && e.offsetY < calendarAreaTotal.startY + calendarAreaTotal.height) {
-        this.mouseclickDate(e);
+    // CLICK Time logic
+    const localeType = this.options.localeType;
+    let condition = true;
+    timeTypeName.forEach((type) => {
+      if (localeType === 'YYYY-MM-DD HH:mm:ss') {
+        condition = type === 'hour' || type === 'minute' || type === 'second';
+      } else if (localeType === 'YYYY-MM-DD HH:mm') {
+        condition = type === 'hour' || type === 'minute';
+      } else if (localeType === 'YYYY-MM-DD HH') {
+        condition = type === 'hour';
+      } else if (localeType === 'YYYY-MM-DD') {
+        condition = false;
       }
-
-      // CLICK triangle in time area (TOP, BOTTOM)
-      const timePageWidth = this.options.timeArea.pageWidth;
-      const timeAreaOption = this.options.timeArea;
-      const timeTypeName = this.options.timeTypeName;
-      timeTypeName.forEach((type) => {
+      if (condition) {
         const timeAreaType = this.coordinate.timeArea[type];
-        const timeAreaTypeTotal = timeAreaType.total;
-        if (e.offsetX > timeAreaTypeTotal.startX + timeAreaTypeTotal.width
-          && e.offsetX < (timeAreaTypeTotal.startX + timeAreaTypeTotal.width) + timePageWidth
-          && e.offsetY > timeAreaTypeTotal.startY
-          && e.offsetY < timeAreaTypeTotal.startY + timeAreaTypeTotal.height
-        ) {
-          let exist = false;
-          timeAreaType.arrow.forEach((v) => {
-            exist = this.existTriangle(
-              v.centerX, v.centerY,
-              v.direction, timeAreaOption.triangleLength, e.offsetX, e.offsetY,
-            );
-            if (exist) {
-              if (v.direction === 'top') {
-                if (timeAreaType.page > 1) {
-                  this.coordinate.timeArea[type].page -= 1;
-                  this.drawTimeAreaContent(type);
-                  this.updateTimeArea(type);
-                }
-              } else if (v.direction === 'bottom') {
-                if (timeAreaType.page < timeAreaType.maxPage) {
-                  this.coordinate.timeArea[type].page += 1;
-                  this.drawTimeAreaContent(type);
-                  this.updateTimeArea(type);
-                }
-              }
+        const timeAreaTypeData = timeAreaType.data;
+        timeAreaTypeData.forEach((v, idx) => {
+          if (timeAreaType.page === v.page) {
+            if (e.offsetX > v.startX
+              && e.offsetX < v.startX + v.width
+              && e.offsetY > v.startY
+              && e.offsetY < v.startY + v.height) {
+              timeAreaType.select = idx;
+              this.updateTimeArea(type);
             }
-          });
-        }
-      });
-
-      // CLICK Time logic
-      const localeType = this.options.localeType;
-      let condition = true;
-      timeTypeName.forEach((type) => {
-        if (localeType === 'YYYY-MM-DD HH:mm:ss') {
-          condition = type === 'hour' || type === 'minute' || type === 'second';
-        } else if (localeType === 'YYYY-MM-DD HH:mm') {
-          condition = type === 'hour' || type === 'minute';
-        } else if (localeType === 'YYYY-MM-DD HH') {
-          condition = type === 'hour';
-        } else if (localeType === 'YYYY-MM-DD') {
-          condition = false;
-        }
-        if (condition) {
-          const timeAreaType = this.coordinate.timeArea[type];
-          const timeAreaTypeData = timeAreaType.data;
-          timeAreaTypeData.forEach((v, idx) => {
-            if (timeAreaType.page === v.page) {
-              if (e.offsetX > v.startX
-                && e.offsetX < v.startX + v.width
-                && e.offsetY > v.startY
-                && e.offsetY < v.startY + v.height) {
-                timeAreaType.select = idx;
-                this.updateTimeArea(type);
-              }
-            }
-          });
-        }
-      });
+          }
+        });
+      }
     });
   }
 
@@ -782,31 +808,25 @@ class Calendar {
         if (e.offsetX > v.startX && e.offsetX < v.startX + v.width
           && e.offsetY > v.startY && e.offsetY < v.startY + v.height
         ) {
-          this.dynamicDraw(
-            overCtx, v.startX, v.startY,
-            v.width, v.height,
-            {
-              fill: {
-                show: true,
-                color: this.options.colors.mousemoveDayFill,
-              },
-            },
-          );
+          overCtx.beginPath();
+          const cx = v.startX + (v.width / 2);
+          const cy = v.startY + (v.height / 2);
+          const r = (v.width < v.height) ? (v.width / 2) : (v.height / 2);
+          overCtx.arc(cx, cy, r, 0, Math.PI * 2, true);
+          overCtx.fillStyle = this.options.colors[this.options.theme].mousemoveDayFill;
+          overCtx.fill();
         }
         selectDayArr.forEach((s) => {
           if (v.date.year === s.year
             && v.date.month === s.month
             && v.date.day === s.day) {
-            this.dynamicDraw(
-              overCtx, v.startX, v.startY,
-              v.width, v.height,
-              {
-                fill: {
-                  show: true,
-                  color: this.options.colors.selectDayFill,
-                },
-              },
-            );
+            overCtx.beginPath();
+            const cx = v.startX + (v.width / 2);
+            const cy = v.startY + (v.height / 2);
+            const r = (v.width < v.height) ? (v.width / 2) : (v.height / 2);
+            overCtx.arc(cx, cy, r, 0, Math.PI * 2, true);
+            overCtx.fillStyle = this.options.colors[this.options.theme].selectDayFill;
+            overCtx.fill();
           }
         });
       });
@@ -817,16 +837,13 @@ class Calendar {
           if (v.date.year === s.year
             && v.date.month === s.month
             && v.date.day === s.day) {
-            this.dynamicDraw(
-              overCtx, v.startX, v.startY,
-              v.width, v.height,
-              {
-                fill: {
-                  show: true,
-                  color: this.options.colors.selectDayFill,
-                },
-              },
-            );
+            overCtx.beginPath();
+            const cx = v.startX + (v.width / 2);
+            const cy = v.startY + (v.height / 2);
+            const r = (v.width < v.height) ? (v.width / 2) : (v.height / 2);
+            overCtx.arc(cx, cy, r, 0, Math.PI * 2, true);
+            overCtx.fillStyle = this.options.colors[this.options.theme].selectDayFill;
+            overCtx.fill();
           }
         });
       });
@@ -834,135 +851,135 @@ class Calendar {
   }
 
   initMouseleave() {
-    this.overCanvas.addEventListener('mouseleave', (e) => {
-      e.preventDefault();
-      const allDay = this.coordinate.calendarArea.allDay;
-      const selectDayArr = this.coordinate.calendarArea.selectDayArr;
-      const overCtx = this.overCtx;
-      this.clearCanvas(overCtx, 0, 0, this.overCanvas.width, this.overCanvas.height);
-      allDay.forEach((v) => {
-        selectDayArr.forEach((s) => {
-          if (v.date.year === s.year
-            && v.date.month === s.month
-            && v.date.day === s.day) {
-            this.dynamicDraw(
-              overCtx, v.startX, v.startY,
-              v.width, v.height,
-              {
-                fill: {
-                  show: true,
-                  color: this.options.colors.selectDayFill,
-                },
-              },
-            );
-          }
-        });
+    this.overCanvas.addEventListener('mouseleave', this.mouseleave);
+  }
+
+  onMouseleave(e) {
+    e.preventDefault();
+    const allDay = this.coordinate.calendarArea.allDay;
+    const selectDayArr = this.coordinate.calendarArea.selectDayArr;
+    const overCtx = this.overCtx;
+    this.clearCanvas(overCtx, 0, 0, this.overCanvas.width, this.overCanvas.height);
+    allDay.forEach((v) => {
+      selectDayArr.forEach((s) => {
+        if (v.date.year === s.year
+          && v.date.month === s.month
+          && v.date.day === s.day) {
+          overCtx.beginPath();
+          const cx = v.startX + (v.width / 2);
+          const cy = v.startY + (v.height / 2);
+          const r = (v.width < v.height) ? (v.width / 2) : (v.height / 2);
+          overCtx.arc(cx, cy, r, 0, Math.PI * 2, true);
+          overCtx.fillStyle = this.options.colors[this.options.theme].selectDayFill;
+          overCtx.fill();
+        }
       });
-      const timeTypeName = this.options.timeTypeName;
-      timeTypeName.forEach((type) => {
-        const timeAreaType = this.coordinate.timeArea[type];
-        timeAreaType.data.forEach((v, idx) => {
-          if (timeAreaType.page === v.page
-            && timeAreaType.select === idx) {
-            this.dynamicDraw(
-              overCtx, v.startX, v.startY,
-              v.width, v.height, {
-                fill: {
-                  show: true,
-                  color: this.options.colors.selectDayFill,
-                },
-              },
-            );
-          }
-        });
+    });
+    const timeTypeName = this.options.timeTypeName;
+    timeTypeName.forEach((type) => {
+      const timeAreaType = this.coordinate.timeArea[type];
+      timeAreaType.data.forEach((v, idx) => {
+        if (timeAreaType.page === v.page
+          && timeAreaType.select === idx) {
+          overCtx.beginPath();
+          const cx = v.startX + (v.width / 2);
+          const cy = v.startY + (v.height / 2);
+          const r = (v.width < v.height) ? (v.width / 2) : (v.height / 2);
+          overCtx.arc(cx, cy, r, 0, Math.PI * 2, true);
+          overCtx.fillStyle = this.options.colors[this.options.theme].selectDayFill;
+          overCtx.fill();
+        }
       });
     });
   }
 
   initMousewheel() {
-    this.overCanvas.addEventListener('mousewheel', (e) => {
-      e.preventDefault();
-      const pickerAreaTotal = this.coordinate.pickerArea.total;
-      const calendarAreaTotal = this.coordinate.calendarArea.total;
-      const timeAreaHourTotal = this.coordinate.timeArea.hour.total;
-      const timeAreaMinuteTotal = this.coordinate.timeArea.minute.total;
-      const timeAreaSecondTotal = this.coordinate.timeArea.second.total;
-      const timeAreaPageWidth = this.options.timeArea.pageWidth;
-
-      let areaType = '';
-      if (e.offsetX > pickerAreaTotal.startX
-        && e.offsetX < pickerAreaTotal.startX + pickerAreaTotal.width
-        && e.offsetY > pickerAreaTotal.startY
-        && e.offsetY < pickerAreaTotal.startY + pickerAreaTotal.height) {
-        areaType = 'month';
-      } else if (e.offsetX > calendarAreaTotal.startX
-        && e.offsetX < calendarAreaTotal.startX + calendarAreaTotal.width
-        && e.offsetY > calendarAreaTotal.startY
-        && e.offsetY < calendarAreaTotal.startY + calendarAreaTotal.height) {
-        areaType = 'month';
-      } else if (e.offsetX > timeAreaHourTotal.startX
-        && e.offsetX < timeAreaHourTotal.startX + timeAreaHourTotal.width + timeAreaPageWidth
-        && e.offsetY > timeAreaHourTotal.startY
-        && e.offsetY < timeAreaHourTotal.startY + timeAreaHourTotal.height) {
-        areaType = 'hour';
-      } else if (e.offsetX > timeAreaMinuteTotal.startX
-        && e.offsetX < timeAreaMinuteTotal.startX + timeAreaMinuteTotal.width + timeAreaPageWidth
-        && e.offsetY > timeAreaMinuteTotal.startY
-        && e.offsetY < timeAreaMinuteTotal.startY + timeAreaMinuteTotal.height) {
-        areaType = 'minute';
-      } else if (e.offsetX > timeAreaSecondTotal.startX
-        && e.offsetX < timeAreaSecondTotal.startX + timeAreaSecondTotal.width + timeAreaPageWidth
-        && e.offsetY > timeAreaSecondTotal.startY
-        && e.offsetY < timeAreaSecondTotal.startY + timeAreaSecondTotal.height) {
-        areaType = 'second';
-      }
+    this.overCanvas.addEventListener('mousewheel', this.mousewheel);
+  }
 
-      if (areaType === 'month') {
-        const currDate = this.options.currentYearMonth;
-        if (e.deltaY < 0) {
-          // wheel up
-          this.options.currentYearMonth =
-            new Date(currDate.getFullYear(), currDate.getMonth() - 1, 1);
-        } else if (e.deltaY > 0) {
-          // wheel down
-          this.options.currentYearMonth =
-            new Date(currDate.getFullYear(), +currDate.getMonth() + +1, 1);
+  onMousewheel(e) {
+    e.preventDefault();
+    const pickerAreaTotal = this.coordinate.pickerArea.total;
+    const calendarAreaTotal = this.coordinate.calendarArea.total;
+    const timeAreaHourTotal = this.coordinate.timeArea.hour.total;
+    const timeAreaMinuteTotal = this.coordinate.timeArea.minute.total;
+    const timeAreaSecondTotal = this.coordinate.timeArea.second.total;
+    const timeAreaPageWidth = this.options.timeArea.pageWidth;
+
+    let areaType = '';
+    if (e.offsetX > pickerAreaTotal.startX
+      && e.offsetX < pickerAreaTotal.startX + pickerAreaTotal.width
+      && e.offsetY > pickerAreaTotal.startY
+      && e.offsetY < pickerAreaTotal.startY + pickerAreaTotal.height) {
+      areaType = 'month';
+    } else if (e.offsetX > calendarAreaTotal.startX
+      && e.offsetX < calendarAreaTotal.startX + calendarAreaTotal.width
+      && e.offsetY > calendarAreaTotal.startY
+      && e.offsetY < calendarAreaTotal.startY + calendarAreaTotal.height) {
+      areaType = 'month';
+    } else if (e.offsetX > timeAreaHourTotal.startX
+      && e.offsetX < timeAreaHourTotal.startX + timeAreaHourTotal.width + timeAreaPageWidth
+      && e.offsetY > timeAreaHourTotal.startY
+      && e.offsetY < timeAreaHourTotal.startY + timeAreaHourTotal.height) {
+      areaType = 'hour';
+    } else if (e.offsetX > timeAreaMinuteTotal.startX
+      && e.offsetX < timeAreaMinuteTotal.startX + timeAreaMinuteTotal.width + timeAreaPageWidth
+      && e.offsetY > timeAreaMinuteTotal.startY
+      && e.offsetY < timeAreaMinuteTotal.startY + timeAreaMinuteTotal.height) {
+      areaType = 'minute';
+    } else if (e.offsetX > timeAreaSecondTotal.startX
+      && e.offsetX < timeAreaSecondTotal.startX + timeAreaSecondTotal.width + timeAreaPageWidth
+      && e.offsetY > timeAreaSecondTotal.startY
+      && e.offsetY < timeAreaSecondTotal.startY + timeAreaSecondTotal.height) {
+      areaType = 'second';
+    }
+
+    if (areaType === 'month') {
+      const currDate = this.options.currentYearMonth;
+      const year = currDate.getFullYear();
+      const month = currDate.getMonth();
+      if (e.deltaY < 0) {
+        // wheel up
+        this.options.currentYearMonth = new Date(year, month - 1, 1);
+      } else if (e.deltaY > 0) {
+        // wheel down
+        this.options.currentYearMonth = new Date(year, +month + +1, 1);
+      }
+      this.drawPickerArea();
+      this.initCalendarProperty();
+      this.drawCalendarDay();
+      this.clearCalendarArea();
+      this.mousemoveDate();
+    } else if (areaType === 'hour' || areaType === 'minute' || areaType === 'second') {
+      const timeAreaType = this.coordinate.timeArea[areaType];
+      if (e.deltaY < 0) {
+        // wheel up
+        if (timeAreaType.page > 1) {
+          timeAreaType.page -= 1;
+          this.drawTimeAreaContent(areaType);
+          this.drawSplitLine();
+          this.updateTimeArea(areaType);
         }
-        this.drawPickerArea();
-        this.initCalendarProperty();
-        this.drawCalendarDay();
-        this.clearCalendarArea();
-        this.mousemoveDate();
-      } else if (areaType === 'hour' || areaType === 'minute' || areaType === 'second') {
-        const timeAreaType = this.coordinate.timeArea[areaType];
-        if (e.deltaY < 0) {
-          // wheel up
-          if (timeAreaType.page > 1) {
-            timeAreaType.page -= 1;
-            this.drawTimeAreaContent(areaType);
-            this.updateTimeArea(areaType);
-          }
-        } else if (e.deltaY > 0) {
-          // wheel down
-          if (timeAreaType.page < timeAreaType.maxPage) {
-            timeAreaType.page += 1;
-            this.drawTimeAreaContent(areaType);
-            this.updateTimeArea(areaType);
-          }
+      } else if (e.deltaY > 0) {
+        // wheel down
+        if (timeAreaType.page < timeAreaType.maxPage) {
+          timeAreaType.page += 1;
+          this.drawTimeAreaContent(areaType);
+          this.drawSplitLine();
+          this.updateTimeArea(areaType);
         }
       }
-    });
+    }
   }
 
-
   drawCanvas() {
     this.drawTotalArea();
     this.drawPickerArea();
     this.drawCalendarArea();
     this.mousemoveDate();
     if (this.options.timeExpand) {
-      this.drawSplitLine();
       this.drawTimeArea();
+      this.drawSplitLine();
       this.updateTimeArea();
     }
   }
@@ -970,11 +987,11 @@ class Calendar {
   drawTotalArea() {
     const ctx = this.context;
     const padding = this.options.padding;
-    const style = {
-      stroke: {
-        show: true,
-      },
-    };
+    // const style = {
+    //   stroke: {
+    //     show: true,
+    //   },
+    // };
     // total Area = picker area + calendar area + button area
     // linewidth이 1이므로 total area에 선을 그을 때, p+c+b area의 보더 +1로 지정
     const gap = 1;
@@ -985,14 +1002,14 @@ class Calendar {
       ((this.baseCanvas.width - padding.left) - padding.right) + (gap * 2) + 2,
       ((this.baseCanvas.height - padding.top) - padding.bottom) + (gap * 2) + 2,
     );
-    this.dynamicDraw(
-      ctx,
-      padding.left - gap,
-      padding.top - gap,
-      ((this.baseCanvas.width - padding.left) - padding.right) + (gap * 2),
-      ((this.baseCanvas.height - padding.top) - padding.bottom) + (gap * 2),
-      style,
-    );
+    // this.dynamicDraw(
+    //   ctx,
+    //   padding.left - gap,
+    //   padding.top - gap,
+    //   ((this.baseCanvas.width - padding.left) - padding.right) + (gap * 2),
+    //   ((this.baseCanvas.height - padding.top) - padding.bottom) + (gap * 2),
+    //   style,
+    // );
   }
 
   drawPickerArea() {
@@ -1005,17 +1022,22 @@ class Calendar {
       pickerAreaTotal.width, pickerAreaTotal.height,
     );
     // draw bottom line in picker area
+    const yearUnderlinePaddingSide = 11;
+    ctx.save();
     ctx.beginPath();
     ctx.moveTo(
-      pickerAreaTotal.startX,
+      pickerAreaTotal.startX + yearUnderlinePaddingSide,
       +pickerAreaTotal.startY + +pickerAreaTotal.height,
     );
     ctx.lineTo(
-      +pickerAreaTotal.startX + +pickerAreaTotal.width,
+      +pickerAreaTotal.startX + (+pickerAreaTotal.width - yearUnderlinePaddingSide),
       +pickerAreaTotal.startY + +pickerAreaTotal.height,
     );
+    ctx.strokeStyle = '#CFCFCF';
+    ctx.lineWidth = 1;
     ctx.stroke();
     ctx.closePath();
+    ctx.restore();
 
     // draw triange in picker area
     let arrowObj = {};
@@ -1054,11 +1076,12 @@ class Calendar {
         fillText: {
           show: true,
           text: thisYear,
+          color: this.options.colors[this.options.theme].yearMonthColor,
         },
         text: thisYear,
         align: 'center',
-        padding: { bottom: 8 },
-        font: '14px Roboto Condensed',
+        padding: { bottom: 12 },
+        font: 'bold 16px Roboto',
       },
     };
     this.dynamicDraw(
@@ -1080,10 +1103,11 @@ class Calendar {
         fillText: {
           show: true,
           text: thisMonthText,
+          color: this.options.colors[this.options.theme].yearMonthColor,
         },
         align: 'center',
-        padding: { bottom: 8 },
-        font: '14px Roboto Condensed',
+        padding: { bottom: 12 },
+        font: 'bold 16px Roboto',
       },
     };
     this.dynamicDraw(
@@ -1112,13 +1136,14 @@ class Calendar {
           fillText: {
             show: true,
             text: this.options.dayOfTheWeekArr[this.options.titleType.dayOfTheWeek][idx],
+            color: this.options.colors[this.options.theme].weekColor,
           },
           stroke: {
             show: false,
           },
           align: 'center',
           padding: { bottom: 8 },
-          font: '10px Roboto Condensed',
+          font: '11px Roboto',
         },
       );
     });
@@ -1144,6 +1169,8 @@ class Calendar {
     const currentYear = this.options.currentYearMonth.getFullYear();
     // 현재 달력 월
     const currentMonth = +this.options.currentYearMonth.getMonth() + +1;
+    // 일 숫자 텍스트 아래 패딩
+    const daysPaddingBottom = 9;
 
     // draw DAY NUMBER
     for (let ix = 0, ixLen = this.thisMonthWeekCnt; ix < ixLen; ix++) {
@@ -1167,17 +1194,15 @@ class Calendar {
               style: {
                 fillText: {
                   show: true,
-                  color: this.options.colors.prevNextMonthFont,
+                  color: this.options.colors[this.options.theme].prevNextMonthFont,
                   text: ((this.prevMonthLastDate - firstWeekDayCnt) + jx) + 1,
                 },
                 fill: {
                   show: false,
                 },
                 align: 'center',
-                padding: {
-                  bottom: 8,
-                },
-                font: '10px Roboto Condensed',
+                padding: { bottom: daysPaddingBottom },
+                font: '12px Roboto',
               },
               selectable: false,
               date: {
@@ -1194,10 +1219,11 @@ class Calendar {
             let fillText = {
               show: true,
               text: 1,
+              color: this.options.colors[this.options.theme].dayColor,
             };
             let fill = {
               show: true,
-              color: this.options.colors.thisMonthFill,
+              color: this.options.colors[this.options.theme].thisMonthFill,
             };
             let selectableFlag = true;
             if (this.options.limitToday) {
@@ -1206,7 +1232,7 @@ class Calendar {
               if (initLimitDay < currentDate) {
                 fillText = {
                   show: true,
-                  color: this.options.colors.prevNextMonthFont,
+                  color: this.options.colors[this.options.theme].prevNextMonthFont,
                   text: 1,
                 };
                 fill = {
@@ -1224,8 +1250,8 @@ class Calendar {
                 fillText,
                 fill,
                 align: 'center',
-                padding: { bottom: 8 },
-                font: '10px Roboto Condensed',
+                padding: { bottom: daysPaddingBottom },
+                font: '12px Roboto',
               },
               selectable: selectableFlag,
               date: {
@@ -1242,10 +1268,11 @@ class Calendar {
             let fillText = {
               show: true,
               text: this.monthDay,
+              color: this.options.colors[this.options.theme].dayColor,
             };
             let fill = {
               show: true,
-              color: this.options.colors.thisMonthFill,
+              color: this.options.colors[this.options.theme].thisMonthFill,
             };
             let selectableFlag = true;
             if (this.options.limitToday) {
@@ -1254,7 +1281,7 @@ class Calendar {
               if (initLimitDay < currentDate) {
                 fillText = {
                   show: true,
-                  color: this.options.colors.prevNextMonthFont,
+                  color: this.options.colors[this.options.theme].prevNextMonthFont,
                   text: this.monthDay,
                 };
                 fill = {
@@ -1272,8 +1299,8 @@ class Calendar {
                 fillText,
                 fill,
                 align: 'center',
-                padding: { bottom: 8 },
-                font: '10px Roboto Condensed',
+                padding: { bottom: daysPaddingBottom },
+                font: '12px Roboto',
               },
               selectable: selectableFlag,
               date: {
@@ -1297,12 +1324,12 @@ class Calendar {
             style: {
               fillText: {
                 show: true,
-                color: this.options.colors.prevNextMonthFont,
+                color: this.options.colors[this.options.theme].prevNextMonthFont,
                 text: this.monthDay - this.thisMonthLastDate,
               },
               align: 'center',
-              padding: { bottom: 8 },
-              font: '10px Roboto Condensed',
+              padding: { bottom: daysPaddingBottom },
+              font: '12px Roboto',
             },
             selectable: false,
             date: {
@@ -1321,10 +1348,11 @@ class Calendar {
             let fillText = {
               show: true,
               text: 1,
+              color: this.options.colors[this.options.theme].dayColor,
             };
             let fill = {
               show: true,
-              color: this.options.colors.thisMonthFill,
+              color: this.options.colors[this.options.theme].thisMonthFill,
             };
             let selectableFlag = true;
             if (this.options.limitToday) {
@@ -1333,7 +1361,7 @@ class Calendar {
               if (initLimitDay < currentDate) {
                 fillText = {
                   show: true,
-                  color: this.options.colors.prevNextMonthFont,
+                  color: this.options.colors[this.options.theme].prevNextMonthFont,
                   text: 1,
                 };
                 fill = {
@@ -1352,8 +1380,8 @@ class Calendar {
                 fillText,
                 fill,
                 align: 'center',
-                padding: { bottom: 8 },
-                font: '10px Roboto Condensed',
+                padding: { bottom: daysPaddingBottom },
+                font: '12px Roboto',
               },
               selectable: selectableFlag,
               date: {
@@ -1369,10 +1397,11 @@ class Calendar {
             let fillText = {
               show: true,
               text: this.monthDay,
+              color: this.options.colors[this.options.theme].dayColor,
             };
             let fill = {
               show: true,
-              color: this.options.colors.thisMonthFill,
+              color: this.options.colors[this.options.theme].thisMonthFill,
             };
             let selectableFlag = true; // 선택 여부
             if (this.options.limitToday) {
@@ -1381,7 +1410,7 @@ class Calendar {
               if (initLimitDay < currentDate) {
                 fillText = {
                   show: true,
-                  color: this.options.colors.prevNextMonthFont,
+                  color: this.options.colors[this.options.theme].prevNextMonthFont,
                   text: this.monthDay,
                 };
                 fill = {
@@ -1400,8 +1429,8 @@ class Calendar {
                 fillText,
                 fill,
                 align: 'center',
-                padding: { bottom: 8 },
-                font: '10px Roboto Condensed',
+                padding: { bottom: daysPaddingBottom },
+                font: '12px Roboto',
               },
               selectable: selectableFlag,
               date: {
@@ -1456,6 +1485,7 @@ class Calendar {
   drawSplitLine() {
     const ctx = this.context;
     const padding = this.options.padding;
+    ctx.save();
     ctx.beginPath();
     // 중앙 세로
     ctx.moveTo(this.baseCanvas.width / 2, padding.top);
@@ -1466,17 +1496,19 @@ class Calendar {
     ctx.lineTo((this.baseCanvas.width / 2) + this.options.timeArea.titleWidth,
       this.baseCanvas.height - padding.top);
     // content|page 세로
-    ctx.moveTo(this.baseCanvas.width - padding.right - this.options.timeArea.pageWidth,
-      padding.top);
-    ctx.lineTo(this.baseCanvas.width - padding.right - this.options.timeArea.pageWidth,
-      this.baseCanvas.height - padding.top);
+    // ctx.moveTo(this.baseCanvas.width - padding.right - this.options.timeArea.pageWidth,
+    //   padding.top);
+    // ctx.lineTo(this.baseCanvas.width - padding.right - this.options.timeArea.pageWidth,
+    //   this.baseCanvas.height - padding.top);
     // hour|minute|second 가로
     ctx.moveTo(this.baseCanvas.width / 2, (this.baseCanvas.height / 3) + 1);
     ctx.lineTo(this.baseCanvas.width - padding.right, (this.baseCanvas.height / 3) + 1);
     ctx.moveTo(this.baseCanvas.width / 2, ((this.baseCanvas.height / 3) * 2) - 1);
     ctx.lineTo(this.baseCanvas.width - padding.right, ((this.baseCanvas.height / 3) * 2) - 1);
+    ctx.strokeStyle = this.options.colors[this.options.theme].border;
     ctx.stroke();
     ctx.closePath();
+    ctx.restore();
   }
 
   drawTimeArea() {
@@ -1484,6 +1516,7 @@ class Calendar {
     this.drawTimeAreaContent();
     this.drawTimeAreaPage();
   }
+
   // DRAW 'Hour, Min, Sec'
   drawTimeAreaTitle() {
     const ctx = this.context;
@@ -1499,17 +1532,28 @@ class Calendar {
         {
           fillText: {
             show: true,
+            color: this.options.colors[this.options.theme].timeLabelFont,
             text: v,
           },
+          fill: {
+            show: true,
+            color: this.options.colors[this.options.theme].timeLabelFill,
+          },
+          stroke: {
+            show: true,
+            linewidth: 1,
+            color: this.options.colors[this.options.theme].timeLabelStroke,
+          },
           align: 'center',
           padding: {
-            bottom: 27,
+            bottom: 30,
           },
-          font: '12px Roboto Condensed',
+          font: 'bold 11px Roboto',
         },
       );
     });
   }
+
   // DRAW 0 ~ 23 || 59 BOX
   drawTimeAreaContent(changedType) {
     const ctx = this.context;
@@ -1525,8 +1569,8 @@ class Calendar {
         let timeAreaObj = {};
         for (let ix = 0, ixLen = maxNumber; ix < ixLen; ix++) {
           const columnIdx = ix % this.options.timeArea.columnCount;
-          const page = parseInt(ix /
-            (this.options.timeArea.columnCount * this.options.timeArea.rowCount), 0) + 1;
+          const page = parseInt(ix
+            / (this.options.timeArea.columnCount * this.options.timeArea.rowCount), 0) + 1;
           let rowIdx = 1;
           if (ix % (this.options.timeArea.columnCount * this.options.timeArea.rowCount)
             < this.options.timeArea.columnCount) {
@@ -1542,11 +1586,13 @@ class Calendar {
               fillText: {
                 show: true,
                 text: `${ix}`,
+                color: this.options.colors[this.options.theme].dayColor,
               },
               fill: {
                 show: true,
-                color: this.options.colors.thisMonthFill,
+                color: this.options.colors[this.options.theme].background,
               },
+              font: '12px Roboto',
               align: 'center',
               padding: {
                 bottom: 13,
@@ -1578,6 +1624,7 @@ class Calendar {
       });
     }
   }
+
   drawTimeAreaPage() {
     const ctx = this.context;
     const timeType = this.options.timeTypeName;
@@ -1595,6 +1642,19 @@ class Calendar {
         startY: timeTypeTotal.startY,
         height: timeTypeTotal.height,
       };
+      this.dynamicDraw(
+        ctx,
+        timeTypeAreaPage.startX - 1,
+        timeTypeAreaPage.startY - 1,
+        timeTypeAreaPage.width + 2,
+        timeTypeAreaPage.height + 2,
+        {
+          fill: {
+            show: true,
+            color: this.options.colors[this.options.theme].timeAreaFill,
+          },
+        },
+      );
       arrowArr.forEach((v, idx) => {
         arrowObj = {
           centerX: timeTypeAreaPage.startX + (timeTypeAreaPage.width / 2),
@@ -1613,8 +1673,15 @@ class Calendar {
 
   // 외부 Input box에 입력받는 값으로 클래스 내 데이터 갱신하는 함수
   setDateTime(dateTimeValue) {
+    const isValid = dateTimeValue && dateTimeValue.isValid();
     this.options.initSelectDayFlag = true;
-    this.options.initSelectDay = new Date(dateTimeValue);
+    if (isValid) {
+      this.options.initSelectDay = new Date(dateTimeValue);
+    } else {
+      const today = new Date();
+      this.options.initSelectDay = null;
+      this.options.currentYearMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+    }
     this.options.initLimitDay = new Date();
     this.coordinate.calendarArea.selectDayArr = [];
     this.init();
@@ -1624,7 +1691,7 @@ class Calendar {
   // DRAW multiple function
   dynamicDraw(context, x, y, width, height, style) {
     if (style) {
-      const mergedStyle = _.merge({}, this.options.styleObj, style);
+      const mergedStyle = merge({}, this.options.styleObj, style);
       const ctx = context;
 
       if (mergedStyle.stroke && mergedStyle.stroke.show) {
@@ -1647,8 +1714,8 @@ class Calendar {
       }
       if (mergedStyle.fillText.show && mergedStyle.fillText.text) {
         ctx.font = mergedStyle.font;
-        const textWidth = mergedStyle.fillText.text ?
-          ctx.measureText(mergedStyle.fillText.text).width : 0;
+        const textWidth = mergedStyle.fillText.text
+          ? ctx.measureText(mergedStyle.fillText.text).width : 0;
         let textStartX;
         if (mergedStyle.align === 'center') {
           textStartX = (x + (width / 2)) - (textWidth / 2);
@@ -1669,31 +1736,31 @@ class Calendar {
   // 중심점을 기준으로 left, right 방향으로 삼각형 그리기
   drawTriangle(context, x, y, direction, length) {
     const ctx = context;
+    const angle = 42;
+    ctx.save();
     ctx.beginPath();
-    ctx.moveTo(x, y);
     if (direction === 'right') {
-      ctx.lineTo(x, y - (Math.sin(this.toRadians(30)) * length));
-      ctx.lineTo(x + (Math.cos(this.toRadians(30)) * length), y);
-      ctx.lineTo(x, y + (Math.sin(this.toRadians(30)) * length));
+      ctx.moveTo(x, y - (Math.sin(this.toRadians(angle)) * length));
+      ctx.lineTo(x + (Math.cos(this.toRadians(angle)) * length), y);
+      ctx.lineTo(x, y + (Math.sin(this.toRadians(angle)) * length));
     } else if (direction === 'left') {
-      ctx.lineTo(x, y - (Math.sin(this.toRadians(30)) * length));
-      ctx.lineTo(x - (Math.cos(this.toRadians(30)) * length), y);
-      ctx.lineTo(x, y + (Math.sin(this.toRadians(30)) * length));
+      ctx.moveTo(x, y - (Math.sin(this.toRadians(angle)) * length));
+      ctx.lineTo(x - (Math.cos(this.toRadians(angle)) * length), y);
+      ctx.lineTo(x, y + (Math.sin(this.toRadians(angle)) * length));
     } else if (direction === 'top') {
-      ctx.lineTo(x + (Math.sin(this.toRadians(30)) * length), y);
-      ctx.lineTo(x, y - (Math.cos(this.toRadians(30)) * length));
-      ctx.lineTo(x - (Math.sin(this.toRadians(30)) * length), y);
+      ctx.moveTo(x + (Math.sin(this.toRadians(angle)) * length), y);
+      ctx.lineTo(x, y - (Math.cos(this.toRadians(angle)) * length));
+      ctx.lineTo(x - (Math.sin(this.toRadians(angle)) * length), y);
     } else if (direction === 'bottom') {
-      ctx.lineTo(x + (Math.sin(this.toRadians(30)) * length), y);
-      ctx.lineTo(x, y + (Math.cos(this.toRadians(30)) * length));
-      ctx.lineTo(x - (Math.sin(this.toRadians(30)) * length), y);
+      ctx.moveTo(x + (Math.sin(this.toRadians(angle)) * length), y);
+      ctx.lineTo(x, y + (Math.cos(this.toRadians(angle)) * length));
+      ctx.lineTo(x - (Math.sin(this.toRadians(angle)) * length), y);
     }
-    ctx.lineTo(x, y);
-    ctx.fillStyle = '#000000';
-    ctx.fill();
-    ctx.strokeStyle = '#000000';
+    ctx.strokeStyle = this.options.colors[this.options.theme].triangle;
+    ctx.lineWidth = 2.5;
     ctx.stroke();
     ctx.closePath();
+    ctx.restore();
   }
 
   // 삼각형 안에 (px,py)이 존재하는지 확인
@@ -1824,6 +1891,33 @@ class Calendar {
       }
     }
   }
+
+  removeDropdown() {
+    document.body.removeChild(this.dropdown);
+  }
+
+  showDropdown(e) {
+    this.dropdown.style.display = 'block';
+    let targetDivHeight = 0;
+    if (e.currentTarget && e.currentTarget.clientHeight) {
+      targetDivHeight = e.currentTarget.clientHeight;
+    }
+    this.dropdown.style.top = `${(e.pageY - e.offsetY) + targetDivHeight}px`;
+    this.dropdown.style.left = `${(e.pageX - e.offsetX) - 1}px`;
+    this.dropdown.style.width = `${this.baseCanvas.width + 2}px`;
+    this.dropdown.style.height = `${this.baseCanvas.height + 2}px`;
+  }
+
+  hideDropdown() {
+    this.dropdown.style.display = 'none';
+  }
+
+  removeListeners() {
+    this.overCanvas.removeEventListener('mousemove', this.mousemove);
+    this.overCanvas.removeEventListener('mousedown', this.mousedown);
+    this.overCanvas.removeEventListener('mouseleave', this.mouseleave);
+    this.overCanvas.removeEventListener('mousewheel', this.mousewheel);
+  }
 }
 
 export default Calendar;