147 lines
5.2 KiB
Markdown
147 lines
5.2 KiB
Markdown
# Schedule
|
||
|
||
## Demos
|
||
|
||
[[ demo src="/demo/schedule/default.vue" ]]
|
||
|
||
## API
|
||
|
||
### Props
|
||
|
||
| Name | Type | Default | Description |
|
||
| -- | -- | -- | -- |
|
||
| `selected` | `Object` | - | [^selected] |
|
||
| `hour-class` | `string|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](https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes). 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-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 <code>`veui-schedule-legend-${value}`</code> 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()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/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
|
||
```json
|
||
{
|
||
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.
|
||
|
||
+++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`.
|
||
^^^
|
||
|
||
^^^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. |
|
||
+++
|
||
^^^
|
||
|
||
^^^slot-label
|
||
The content of the selected label. By default, displays the time range in the form of <code>`${from}:00–${to + 1}:00`</code> 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. |
|
||
+++
|
||
^^^
|
||
|
||
^^^slot-tooltip
|
||
The tooltip for each hour cell. Displays <code>`${hour}:00–${hour + 1}:00`</code> 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:
|
||
|
||
```js
|
||
[
|
||
{ name: 'selected', label: '@@schedule.selectedRanges' },
|
||
{ name: 'available', label: '@@schedule.availableRanges' }
|
||
]
|
||
```
|
||
|
||
:::tip
|
||
`@@` prefixed values denote corresponding properties in the locale settings.
|
||
:::
|
||
^^^
|