Calendar Calendar

introduce

Calendar component is used to select dates or date ranges.

Select a single date

The following demonstrates the use of the calendar component in combination with cells. The confirm event will be triggered after the date selection is completed.

<z-cell title="Select a single date" :value="date" @click="show = true" />
<z-calendar v-model:show="show" @confirm="onConfirm" />

import { ref } from 'vue';

export default {
   setup() {
     const date = ref('');
     const show = ref(false);

     const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
     const onConfirm = (value) => {
       show.value = false;
       date.value = formatDate(value);
     };

     return {
       date,
       show,
       onConfirm,
     };
   },
};

Select multiple dates

After setting type to multiple, you can select multiple dates. At this time, the date returned by the confirm event is an array structure, and the array contains several selected dates.

<z-cell title="Select multiple dates" :value="text" @click="show = true" />
<z-calendar v-model:show="show" type="multiple" @confirm="onConfirm" />

import { ref } from 'vue';

export default {
   setup() {
     const text = ref('');
     const show = ref(false);

     const onConfirm = (dates) => {
       show.value = false;
       text.value = `${dates.length} dates selected`;
     };

     return {
       text,
       show,
       onConfirm,
     };
   },
};

Select date range

After setting type to range, you can select a date range. At this time, the date returned by the confirm event is an array structure. The first item in the array is the start time and the second item is the end time.

<z-cell title="Select date range" :value="date" @click="show = true" />
<z-calendar v-model:show="show" type="range" @confirm="onConfirm" />

import { ref } from 'vue';

export default {
   setup() {
     const date = ref('');
     const show = ref(false);

     const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
     const onConfirm = (values) => {
       const [start, end] = values;
       show.value = false;
       date.value = `${formatDate(start)} - ${formatDate(end)}`;
     };

     return {
       date,
       show,
       onConfirm,
     };
   },
};

Tips: By default, the start and end times of the date range cannot be on the same day. You can set the allow-same-day attribute to allow the selection of the same day.

Quick selection

Set show-confirm to false to hide the confirm button, in which case the confirm event will be triggered immediately after the selection is completed.

<z-calendar v-model:show="show" :show-confirm="false" />

Custom color

The color of the calendar can be customized through the color attribute, which takes effect on the selected date and bottom button.

<z-calendar v-model:show="show" color="#ee0a24" />

Custom date range

Define the calendar range via min-date and max-date.

<z-calendar v-model:show="show" :min-date="minDate" :max-date="maxDate" />

import { ref } from 'vue';

export default {
   setup() {
     const show = ref(false);

     return {
       show,
       minDate: new Date(2010, 0, 1),
       maxDate: new Date(2010, 0, 31),
     };
   },
};

Custom button text

Set the button text through confirm-text, and set the text when the button is disabled through confirm-disabled-text.

<z-calendar
   v-model:show="show"
   type="range"
   confirm-text="Complete"
   confirm-disabled-text="Please select an end time"
/>

Custom date copywriting

Format the content of each cell on the calendar by passing in the formatter function.

<z-calendar v-model:show="show" type="range" :formatter="formatter" />

export default {
   setup() {
     const formatter = (day) => {
       const month = day.date.getMonth() + 1;
       const date = day.date.getDate();

       if (month === 5) {
         if (date === 1) {
           day.topInfo = 'Labor Day';
         } else if (date === 4) {
           day.topInfo = 'Youth Day';
         } else if (date === 11) {
           day.text = 'Today';
         }
       }

       if (day.type === 'start') {
         day.bottomInfo = 'Check-in';
       } else if (day.type === 'end') {
         day.bottomInfo = 'Departure';
       }

       return day;
     };

     return {
       formatter,
     };
   },
};

Custom popup position

Customize the pop-up position of the pop-up layer through the position attribute. The optional values are top, left, and right.

<z-calendar v-model:show="show" :round="false" position="right" />

Maximum date range

When selecting a date range, you can specify the maximum number of optional days through the max-range attribute. When the selected range exceeds the maximum number of optional days, the corresponding prompt copy will pop up.

<z-calendar type="range" :max-range="3" />

Customize the starting day of the week

Set the day the week starts with the first-day-of-week property.

<z-calendar first-day-of-week="1" />

Tiled display

Set poppable to false, and the calendar will be displayed directly on the page instead of appearing as a pop-up layer.

<z-calendar
   title="Calendar"
   :poppable="false"
   :show-confirm="false"
   :custom-style="{ height: '500px' }"
/>

Props

Calendar Poppable Props

When Calendar's poppable is true, the following props are supported:

Calendar Range Props

When Calendar's type is range, the following props are supported:

Calendar Multiple Props

When Calendar's type is multiple, the following props are supported:

Day data structure

Each date in the calendar corresponds to a Day object, and the content of the Day object can be customized through the formatter attribute.

Events

Slots

method

Calendar instances can be obtained through ref and instance methods can be called.

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

How to use asynchronously returned data in formatter?

If you need to use asynchronously returned data in a formatter, you can use computed properties to dynamically create a formatter function. The example is as follows:

const asyncData = ref();

const formatter = computed(() => {
   if (!asyncData.value) {
     return (day) => day;
   }
   return (day) => {
     day.bottomInfo = asyncData.value;
     return day;
   };
});

setTimeout(() => {
   asyncData.value = 'Backend copywriting';
}, 3000);