Ractive Ez Scheduler

Scheduler component for ractive.js

Demo

Install

npm i ractive-ez-scheduler

import 'ractive-ez-scheduler';
import 'ractive-ez-scheduler/themes/blue.less';

Requires less-loader.

Usage

Scheduler

The scheduler provides a full scheduler user interface with header and groups.

<EzScheduler
    groups="{{ groups }}"
    events="{{ events }}"
    dateFrom="{{ dateFrom }}"
    dateUntil="{{ dateUntil }}"
    groupHeight="{{ groupHeight }}"
    enableVirtualization="true"
    getEventFrom="{{ getEventFrom }}"
    getEventUntil="{{ getEventUntil }}"
    getGroupEvents="{{ getGroupEvents }}" />

• groups: Array of groups to render vertically
• events: Array of events to render horizontally
• dateFrom: Start of the events to view
• dateUntil: End of the events to view
• groupHeight: The fixed height of a group row
• enableVirtualization: If true, will render only visible groups
• getEventFrom: Function to retrieve the start date of an event event => event.dateFrom
• getEventUntil: Function to retrieve the end date of an event event => 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 to group 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 to view.event inside the partial)

Timeline

The timeline provides a simple layout tool for the containing events, relative to the container.

<EzTimeLine
    events="{{ events }}"
    dateFrom="{{ dateFrom }}"
    dateUntil="{{ dateUntil }}"
    getEventFrom="{{ getEventFrom }}"
    getEventUntil="{{ getEventUntil }}" />

• events: Array of events to render horizontally
• dateFrom: Start of the events to view
• dateUntil: End of the events to view
• getEventFrom: Function to retrieve the start date of an event event => event.dateFrom
• getEventUntil: Function to retrieve the end date of an event event => event.dateUntil

Partials

• event: How to render an event in the timeline (refer to view.event inside the partial)