5.3 KiB
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 |
[^scoped-slot-legend-label] |
hour |
[^scoped-slot-hour] |
label |
[^scoped-slot-label] |
tooltip |
[^scoped-slot-tooltip] |
^^^scoped-slot-legend-label
The text label of each legend. Displays the label property of each legend by default.
+++Scope properties
| 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 scope object via v-bind.
^^^
^^^scoped-slot-hour The content of each hour cell.
+++Scope properties
| Name | Type | Description |
|---|---|---|
day |
number |
The day of week. 0 denotes Sunday. |
hour |
number |
The hour value. |
| +++ | ||
| ^^^ |
^^^scoped-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.
+++Scope properties
| Name | Type | Description |
|---|---|---|
from |
number |
The first hour of the time range. |
to |
number |
The last hour of the time range. |
| +++ | ||
| ^^^ |
^^^scoped-slot-tooltip
The tooltip for each hour cell. Displays `${hour}:00–${hour + 1}:00` for current hour by default.
+++Scope properties
| 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.
^^^
Global config
| 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.
:::
^^^