General description

The library provides a set of native web-components to layout calendar of day events with ability to separate events by columns (resources). Library mostly is just a presenter of calendar layout, any dates filtering/manipulation should be done via wrappers.

Purpose of creating

Currently lots of npm-components provides end-2-end ready components like scheduler. Scheduler is a pretty complex component and usually consists of such sub-areas:

1. Top panel with current-date, view-mode, date-mutation controls
2. Calendar board panel with events, timeline
3. Event inside board with its own layout and presentation
4. Interaction with the board (drag&drop, adding new events etc)

Looks pretty nice isn't it? By choosing any of such libraries developer can start using it immediately with lots of additional configuration and setup. But there are a set of different situations which make these (end-2-end) libraries impossible to use in a particular web application:

• Web application already has a set of it's own components to control date (datepickers), it's own buttons/icons, we can layout such panel on our own
• Web application has a pretty complex layout for a particular event in calendar board with it's own behavior (builtin event layout doesn't work). In this very case developers of libraries often makes their components pretty "flexible" be creating a large configuration for their library. But still - even with as most large configuration as possible - it is much friendly for a developer to build his child event-calendar component on his own isn't it?

This reasons moved me to create a library with a set of presenter-components. Presenter component is a new term which means (mostly) component without real data control, but DOM control. Good example of complex native presenter component is

. To add header of a table you can add element, to add row . But native table won't let you an ability of adding paging, filtering, sorting or virtual scrolling - all data manipulations should be done by a wrappers data containers.

API

1. Importing scheduler into your web application

import { defineCustomElements } from '@telenko/schedule-component/dist/loader';

2. Defining components

defineCustomElements(window);

3. Using components in your app (components api below)

Components API

We didn't randomly compared scheduler to table element. Comparing with table can simplify understanding of scheduler API.

1. <schedule-day> is a container element (like <table>)
2. <schedule-header> is a header column (like <th>), but instead of headers container (<thead>) slot='header' should be used.
3. <schedule-resource> can be compared with <tr> element. Resource represents a group of events in a board (but unlike to row - vertically like a column)
4. <schedule-day-event> is an event in the board (can be compared to <td> like a low-level element with data inside). Event has such props as: 'from' and 'to' which receives a time for this event in a board in format HH:mm. Example:

<schedule-day-event from='10:00' to='13:30'>

All-together example:

<schedule-day style='height: 700px;'>
    <schedule-header slot='header'>
        header to be here..
    </schedule-header>
    <schedule-header slot='header'>
        header to be here..
    </schedule-header>
    <schedule-resource>
        <schedule-day-event from='10:00' to='13:30'>
            <div style='border-radius: 5px;background-color: rgba(64, 64, 168, 0.9);color: white;'>
                <div style='padding: 10px;'>Some value from event</div>
            </div>
        </schedule-day-event>
        <schedule-day-event from='18:00' to='19:30'>
            <div style='border-radius: 5px;background-color: rgba(64, 64, 168, 0.9);color: white;'>
                <div style='padding: 10px;'>Some value from event</div>
            </div>
        </schedule-day-event>
    </schedule-resource>
    <schedule-resource>
        <schedule-day-event from='20:00' to='22:30'>
            <div style='border-radius: 5px;background-color: rgba(168, 64, 64, 0.9);color: white;'>
                <div style='padding: 10px;'>Some value from event</div>
            </div>
        </schedule-day-event>
    </schedule-resource>
</schedule-day>