element-plus/website/docs/fr-FR/calendar.md

Calendrier

Affiche un calendrier.

Usage basique

:::demo Réglez value pour spécifier le mois à afficher. Si value n'est pas spécifiée, le mois actuel sera affiché. value supporte le 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>
-->

:::

Contenu personnalisé

:::demo Personnalisez le contenu du calendrier en utilisant le scoped-slot appelé dateCell. Dans ce scoped-slot vous aurez accès au paramètres date (date de la cellule courante), data (incluant les attributs type, isSelected et day). Pour plus d'informations, référez-vous à la documentation ci-dessous.

<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>

:::

Intervalle

:::demo Utilisez l'attribut range pour afficher un intervalle particulier. Le début doit être un lundi et la fin un dimanche, l'intervalle ne pouvant excéder deux mois.

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

:::

Tête personnalisée

:::demo Intervalle en définissant le nom header de scoped-slot Personnalisez le contenu affiché dans l'en-tête du calendrier. exister scoped-slot Vous pouvez obtenir la date (la date de la cellule actuelle). Pour plus de détails, veuillez vous référer à la documentation de l'API ci-dessous.

<el-calendar ref="calendar">
  <template #header="{date}">
    <span>Contenu d'en-tête personnalisé</span>
    <span>{{ date }}</span>
    <el-button-group>
      <el-button size="mini" @click="selectDate('prev-year')"
        >l'année dernière</el-button
      >
      <el-button size="mini" @click="selectDate('prev-month')"
        >le mois dernier</el-button
      >
      <el-button size="mini" @click="selectDate('today')"
        >De nos jours</el-button
      >
      <el-button size="mini" @click="selectDate('next-month')"
        >le mois prochain</el-button
      >
      <el-button size="mini" @click="selectDate('next-year')"
        >L'année prochaine</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.

Attributs

Attribut	Description	Type	Valeurs acceptées	Défaut
model-value / v-model	Valeur liée.	Date	—	—
range	Intervalle de dates, début et fin inclus. 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	—	—

Slot dateCell

Attribut	Description	Type	Valeurs acceptées	Défaut
data	{ type, isSelected, day, date }. type indique le mois de la date courante, les valeurs prev-month, current-month et next-month pouvant être utilisées; isSelected indique si la date est sélectionnée; day est la date formattée en YYYY-MM-DD; date est la date de la cellule courante.	Object	—	—

Methods

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