npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@telenko/schedule-component

v0.0.3

Published

Schedule components

Downloads

3

Readme

Built With Stencil

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 'schedule-component/dist/loader';
  1. Defining components
defineCustomElements(window);
  1. 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>

Alt text