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

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/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"
@@ -376,7 +376,8 @@ export default defineComponent({
     'events',
     'height',
     'mark-color',
-    'multi-select'
+    'multi-select',
+    'showBackToday'
   ],
   setup(props, context) {
     return setup({