FxCalendar

Display date information

Attributes

Parameter	Description	Type	Options	Default
value / v-model	Binding value	Date/string/number	—	—
range	Date range including start and end dates. Start date must be Monday, end date must be Sunday, and the timespan cannot exceed two months.	Array	—	—
first-day-of-week	First day of week	Number	1 to 7	1

dateCell scoped slot parameters

Parameter	Description	Type	Options	Default
date	Date represented by the cell	Date	—	—
data	{ type, isSelected, day }, where type indicates the month the date belongs to (possible values: prev-month, current-month, next-month); isSelected indicates whether the date is selected; day is the formatted date in yyyy-MM-dd format	Object	—	—

Basic Usage

Set value to specify the currently displayed month. If value is not specified, the current month will be displayed. value supports two-way binding via v-model.

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

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

Expand Copy Copy

Custom Content

Customize the content displayed in calendar cells by setting the dateCell scoped-slot. In the scoped-slot, you can access date (current cell's date) and data (including type, isSelected, day properties). See API documentation below for details.

<fx-calendar>
  <!-- This example uses 2.5 slot syntax. For new projects, use 2.6 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>
</fx-calendar>
<style>
  .is-selected {
    color: #1989FA;
  }
</style>

Expand Copy Copy

Custom Range

Set the range property to specify the calendar's display range. The start date must be Monday, the end date must be Sunday, and the timespan cannot exceed two months.

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

Expand Copy Copy