| ``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-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 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.
`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`](#props-selected) prop. When being `true`, it's same as `[[0, 23]]`.
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. |
Triggered when selection changed. The callback parameter list is `(value: Object)`. `value` shares the same type with the [`selected`](#props-selected) prop.
