fix(calendar-view): [calendar-view] modify the configuration of calendar view hours, minutes, and seconds, and adding an attribute (#2932)

* fix: modify the configuration of calendar view hours, minutes, and seconds

* feat(calendar-view): add whether to display button properties on the mobile first

* fix: revise the title to include line breaks in both Chinese and English

Author: James-9696

examples/sites/demos/apis/calendar-view.js

@@ -171,6 +171,20 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
           mfDemo: 'basic-usage'
+        },
+        {
+          name: 'show-back-today',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否展示左上侧按钮显示，默认展示',
+            'en-US': 'Should the upper left button be displayed, Default Display'
+          },
+          meta: {
+            stable: '3.22.0'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'calendar-mode'
         }
       ],
       events: [

examples/sites/demos/mobile-first/app/calendar-view/calendar-mode.vue

@@ -1,5 +1,11 @@
 <template>
-  <tiny-calendar-view :events="eventslist" :year="2023" :month="6" :modes="['month', 'timeline', 'schedule']">
+  <tiny-calendar-view
+    :show-back-today="false"
+    :events="eventslist"
+    :year="2023"
+    :month="6"
+    :modes="['month', 'timeline', 'schedule']"
+  >
   </tiny-calendar-view>
 </template>
 

examples/sites/demos/mobile-first/app/calendar-view/webdoc/calendar-view.js

@@ -22,9 +22,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>mode</code> 属性指定以年的形式显示，将展示当年的每个月份。可选值有 <code>month</code> / <code>timeline</code> / <code>schedule</code>。</p>\n',
+          '<p>通过 <code>mode</code> 属性指定以年的形式显示，将展示当年的每个月份。可选值有 <code>month</code> / <code>timeline</code> / <code>schedule</code>。通过<code>show-back-today</code> 属性控制左侧按钮显示。</p>\n',
         'en-US':
-          '<p>The <code>mode</code> attribute specifies that each month of the current year is displayed. The options are <code>month</code> / <code>timeline</code> / <code>schedule</code>. </p>\n'
+          '<p>The <code>mode</code> attribute specifies that each month of the current year is displayed. The options are <code>month</code> / <code>timeline</code> / <code>schedule</code>. Control the display of the left button through the<code>show back today</code>attribute.</p>\n'
       },
       codeFiles: ['calendar-mode.vue']
     },

packages/renderless/src/calendar-view/index.ts

@@ -104,15 +104,31 @@ export const parseDate = (time) => {
   } else {
     date = new Date()
   }
-
-  return {
-    year: date.getFullYear(),
-    month: date.getMonth() + 1,
-    day: date.getDate(),
-    hours: date.getHours(),
-    minutes: date.getMinutes(),
-    seconds: date.getSeconds()
+  // 识别无时分秒的日期时间
+  const timeParts = hasNoTime(time)
+  let timesPartsOne = {}
+  let timesPartsTwo = {}
+  if (!timeParts.hours) {
+    timesPartsOne = {
+      year: timeParts.year,
+      month: timeParts.month,
+      day: timeParts.day,
+      hours: 0,
+      minutes: 0,
+      seconds: 0
+    }
+  } else {
+    timesPartsTwo = {
+      year: date.getFullYear(),
+      month: date.getMonth() + 1,
+      day: date.getDate(),
+      hours: date.getHours(),
+      minutes: date.getMinutes(),
+      seconds: date.getSeconds()
+    }
   }
+  const timePartsList = Object.assign(timesPartsOne, timesPartsTwo)
+  return timePartsList
 }
 
 export const computedCalendar =
@@ -160,6 +176,36 @@ const getCalendarItem = function (item, props, isFunction, type, isNext, isLast)
   return res
 }
 
+const hasNoTime = (date) => {
+  const datetimeStr = date
+  let hoursTime = 0
+  let minutesTime = 0
+  let secondsTime = 0
+  const [datePart, timePart] = datetimeStr.split(' ')
+  const [year, month, day] = datePart && datePart.split('-')
+  if (timePart) {
+    const [hours, minutes, seconds] = timePart && timePart.split(':')
+    hoursTime = hours
+    minutesTime = minutes
+    secondsTime = seconds
+  }
+  // 提取时间
+  return {
+    year: Number(year),
+    month: Number(month),
+    day: Number(day),
+    hours: hoursTime,
+    minutes: minutesTime,
+    seconds: secondsTime
+  }
+}
+// 时间转GMT8
+const timesToGMT8 = (date) => {
+  const originalDate = new Date(date)
+  const gmt8 = new Date(originalDate.getTime() + 15 * 60 * 60 * 1000)
+  return gmt8
+}
+
 export const handleEvents =
   ({ props, state }) =>
   () => {
@@ -197,14 +243,23 @@ export const handleEvents =
           ([lastYear, +state.activeYear, nextYear].includes(endYear) &&
             [lastMon, +state.activeMonth, nextMon].includes(endMonth))
         ) {
-          item.start = getTime(item.start)
-          item.end = getTime(item.end)
-          item.startTime = makeUpZero(startHours) + ':' + makeUpZero(startMinutes) + ':' + makeUpZero(startSeconds)
-          item.endTime = makeUpZero(endHours) + ':' + makeUpZero(endMinutes) + ':' + makeUpZero(endSeconds)
+          const timeStartPart = hasNoTime(item.start)
+          const timeEndPart = hasNoTime(item.end)
+
+          item.start = timeStartPart.hours ? getTime(item.start) : timesToGMT8(item.start)
+          item.end = timeEndPart.hours ? getTime(item.end) : timesToGMT8(item.end)
+
+          item.startTime = timeStartPart.hours
+            ? makeUpZero(startHours) + ':' + makeUpZero(startMinutes) + ':' + makeUpZero(startSeconds)
+            : ''
+          item.endTime = timeEndPart.hours
+            ? makeUpZero(endHours) + ':' + makeUpZero(endMinutes) + ':' + makeUpZero(endSeconds)
+            : ''
+
           item.startDay = startYear + '-' + startMonth + '-' + startDay
           item.endDay = endYear + '-' + endMonth + '-' + endDay
-          const startTimestamp = getTime(startYear + '-' + startMonth + '-' + startDay)
-          const endTimestamp = getTime(endYear + '-' + endMonth + '-' + endDay)
+          const startTimestamp = getTime(item.startDay)
+          const endTimestamp = getTime(item.endDay)
           const days = Math.abs(endTimestamp - startTimestamp) / dayMillisecond
           item.dayNumber = days >= 1 ? days + 1 : 1
 

packages/vue/src/calendar-view/src/index.ts

@@ -76,6 +76,10 @@ export const calendarViewProps = {
   multiSelect: {
     type: Boolean,
     default: false
+  },
+  showBackToday: {
+    type: Boolean,
+    default: true
   }
 }
 

packages/vue/src/calendar-view/src/mobile-first.vue

@@ -20,10 +20,10 @@
       </template>
     </tiny-tooltip>
     <div data-tag="tiny-calendar-view-today" class="flex justify-around items-center mb-3">
-      <tiny-button @click="toToday">{{ t('ui.calendarView.backToday') }}</tiny-button>
+      <tiny-button v-if="showBackToday" @click="toToday">{{ t('ui.calendarView.backToday') }}</tiny-button>
       <tiny-date-picker
         v-model="state.currentDate"
-        class="ml-5 shrink-0"
+        :class="[showBackToday ? 'ml-5' : '', 'shrink-0']"
         shape="filter"
         type="month"
         :clearable="false"
@@ -292,7 +292,7 @@
                 :key="idx"
                 class="py-1.5 h-auto border border-color-border-separator rounded mb-2 shadow-sm"
               >
-                <div class="px-1.5 mb-1.5 border-l-2 border-color-brand">{{ event.title }}</div>
+                <div class="px-1.5 mb-1.5 border-l-2 border-color-brand break-all">{{ event.title }}</div>
                 <div class="mb-1.5 px-2 text-color-text-placeholder">
                   {{ getEventShowTime('start', event, date.value) }} - {{ getEventShowTime('end', event, date.value) }}
                 </div>
@@ -376,7 +376,8 @@ export default defineComponent({
     'events',
     'height',
     'mark-color',
-    'multi-select'
+    'multi-select',
+    'showBackToday'
   ],
   setup(props, context) {
     return setup({