react-booking-timeline

React booking timeline generated.

This component has been developed to be able to display room or place reservations. It is therefore not planned to display several events at the same time for the same room/place. It also allows you to select free areas.

Note that react-booking-timeline is based on React 15.

Install

npm install react-booking-timeline

Usage

const BookingTimeline = require("react-booking-timeline");
 
const groups = [{ id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }]
const items = [
    {
        id: 1,
        group: 1,
        title: 'First item very very very long...',
        start: moment().add(1, 'day').valueOf(),
        end: moment().add(4, 'day').valueOf(),
    },
    {
        id: 2,
        group: 2,
        title: 'item 2',
        start: moment().add(-0.5, 'day').valueOf(),
        end: moment().add(10, 'day').valueOf(),
    },
]
 
handleSelect = (item) => {
    console.log("item:", item)
}
 
render () {
    <DateTimeline
      groups={groups}
      items={items}
      onSelect=(this.handleSelect)
    />
}
 

Props

Name	Type	Default Value	Description
startdate	String	moment().valueOf()	Start date of timeline
enddate	string	moment().add(6,'months').valueOf()	End date of timeline
onSelect	Function		Function called when the user selects an event
contentTooltipRender	Function	(evt) => ( {evt.title} )	Function called to render the content of the tooltip. Tooltip is shown when the user clicks an event.
config	Object	see below	Config of component

Details of config prop

See below all props for the config prop

Name	Type	Default Value	Description
locale	String	"fr"	Language
bgColor	String	"#8dc149"	Background color of events
selectedBgColor	String	"#ffc149"	Background color of the selected event
headerBgColor	String	"#519aba"	Background color of the header
headerColor	String	"white"	Text color of the header
freeEventBgColor	String	"#d2cdcd"	Background color of free events
freeEventSelectedBgColor	String	"#d2cdcd"	Background color of the selected free event
groupLabel	String	""	Label of the first column
showGroups	bool	true	Show the group's column
canSelectedFreeEvent	bool	true	Show free events. User can select free events
showTooltip	bool	true	Show tooltip of events
tooltipClassName	String		Classname of tooltip

Example of class for tooltip:

.customeTheme {
  color: black !important;
  background-color: burlywood !important;
  &.place-top {
    &:after {
    border-top-color: burlywood !important;
    border-top-style: solid !important;
    border-top-width: 6px !important;
    }
  }
 }

Limitations

• Test and design for React 15
• Show only on event by group. If you have 2 events at the same time in the same group, events will be displayed on top of each other

License

MIT