Ractive Ez Scheduler
Scheduler component for ractive.js
Install
npm i ractive-ez-scheduler
;;
Requires less-loader.
Usage
Scheduler
The scheduler provides a full scheduler user interface with header and groups.
groups
: Array of groups to render verticallyevents
: Array of events to render horizontallydateFrom
: Start of the events to viewdateUntil
: End of the events to viewgroupHeight
: The fixed height of a group rowenableVirtualization
: If true, will render only visible groupsgetEventFrom
: Function to retrieve the start date of an eventevent => event.dateFrom
getEventUntil
: Function to retrieve the end date of an eventevent => event.dateUntil
getGroupEvents
: Function to retrieve all events for a group(group, events) => events.filter(event => event.groupId == group.id)
Partials
Following partials can be overridden to specify how a component in the scheduler is rendered
group
: How to render a group (refer togroup
inside the partial)group-header
: How to render the group header in the top-left corner of the scheduler.event
: How to render an event in the timeline (refer toview.event
inside the partial)
Timeline
The timeline provides a simple layout tool for the containing events, relative to the container.
events
: Array of events to render horizontallydateFrom
: Start of the events to viewdateUntil
: End of the events to viewgetEventFrom
: Function to retrieve the start date of an eventevent => event.dateFrom
getEventUntil
: Function to retrieve the end date of an eventevent => event.dateUntil
Partials
event
: How to render an event in the timeline (refer toview.event
inside the partial)