ftr-timetable

React Timetable

A versatile, configurable and responsive timetable component for React. Ideal for showing the agenda for locations on a specific date.

Changes in version 1.5

• Items can contain a cancelled property
• Items starting before or ending after the timetable scope are now included
• Increased configurability of the timetable style and its locations and items
• The current time indicator can be hidden by setting showTimeMarker to false
• Fixed the horizontal scrollbar which was hidden, so mouse-only users couldn't scroll horizontally
• The display format of the dates is now configurable through dateFormat

Installation

npm i ftr-timetable

Usage example

import {
  TimeTable,
  type TimeTableItem,
  type TimeTableLocation,
  type TimeTableRenderedItem,
} from "ftr-timetable";

interface EventData {
  type?: string;
  category?: string;
  isFree: boolean;
}

const locations: TimeTableLocation[] = [
  {
    id: "1",
    name: "Mainstage",
    items: [
      {
        id: "4",
        name: "Event included in location",
        startDate: "2024-05-05T16:00:00+02:00",
        endDate: "2024-05-05T18:00:00+02:00",
        data: {
          isFree: true,
        },
      },
    ],
  },
  {
    id: "2",
    name: "Garden",
  },
];

const items: TimeTableItem[] = [
  {
    id: "1",
    name: "Main event",
    info: "Don't miss it!",
    locationId: "1",
    startDate: "2024-05-05T10:00:00+02:00",
    endDate: "2024-05-05T15:00:00+02:00",
  },
  {
    id: "2",
    name: "Violin concert",
    locationId: "2",
    startDate: "2024-05-05T08:00:00+02:00",
    endDate: "2024-05-05T12:00:00+02:00",
    cancelled: true,
    data: {
      type: "Music",
      category: "Classical",
      isFree: true,
    },
  },
  {
    id: "3",
    name: "Day 2 Main event",
    locationId: "1",
    startDate: "2024-05-06T10:00:00+02:00",
    endDate: "2024-05-06T15:00:00+02:00",
  },
];

const onItemClicked = (item: TimeTableRenderedItem<EventData>) => {
  console.log("Item clicked: ", item, `Free: ${item.data?.isFree || false}`);
};

return (
  <TimeTable
    items={items}
    variant="horizontal"
    locations={locations}
    onItemClick={onItemClicked}
    styles={{
      backgroundColor: "transparent",
      dateBackgroundColor: "ivory",
      locationBackgroundColor: "beige",
      textColor: "#000",
      borderStyle: "solid 1px #ccc",
      itemBackgroundColor: "burlywood",
      itemHoverBackgroundColor: "darkkhaki",
      itemTextColor: "#fff",
    }}
  />
);

API Reference

TimeTable

Options

Option	Type	Required	Default	Description
locations	TimeTableLocation[]	yes		The locations to show in the timetable
items	TimeTableItem[]	no	[]	The events to show in the timetable
variant	string	no	horizontal	The display style of the timetable. Can be horizontal or vertical. Defaults to vertical when unspecified and there is only 1 location
dates	string[]	no		Predefined dates to choose from. The first date will be selected by default. The format needs to be yyyy-MM-dd
startingHour	number	no	6	Starting hour of a day
numberOfHours	number	no	24	Number of hours to display for a single day
styles	TimeTableStyles	no		Custom styling to apply to the timetable
onDateChange	function(date: string)	no		Callback function when the date is changed. Returns the selected date as yyyy-MM-dd
onItemClick	function(item: TimeTableRenderedItem<T>) => void	no		Callback function when an item is clicked
onLocationClick	function(item: TimeTableLocation) => void	no		Callback function when a location is clicked
renderItem	function(item: TimeTableRenderedItem<T>) => React.ReactNode	no		Custom rendering of items
renderLocation	function(item: TimeTableLocation) => React.ReactNode	no		Custom rendering of locations
dateFormat	string	no	eee dd MMMM	Date format of the date picker. Guide
showTimeMarker	boolean	no	true	Show or hide the current time marker

TimeTableLocation

Options

Option	Type	Required	Default	Description
id	string / number	yes		Location ID
name	string	yes		Location name
items	TimeTableItem[]	no		Event items for the location
style	React.CSSProperties	no		Custom style for the location

TimeTableItem

Options

Option	Type	Required	Default	Description
id	string / number	yes		Item ID
name	string	yes		Item name
info	string	no		Item extra info
startDate	Date / string	yes		Item start date
endDate	Date / string	yes		Item end date
data	{}	no		Optional extra data. Useful for callbacks
style	React.CSSProperties	no		Custom style for the item
cancelled	boolean	no	false	Shows the item as cancelled

TimeTableStyles

Options

Option	Type	Default	Description
backgroundColor	string	#1f2937	Background color
borderStyle	string	solid 2px #374151	CSS Border style, specify "none" to remove borderStyle
dateBackgroundColor	string	#1f2937	Background color of the date and hours. Avoid using "transparent"
dateTextColor	string	inherit	Text color of the date and hours
datePickerBackgroundColor	string	#1f2937	Background of the date picker
itemBackgroundColor	string	#304151	Background color of an item
itemHoverBackgroundColor	string	#374151	Background color of an item on hover
itemTextColor	string	inherit	Text color of an item
locationBackgroundColor	string	#000	Background color of a location
locationTextColor	string	inherit	Text color of a location
textColor	string	#fff	General text color used in the timetable
timeMarkerColor	string	#666	Color of the current time indicator