diff --git a/package.json b/package.json
index 8bbe1ef4d..b79b118f9 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
         "stylus": "^0.59.0",
         "stylus-loader": "^7.1.0",
         "tinymce": "^5.10.3",
-        "tui-calendar-hi": "^2.1.3-5",
+        "tui-calendar-hi": "^2.1.3-6",
         "view-design-hi": "^4.7.0-76",
         "vite": "^2.9.15",
         "vite-plugin-file-copy": "^1.0.0",
diff --git a/resources/assets/js/pages/manage/calendar.vue b/resources/assets/js/pages/manage/calendar.vue
index eeef3e261..2a40cb666 100644
--- a/resources/assets/js/pages/manage/calendar.vue
+++ b/resources/assets/js/pages/manage/calendar.vue
@@ -3,11 +3,11 @@
         <PageTitle :title="$L('日历')"/>
         <div class="calendar-head">
             <div class="calendar-titbox">
+                <div class="calendar-title">
+                    <div class="common-nav-back portrait" @click="goForward({name: 'manage-application'}, true)"><i class="taskfont">&#xe676;</i></div>
+                    <h1>{{ rangeText }}</h1>
+                </div>
                 <div class="calendar-nav">
-                    <div class="calendar-title">
-                        <div class="common-nav-back portrait" @click="goForward({name: 'manage-application'}, true)"><i class="taskfont">&#xe676;</i></div>
-                        <h1>{{ rangeText }}</h1>
-                    </div>
                     <ButtonGroup class="calendar-arrow" size="small">
                         <Button @click="onMove(-1)">
                             <Icon type="ios-arrow-back"></Icon>
@@ -107,6 +107,9 @@ export default {
         this.options.week.dayNames = dayNames;
         this.options.month.dayNames = dayNames;
         this.options.view = this.$store.state.cacheCalendarView || this.options.view;
+        if (this.windowWidth < 600) {
+            this.options.template.monthGridHeaderExceed = (hiddenEvents) => `<span>+${hiddenEvents}</span>`
+        }
     },
 
     activated() {
diff --git a/resources/assets/js/pages/manage/components/Calendar/theme.js b/resources/assets/js/pages/manage/components/Calendar/theme.js
index 327b2bd36..496d09e8b 100644
--- a/resources/assets/js/pages/manage/components/Calendar/theme.js
+++ b/resources/assets/js/pages/manage/components/Calendar/theme.js
@@ -1,11 +1,11 @@
 export const theme = {
     common: {
-        border: '1px solid #ddd',
+        border: '1px solid #f4f5f5',
         backgroundColor: 'white',
         holiday: {color: '#f54f3d'},
         saturday: {color: '#84c56a'},
-        dayName: {color: '#333'},
-        today: {color: '#ffffff'},
+        dayName: {color: '#606266'},
+        today: {color: '#fff'},
         gridSelection: {
             backgroundColor: 'rgba(132, 197, 106, 0.1)',
             border: '1px solid #84c56a',
@@ -26,38 +26,38 @@ export const theme = {
         dayName: {
             borderTop: 'none',
             borderBottom: 'none',
-            borderLeft: '1px solid #ddd',
+            borderLeft: '1px solid #f4f5f5',
             backgroundColor: 'inherit',
         },
         today: {
-            color: '#ffffff',
+            color: '#303133',
             backgroundColor: 'inherit',
         },
         pastDay: {color: '#999'},
-        panelResizer: {border: '1px solid #ddd'},
-        dayGrid: {borderRight: '1px solid #ddd'},
+        panelResizer: {border: '1px solid #f4f5f5'},
+        dayGrid: {borderRight: '1px solid #f4f5f5'},
         dayGridLeft: {
             width: '100px',
             backgroundColor: '',
-            borderRight: '1px solid #ddd',
+            borderRight: '1px solid #f4f5f5',
         },
         weekend: {backgroundColor: 'inherit'},
         timeGridLeft: {
             width: '100px',
             backgroundColor: '#fafafa',
-            borderRight: '1px solid #ddd',
+            borderRight: '1px solid #f4f5f5',
         },
         timeGridLeftAdditionalTimezone: {backgroundColor: '#fdfdfd'},
         timeGridHourLine: {borderBottom: '1px solid #eee'},
         timeGridHalfHourLine: {borderBottom: '1px dotted #f9f9f9'},
-        timeGrid: {borderRight: '1px solid #ddd'},
+        timeGrid: {borderRight: '1px solid #f4f5f5'},
         nowIndicatorLabel: {color: '#84c56a'},
         nowIndicatorPast: {border: '1px solid rgba(132, 197, 106, 0.3)'},
         nowIndicatorBullet: {backgroundColor: '#84c56a'},
         nowIndicatorToday: {border: '1px solid #84c56a'},
         nowIndicatorFuture: {border: '1px solid #84c56a'},
         pastTime: {color: '#999'},
-        futureTime: {color: '#333'},
+        futureTime: {color: '#606266'},
         gridSelection: {color: '#84c56a'},
     },
 };
diff --git a/resources/assets/js/pages/manage/components/DialogModal.vue b/resources/assets/js/pages/manage/components/DialogModal.vue
index 5ee91c34b..0c1591060 100644
--- a/resources/assets/js/pages/manage/components/DialogModal.vue
+++ b/resources/assets/js/pages/manage/components/DialogModal.vue
@@ -84,8 +84,12 @@ export default {
     },
 
     watch: {
-        dialogId(id) {
-            this.show = id > 0 && (this.windowPortrait || this.routeName !== 'manage-messenger')
+        dialogId() {
+            this.handleShow()
+        },
+
+        windowPortrait() {
+            this.handleShow()
         },
 
         show(v) {
@@ -105,6 +109,9 @@ export default {
                 this.closIng--
             })
         },
+        handleShow() {
+            this.show = this.dialogId > 0 && (this.windowPortrait || this.routeName !== 'manage-messenger')
+        },
         handleMoveTop(type) {
             type === 'dialogModal' && this.$refs.modal?.handleMoveTop();
         }
diff --git a/resources/assets/sass/pages/page-calendar.scss b/resources/assets/sass/pages/page-calendar.scss
index 4d9d84d94..e38607301 100644
--- a/resources/assets/sass/pages/page-calendar.scss
+++ b/resources/assets/sass/pages/page-calendar.scss
@@ -1,53 +1,63 @@
 .page-calendar {
     display: flex;
     flex-direction: column;
+
     .calendar-head {
         flex-shrink: 0;
         display: flex;
         align-items: flex-start;
         margin: 32px 20px 16px;
         border-bottom: 1px solid #F4F4F5;
+
         .calendar-titbox {
             flex: 1;
             display: flex;
             align-items: center;
             margin-bottom: 16px;
             gap: 2px;
+
+            .calendar-title {
+                display: flex;
+                align-items: center;
+                margin-right: 24px;
+
+                > h1 {
+                    color: $primary-title-color;
+                    font-size: 28px;
+                    font-weight: 600;
+                    overflow: hidden;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 1;
+                    -webkit-box-orient: vertical;
+                }
+            }
+
             .calendar-nav {
                 flex-shrink: 0;
                 display: flex;
                 align-items: center;
-                .calendar-title {
-                    display: flex;
-                    align-items: center;
-                    margin-right: 24px;
-                    > h1 {
-                        color: $primary-title-color;
-                        font-size: 28px;
-                        font-weight: 600;
-                        overflow: hidden;
-                        display: -webkit-box;
-                        -webkit-line-clamp: 1;
-                        -webkit-box-orient: vertical;
-                    }
-                }
+
                 .calendar-arrow {
                     flex-shrink: 0;
                     margin-left: 12px;
+
                     > button {
                         color: #888888;
                         font-size: 12px;
+
                         &:focus {
                             box-shadow: none;
                         }
                     }
                 }
             }
+
             .calendar-view {
                 flex: 1;
                 display: flex;
                 justify-content: flex-end;
                 margin-left: 24px;
+
                 > button {
                     &:focus {
                         box-shadow: none;
@@ -56,6 +66,7 @@
             }
         }
     }
+
     .calendar-box {
         flex: 1;
         display: flex;
@@ -63,12 +74,14 @@
         padding: 0 48px 6px;
         overflow: hidden;
     }
+
     .toastui-calendar-grid-cell-header {
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         padding: 0 5px;
         overflow: hidden;
+
         .toastui-calendar-grid-cell-more-events {
             padding-right: 0;
             overflow: hidden;
@@ -76,6 +89,7 @@
             text-overflow: ellipsis;
         }
     }
+
     .toastui-calendar-grid-cell-date {
         .toastui-calendar-weekday-grid-date {
             &.toastui-calendar-weekday-grid-date-decorator {
@@ -83,24 +97,33 @@
             }
         }
     }
+
+    .toastui-calendar-daygrid-cell {
+        + .toastui-calendar-daygrid-cell {
+            border-left-color: #f4f5f5;
+        }
+    }
 }
 
 body.window-portrait {
     .page-calendar {
         .calendar-head {
             margin: 24px 16px 16px;
+
             .calendar-titbox {
                 display: flex;
-                flex-direction: column;
-                align-items: stretch;
+                justify-content: space-between;
+                position: relative;
+                padding-bottom: 32px;
+
                 .calendar-nav {
-                    width: 100%;
-                    .calendar-title {
-                        flex: 1;
-                    }
+                    position: absolute;
+                    bottom: 0;
+                    right: 0;
                 }
             }
         }
+
         .calendar-box {
             padding: 0;
         }