# eos_vue_workday

## 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')} |
| evnetClick | event (an event object) |