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, { useState } from "react";
import TimelineCalendar from "timeline-calendar";

// Import this CSS file if you do not want to implement all the details yourself.
import "../node_modules/timeline-calendar/dist/lib.esm.css";

let events = [
    {
      id: 1,
      title: "Meeting with CEO",
      start: new Date("2022-11-15 10:00"),
      end: new Date("2022-11-15 12:00"),
    },
    {
      id: 2,
      title: "Leisure",
      start: new Date("2022-11-17 08:00"),
      end: new Date("2022-11-18 14:00"),
    }
];

let options = {
    events: events,
    // 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.
}

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

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

Screenshot 2022-11-16 at 14 04 57

It is easy to customize the theme by defining CSS variables in :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.