element-plus/website/docs/en-US/calendar.md

Calendar

Display date.

Basic

:::demo Set value to specify the currently displayed month. If value is not specified, current month is displayed. value supports two-way binding.

<el-calendar v-model="value"> </el-calendar>

<script>
  export default {
    data() {
      return {
        value: new Date(),
      }
    },
  }
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      const value = ref(new Date());

      return {
        value,
      };
    },
  });

</setup>
-->

:::

Custom Content

:::demo Customize what is displayed in the calendar cell by setting scoped-slot named dateCell. In scoped-slot you can get the date (the date of the current cell), data (including the type, isSelected, day attribute). For details, please refer to the API documentation below.

<el-calendar>
  <template #dateCell="{data}">
    <p :class="data.isSelected ? 'is-selected' : ''">
      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' :
      '' }}
    </p>
  </template>
</el-calendar>
<style>
  .is-selected {
    color: #1989fa;
  }
</style>

:::

Range

:::demo Set the range attribute to specify the display range of the calendar. Start time must be Monday, end time must be Sunday, and the time span cannot exceed two months.

<el-calendar :range="[new Date(2019, 2, 4), new Date(2019, 2, 24)]">
</el-calendar>

:::

Custom head

:::demo by setting the name header of scoped-slot Customize the content displayed in the calendar header. exist scoped-slot You can get date (the date of the current cell). For details, please refer to the API documentation below.

<el-calendar ref="calendar">
  <template #header="{date}">
    <span>Custom header content</span>
    <span>{{ date }}</span>
    <el-button-group>
      <el-button size="mini" @click="selectDate('prev-year')"
        >Previous Year</el-button
      >
      <el-button size="mini" @click="selectDate('prev-month')"
        >Previous Month</el-button
      >
      <el-button size="mini" @click="selectDate('today')">Today</el-button>
      <el-button size="mini" @click="selectDate('next-month')"
        >Next Month</el-button
      >
      <el-button size="mini" @click="selectDate('next-year')"
        >Next Year</el-button
      >
    </el-button-group>
  </template>
</el-calendar>

<script>
  export default {
    methods: {
      selectDate(value) {
        this.$refs.calendar.selectDate(value)
      },
    },
  }
</script>

:::

Localization

The default locale of is English, if you need to use other languages, please check Internationalization

Note, date time locale (month name, first day of the week ...) are also configed in localization.

Attributes

Attribute	Description	Type	Accepted Values	Default
model-value / v-model	binding value	Date	—	—
range	time range, including start time and end time. Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months.	[Date]Array	—	—

dateCell scoped slot 参数

Attribute	Description	Type	Accepted Values	Default
data	{ type, isSelected, day, date }. type indicates which month the date belongs, optional values are prev-month, current-month, next-month; isSelected indicates whether the date is selected; day is the formatted date in the format YYYY-MM-DD; date is date the cell represents	Object	—	—

Methods

Event Name	Description	Attribute
selectDate	Switch date	today / prev-month / next-month / prev-year / next-year