Schedule

Demos

0:00
2:00
4:00
6:00
8:00
10:00
12:00
14:00
16:00
18:00
20:00
22:00
24:00
9:00–12:00 13:00–18:00
13:00–17:00
Entire day 
<template>
<article>
  <veui-schedule
    v-model="selected"
    :shortcuts="shortcuts"
    shortcuts-display="popup"
    :statuses="statuses"
  />
</article>
</template>

<script>
import { Schedule } from 'veui'

export default {
  components: {
    'veui-schedule': Schedule
  },
  data () {
    return {
      selected: {
        0: [[0, 23]],
        1: [[9, 11], [13, 17]],
        3: [[13, 16]],
        5: [[9, 9], [16, 17]]
      },
      shortcuts: [
        {
          label: 'Entire week',
          selected: {
            0: true,
            1: true,
            2: true,
            3: true,
            4: true,
            5: true,
            6: true
          }
        },
        {
          label: 'Weekdays',
          selected: {
            1: true,
            2: true,
            3: true,
            4: true,
            5: true
          }
        },
        {
          label: 'Weekends',
          selected: {
            0: true,
            6: true
          }
        }
      ],
      statuses: [
        {
          label: 'Selected',
          name: 'selected'
        },
        {
          label: 'Available',
          name: 'available'
        }
      ]
    }
  }
}
</script>

API

Props

NameTypeDefaultDescription
selectedObject-

v-model

Selected time ranges. The data type is Object<number, Array>.

The keys denote day of week, corresponding to the return value of Date.prototype.getDay(). The values denote the selected time ranges for each day. The data type of each time range is [start: number, end: number], while start and end are both hours between 0–23.

{
  1: [
    [9, 17]
  ],
  6: [
    [0, 2],
    [18, 20]
  ]
}

This sample stands for 9:00–18:00 of Monday and 0:00–3:00 & 18:00–21:00 of Saturday. The end hour denotes the start point of the last hour in the time range.

hour-classstring|Array|Object|function{}The customized HTML class for the hour cell. When not being a function, supports all values defined by Vue's class expressions. If it's a function, the signature is function(day: number, hour: number): string|Array<string>|Object<string, boolean>. The return value is also a Vue class expression.
disabled-datefunction(number, number): boolean() => falseWhether the hour cell is disabled. Parameter list is (day: number, hour: number). day and hour denote the day of week and the hour respectively. Return value specifies whether the hour cell is disabled from selection.
shortcutsArrayschedule.shortcuts

Shortcut selection list. The type is {label: string, selected: boolean|Array}.

label denotes the text label of each item. selected denotes the predefined time ranges. When being an array, it shares the same data type with the selected prop. When being true, it's same as [[0, 23]].

shortcuts-displaystring'inline'The display mode of the shortcuts. Supported values are inline/popup, which denote inline button groups and dropdown select, respectively.
statusesArray<{label: string, value: string}>schedule.statusesThe datasource of the legends. Legend items will have a class value of `veui-schedule-legend-${value}` and the label property will be the text label of each status.
disabledbooleanfalseWhether the schedule component is disabled.
readonlybooleanfalseWhether the schedule component is read-only.

Slots

NameDescription
headerThe entire header section.
header-contentThe content of the header section, not including the container.
shortcutsThe shortcuts section of the header section.
legendThe legends section of the header section.
legend-label

The text label of each legend. Displays the label property of each legend by default.

NameTypeDescription
labelstringThe text label of the legend.
valuestringThe value of the legend.

Additionally, custom properties inside statuses apart from the listed ones will also be passes into the scope object via v-bind.

hour

The content of each hour cell.

NameTypeDescription
daynumberThe day of week. 0 denotes Sunday.
hournumberThe hour value.
label

The content of the selected label. By default, displays the time range in the form of `${from}:00–${to + 1}:00` when it's more than 3 hours, displays “Entire Day” when every hour of a day are selected; displays nothing for less than 3 hours.

NameTypeDescription
fromnumberThe first hour of the time range.
tonumberThe last hour of the time range.
tooltip

The tooltip for each hour cell. Displays `${hour}:00–${hour + 1}:00` for current hour by default.

NameTypeDescription
daynumberThe day of week. 0 denotes Sunday.
hournumberThe hour value.

Events

NameDescription
select

v-model

Triggered when selection changed. The callback parameter list is (value: Object). value shares the same type with the selected prop.

Global config

KeyTypeDefaultDescription
schedule.statusesArray<{name, label}>See description.

The default status list with item type being {name: string, label: string}. The default value is:

[
  { name: 'selected', label: '@@schedule.selectedRanges' },
  { name: 'available', label: '@@schedule.availableRanges' }
]

@@ prefixed values denote corresponding properties in the locale settings.