docs_vue2/one/docs/en-US/components/schedule.md

Schedule

Demos

API

Props

Name	Type	Default	Description
selected	Object	-	[^selected]
hour-class	`string	Array	Object
disabled-date	function(number, number): boolean	() => false	Whether 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.
shortcuts	Array	schedule.shortcuts	[^shortcuts]
shortcuts-display	string	'inline'	The display mode of the shortcuts. Supported values are inline / popup, which denote inline button groups and dropdown select, respectively.
statuses	Array<{label: string, value: string}>	schedule.statuses	The 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.
disabled	boolean=	false	Whether the schedule component is disabled.
readonly	boolean=	false	Whether the schedule component is read-only.

^^^selected :::badges 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.

+++Sample data

{
  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. +++ ^^^

^^^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]]. ^^^

Slots

Name	Description
header	The entire header section.
header-content	The content of the header section, not including the container.
shortcuts	The shortcuts section of the header section.
legend	The legends section of the header section.
legend-label	[^slot-legend-label]
hour	[^slot-hour]
label	[^slot-label]
tooltip	[^slot-tooltip]

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

+++Slot props

Name	Type	Description
label	string	The text label of the legend.
value	string	The value of the legend.
+++

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

^^^slot-hour The content of each hour cell.

+++Slot props

Name	Type	Description
day	number	The day of week. 0 denotes Sunday.
hour	number	The hour value.
+++
^^^

^^^slot-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.

+++Slot props

Name	Type	Description
from	number	The first hour of the time range.
to	number	The last hour of the time range.
+++
^^^

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

+++Slot props

Name	Type	Description
day	number	The day of week. 0 denotes Sunday.
hour	number	The hour value.
+++
^^^

Events

Name	Description
select	[^event-select]

^^^event-select :::badges v-model :::

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

Configs

Key	Type	Default	Description
schedule.statuses	Array<{name, label}>	See description.	[^config-statuses]

^^^config-statuses 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' }
]

:::tip @@ prefixed values denote corresponding properties in the locale settings. ::: ^^^