A Vue component to display an event scheduling diary
Based on a working day, each working day object will contain its own list of events
Allows creation of a schedule for multiple users on each calendar day
Allows for for appointments/events to be created only on days with a schedule
Allows for custom behaviour in reacting to component events, simply update the workday events array
Main component is the WorkdayContainer
This takes 2 props
1. An workday array
2. A workday options object
Workday Object
Property
Type (description)
id
String (schedule/workday id)
start_time
String (the start time of the work day)
finish_time
String (the end time of the work day)
breaks
Array (and array of break start and end times, cellEvents will not be fired during these times, cursor will show not allowed. NB start and end times must match a cell time)
user
Object (a user object see below)
events
Array (an array of event objects for this day)
other
Array (optional, an array of other objects/data which you can add and which will be included in the cellData payload)
User Object
Property
Type (description)
id
String (user id)
name
String
Event Object
Property
Type (description)
id
String (event id)
user_id
String
title
String (event title)
description
String (a description for the event)
color
String (a hex color for the event)
start_time
String (a start time and date for the event in the format YYY-MM-DD HH:mm:ss)
end_time
String (an end time and date for the event in the same format as start time)
Workday Options Object
Property
Type (description)
mode
String (either of 'week' or 'day')
five_minute_height
Number (the number of pixels to represent 5 minutes on the calendar)
focus_date
String (date the calendar will set as the current date)
primary_color
String (hex color for the current day)
Events
Event
Description
cellClick
emitted when an empty cell is clicked, use to book an event
eventClick
emitted when an event is clicked, use to update or delete an event
Event
Payload
cellClick
cellData { index (Number), value ( String 'YYYY-MM-DD HH:mm:ss')}