Package Exports

timeline-calendar
timeline-calendar/dist/lib.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (timeline-calendar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Timeline Calendar for React.

Simple timeline calendar for React that is easy to customize and work with.

import React from "react";
import TimelineCalendar, { TimelineCalendarProps } from "timeline-calendar";

let events = [
    {
        id: 1,
        title: "Workshop",
        start: new Date("2022-11-12 08:00"),
        end: new Date("2022-11-12 13:30"),
    }
];

let options: TimelineCalendarProps {
    events: events,
    // currentDate: Date;
    // events: Event[];
    // numberOfColumns?: number; Defaults to 7 (weekly).
    // onCellClick?: (date: Date) => void;
    // onEventClick?: (event: Event) => void;
    // disableCellPredicate?: (date: Date) => boolean; Defaults to false.
    // hourWindowDateFormat?: string; Format of the string is based on Unicode Technical Standard #35
    // dateWindowDateFormat?: string; Format of the string is based on Unicode Technical Standard #35
    // businessHourStart?: number; Defaults to 8.
}

default export function App() {
    let [dateNow, setDateNow] = useState(new Date());

    return <TimelineCalendar currentDate={dateNow} {...options} />;
}

Screenshot 2022-11-16 at 10 37 07

It is easy to customize the theme by defining CSS variables as :root.

:root {
    --cell-divider-color: #dce5ec;
    --cell-bg-color: white;
    --xy-bg-color: #eef6fd;
    --xy-color: #606060;
    --xy-divider-color: #b1bbc4;
    --border-color: transparent;
    --event-color: rgba(225, 81, 83, 0.75);
    --cell-hover-color: #a8a8a8;
    --cell-disabled-color: rgb(245, 245, 245);
}

Change height by assigning height to this CSS class:

.timeline-calendar {
    height: 800px !important;
}

.calendar-grid {
    height: 600px !important;
}

This package exports ESM only at this point in time.