A versatile timetable component for Vue 3
npm install vue3-timetableA versatile, configurable and responsive timetable component for Vue 3.
Ideal for showing the agenda for locations on a specific date.
- Items can contain a cancelled property
- Increased test coverage
- Items starting before or ending after the timetable scope show an indicator
- Increased configurability of the timetable style and its locations and items
- The current time indicator can be hidden
- Fixed the horizontal scrollbar which was hidden, so mouse-only users couldn't scroll horizontally
- The display format of the dates is now configurable
- Selectable dates can be predefined using the dates option
- Timetable data can be loaded asynchronously using onDateChange
``
npm i vue3-timetable
`ts
`
Options
| Option | Type | Required | Default | Description |
| --------------- | ---------------------------------------------------- | -------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| locations | [TimeTableLocation[]](#timetablelocation) | yes | | The locations to show in the timetable |
| items | [TimeTableItem[]](#timetableitem) | no | [] | The events to show in the timetable |
| variant | _string_ | no | horizontal | The display style of the timetable. Can be horizontal or vertical. Defaults to vertical when unspecified and there is only 1 location |onDateChange
| dates | _string[]_ | no | | Predefined dates to choose from to load timetable data async with . The first date will be selected by default. The format needs to be yyyy-MM-dd |string
| startingHour | _number_ | no | 6 | Starting hour of a day |
| numberOfHours | _number_ | no | 24 | Number of hours to display for a single day |
| styles | TimeTableStyles | no | | Custom styling to apply to the timetable |
| onDateChange | _function(date: ) => void_ | no | | Callback function when a date is changed |TimeTableRenderedItem
| onItemClick | _function(item: ) => void_ | no | | Callback function when an item is clicked |TimeTableLocation`) => void_ | no | | Callback function when a location is clicked |
| onLocationClick | _function(item:
| dateFormat | _string_ | no | eee dd MMMM | Date format of the date picker. Guide |
| showTimeMarker | _boolean_ | no | true | Show or hide the current time marker |
Options
| Option | Type | Required | Default | Description |
| ------ | ------------------------------------------- | -------- | ------- | ----------------------------- |
| id | _string_ / _number_ | yes | | Location ID |
| name | _string_ | yes | | Location name |
| items | [TimeTableItem[]](#timetableitem) | no | | Event items for the location |
| style | CustomCSSProperties | no | | Custom style for the location |
Options
| Option | Type | Required | Default | Description |
| --------- | ------------------------------------------- | -------- | ------- | ----------------------------------------- |
| id | _string_ / _number_ | yes | | Item ID |
| name | _string_ | yes | | Item name |
| info | _string_ | no | | Item extra information |
| startDate | _Date_ / _string_ | yes | | Item start date |
| endDate | _Date_ / _string_ | yes | | Item end date |
| data | _{}_ | no | | Optional extra data. Useful for callbacks |
| style | CustomCSSProperties | no | | Custom style for the item |
| className | _string_ | no | | Custom additional class for the item |
| cancelled | _boolean_ | no | false | Shows the item as cancelled |
Options
| Option | Type | Default | Description |
| ------------------------- | -------- | ------------------------ | ----------------------------------------------------------- |
| backgroundColor | _string_ | #1f2937 | Timetable Background |
| borderStyle | _string_ | solid 2px #374151 | CSS Border style, specify "none" to remove borderStyle |
| dateBackgroundColor | _string_ | #1f2937 | Background of the date and hours. Avoid using "transparent" |
| dateTextColor | _string_ | inherit | Text color of the date and hours |
| datePickerBackgroundColor | _string_ | #1f2937 | Background of the date picker |
| itemBackgroundColor | _string_ | #304151 | Background of an item |
| itemTextColor | _string_ | inherit | Text color of an item |
| locationBackgroundColor | _string_ | #000 | Background of a location |
| locationTextColor | _string_ | inherit | Text color of a location |
| textColor | _string_ | #fff | General text color used in the timetable |
| timeMarkerColor | _string_ | rgba(255, 255, 255, 0.3) | Color of the current time indicator |
Options
| Option | Example | Description |
| --------------- | ------------------------------------- | ---------------- |
| background | #1f2937 | Background |
| backgroundColor | red | Background color |
| border | solid 2px #000 | Border style |
| boxShadow | inset 0 0 5px 5px #000 | Box shadow |
| color | blue | Text color |
| font | italic small-caps bold 16px/2 cursive | Font properties |
| fontWeight | bold | Font weight |
| fontSize | 14px | Font size |
| fontFamily | Arial, sans-serif | Font family |
| fontStyle | italic | Font style |
| opacity | 0.8 | Opacity |