diff --git a/.circleci/config.yml b/.circleci/config.yml
new file mode 100644
index 000000000..4329577d8
--- /dev/null
+++ b/.circleci/config.yml
@@ -0,0 +1,23 @@
+version: 2.1
+
+jobs:
+ build:
+ docker:
+ - image: cimg/node:16.19.1
+ steps:
+ - checkout
+ - run:
+ name: Install pnpm
+ command: npm install -g pnpm
+ - run:
+ name: Install Dependencies with pnpm
+ command: pnpm install --production=false
+ - run:
+ name: Build the Package
+ command: pnpm run build
+
+workflows:
+ version: 2
+ build_and_test:
+ jobs:
+ - build
\ No newline at end of file
diff --git a/.githooks/pre-push b/.githooks/pre-push
new file mode 100755
index 000000000..aee59ba2b
--- /dev/null
+++ b/.githooks/pre-push
@@ -0,0 +1,38 @@
+#!/usr/bin/env bash
+
+function build {
+ rm -rf lib && ./node_modules/.bin/babel src --out-dir lib && ./node_modules/.bin/node-sass src/lib/Timeline.scss lib/Timeline.css && sed -i'.bak' 's/Timeline\\.scss/Timeline\\.css/g' lib/lib/Timeline.js && rm lib/lib/Timeline.js.bak
+}
+
+function commit_changes {
+ # Check if there are any changes to commit
+ if [[ -n $(git status -s) ]]; then
+ git add lib/*
+
+ # Commit changes with a default message
+ git commit -m "Build artifacts updated"
+ else
+ echo "No changes to commit."
+ fi
+}
+
+function main {
+ exit_status=0
+
+ current_branch=$(git branch --show-current)
+ if [ "$current_branch" = "main" ]; then
+ build || exit_status=$?
+
+ if [ $exit_status -eq 0 ]; then
+ commit_changes
+ fi
+
+ fi
+
+ if [ $exit_status -ne 0 ]; then
+ echo "Pre-push hook failed (build failed)."
+ exit $exit_status
+ fi
+}
+
+main "$@"
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 2db738b4f..787aa9857 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,7 +7,6 @@ bower_components
modules
build
gh-pages
-/lib
package-lock.json
# vscode stuff
.vscode
diff --git a/README.md b/README.md
index f7fcde707..0aa16f337 100644
--- a/README.md
+++ b/README.md
@@ -546,6 +546,67 @@ groupRenderer = ({ group }) => {
}
```
+## emptyCellLabelRenderer
+
+Function that allows you to render custom labels in empty cells (cells where no items overlap). This is useful for displaying information like availability status, pricing, or other metadata for specific date ranges and groups.
+
+The function is called for each empty cell in the timeline. The Timeline component automatically iterates over all time ranges and groups, checking for empty cells and calling your renderer function when needed.
+
+**Function signature:**
+
+```jsx
+emptyCellLabelRenderer = ({ time, timeEnd, group, groupOrder }) => {
+ // Return JSX to render a label, or null/undefined to render nothing
+}
+```
+
+**Parameters:**
+
+| property | type | description |
+| ------------ | --------------- | --------------------------------------------------------------------------- |
+| `time` | `Moment` | Start time of the empty cell (moment object) |
+| `timeEnd` | `Moment` | End time of the empty cell (moment object) |
+| `group` | `object` | The group object for this row (same object passed in the `groups` prop) |
+| `groupOrder` | `number` | The index/order of the group in the groups array |
+
+**Return value:**
+
+- Return a React element (JSX) to render a label in the empty cell
+- Return `null` or `undefined` to render nothing for that cell
+
+**Example:**
+
+```jsx
+emptyCellLabelRenderer = ({ time, timeEnd, group, groupOrder }) => {
+ // Access the date for this cell
+ const cellDate = moment(time).format('YYYY-MM-DD');
+
+ // Access group/rental data
+ const rental = group;
+
+ // Return custom label based on your logic
+ return (
+
+ Available
+
+ );
+}
+
+// Usage in Timeline component
+
+```
+
+**Notes:**
+
+- The renderer function is called automatically by the Timeline for each empty cell - you don't need to iterate over groups or time ranges yourself
+- The function can access component state, props, or make API calls to fetch data for specific dates
+- For performance, consider caching data or pre-fetching pricing/availability information rather than fetching it on every render call
+- Empty cells are determined by checking if any items overlap with the time range for that group
+
## resizeDetector
The component automatically detects when the window has been resized. Optionally you can also detect when the component's DOM element has been resized.
diff --git a/demo/app/demo-empty-cell-labels/index.js b/demo/app/demo-empty-cell-labels/index.js
new file mode 100644
index 000000000..4fc8fa049
--- /dev/null
+++ b/demo/app/demo-empty-cell-labels/index.js
@@ -0,0 +1,240 @@
+import React, { Component } from 'react'
+import moment from 'moment'
+
+import Timeline from 'react-calendar-timeline'
+
+import generateFakeData from '../generate-fake-data'
+
+var keys = {
+ groupIdKey: 'id',
+ groupTitleKey: 'title',
+ groupRightTitleKey: 'rightTitle',
+ itemIdKey: 'id',
+ itemTitleKey: 'title',
+ itemDivTitleKey: 'title',
+ itemGroupKey: 'group',
+ itemTimeStartKey: 'start',
+ itemTimeEndKey: 'end'
+}
+
+export default class App extends Component {
+ constructor(props) {
+ super(props)
+
+ const { groups, items } = generateFakeData(5, 15)
+ const defaultTimeStart = moment()
+ .startOf('day')
+ .toDate()
+ const defaultTimeEnd = moment()
+ .startOf('day')
+ .add(7, 'days')
+ .toDate()
+
+ this.state = {
+ groups,
+ items,
+ defaultTimeStart,
+ defaultTimeEnd,
+ labelMode: 'available',
+ showNoItems: false
+ }
+ }
+
+ handleLabelModeChange = (mode) => {
+ this.setState({ labelMode: mode })
+ }
+
+ handleToggleNoItems = () => {
+ this.setState({ showNoItems: !this.state.showNoItems })
+ }
+
+ emptyCellLabelRenderer = ({ time, group }) => {
+ const { labelMode } = this.state
+
+ if (labelMode === 'none') {
+ return null
+ }
+
+ if (labelMode === 'available') {
+ return (
+
+ Available
+
+ )
+ }
+
+ if (labelMode === 'date') {
+ return (
+
+ {moment(time).format('MMM D')}
+
+ )
+ }
+
+ if (labelMode === 'price') {
+ const mockPrice = Math.floor(Math.random() * 200) + 50
+ return (
+
+ €{mockPrice}
+
+ )
+ }
+
+ if (labelMode === 'minStay') {
+ const mockMinStay = Math.floor(Math.random() * 5) + 1
+ return (
+
+ {mockMinStay} nights min
+
+ )
+ }
+
+ if (labelMode === 'groupSpecific') {
+ const groupColors = {
+ 1: '#2c5aa0',
+ 2: '#d97706',
+ 3: '#059669',
+ 4: '#dc2626',
+ 5: '#7c3aed'
+ }
+ const color = groupColors[group.id] || '#666'
+
+ return (
+
+ {group.title.substring(0, 3).toUpperCase()}
+
+ )
+ }
+
+ if (labelMode === 'conditional') {
+ const dayOfWeek = moment(time).day()
+ const isWeekend = dayOfWeek === 0 || dayOfWeek === 6
+
+ if (isWeekend) {
+ return (
+
+ Weekend
+
+ )
+ }
+
+ return (
+
+ Weekday
+
+ )
+ }
+
+ return null
+ }
+
+ render() {
+ const { groups, items, defaultTimeStart, defaultTimeEnd, labelMode, showNoItems } = this.state
+ const displayItems = showNoItems ? [] : items
+
+ return (
+
+
+
Empty Cell Labels Demo
+
+ This demo shows how to use the emptyCellLabelRenderer prop to display labels in empty cells.
+ The renderer receives: {`{ time, timeEnd, group, groupOrder }`}
+