element-ui/examples/docs/es/calendar.md

Calendar

Muestra fechas.

Básico

:::demo Configure el valor para especificar el mes que se muestra actualmente. Si no se especifica el valor, se muestra el mes actual. el valor soporta la vinculación bidireccional.

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

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

:::

Contenido personalizado

:::demo Personalice lo que se muestra en la celda del calendario configurando el scoped-slot llamada dateCell. En la ranura de alcance se puede obtener la fecha (la fecha de la celda actual), los datos (incluyendo el tipo, isSelected, el atributo day). Para obtener más información, consulte la documentación de la API a continuación.

<el-calendar>
  <!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
  <template
    slot="dateCell"
    slot-scope="{date, 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>

:::

Rango

:::demo Defina el atributo range para especificar el rango de visualización del calendario. El tiempo de inicio debe ser el lunes, el tiempo de finalización debe ser el domingo y el período no puede exceder los dos meses.

<el-calendar :range="['2019-03-04', '2019-03-24']">
</el-calendar>

:::

Atributos

Atributo	Descripción	Tipo	Valores aceptados	Por defecto
value / v-model	valor vinculante	Date/string/number	—	—
range	rango de tiempo, incluyendo el tiempo de inicio y el tiempo final. Start time debe ser el primer dia de la semana, end time debe ser el ultimo día de la semana, el time entre las fechas no puede exceder dos meses	Array	—	—
first-day-of-week	primer día de la semana	Number	1 to 7	1

dateCell scoped slot

Atributo	Descripción	Tipo	Valores aceptados	Por defecto
date	fecha que la celda representa	Date	—	—
data	{ type, isSelected, day}. type indica el mes al que pertenece la fecha, los valores opcionales son mes anterior, mes actual, mes siguiente; isSelected indica si la fecha está seleccionada; day es la fecha formateada en el formato yyyy-MM-dd	Object	—	—