react-daily-timeline-sheet v1.3.0

React Daily TimeLine Sheet

A customizable timeline component for React applications. The React Daily TimeLine Sheet component visualizes working and non-working hours in a horizontal timeline, making it ideal for time-tracking apps, schedules, and other applications where time management is key.

React Daily TimeLine Sheet

Here are some visual examples of the TimeLine component:

Features

• Customizable Colors and Styles: Easily configure colors for working and non-working segments, and adjust height and border-radius.
• Flexible Time Formats: Choose between 12-hour and 24-hour time formats to match your application's requirements.
• Custom Tooltips: Optionally provide a custom tooltip renderer for more personalized information display.
• Responsive Breakpoints: Automatically adjust the timeline’s intervals based on responsive breakpoints.
• Non-working Hours Support: Display non-working hours with a customizable caption when no working hours are available.

Installation

Install the React Daily TimeLine Sheet component via NPM:

npm install react-daily-timeline-sheet

Usage

Basic Example Import and use the React Daily TimeLine Sheet in your React project:

import React from 'react';
import TimeLine from 'react-daily-timeline-sheet';

const workingHours = [
  {
    start: '09:00',
    end: '17:00',
    title: 'Work',
    status: 'InProgress',
  },
  // Add more working hours as needed
];

const App = () => {
  return (
    <div>
      <h1>My TimeLine</h1>
      <TimeLine
        workingHours={workingHours}
      />
    </div>
  );
};

export default App;

Custom Example

Import and use the React Daily TimeLine Sheet in your React project:

import React from 'react';
import TimeLine from 'react-daily-timeline-sheet';

const workingHours = [
  {
    start: '09:00',
    end: '17:00',
    title: 'Work',
    status: 'InProgress',
  },
  // Add more working hours as needed
];

const renderTooltip = (segment: any) => (
  <div
    style={{
      padding: "5px",
      backgroundColor: "#4d4d4c",
      color: "#fff",
      borderRadius: "3px",
    }}
  >
    <strong>{segment.tooltip}</strong>
    {segment.status && <div>Status: {segment.status}</div>}
  </div>
);

const App = () => {
  return (
    <div>
      <h1>My TimeLine</h1>
     <TimeLine
        workingHours={[
          { start: "09:00", end: "12:00", title: "Morning Shift" },
          { start: "13:00", end: "17:00", title: "Afternoon Shift" },
          { start: "18:00", end: "21:00", title: "Evening Shift" },
        ]}
        breakpoint="lg"
        workingColor="#578ff2"
        nonWorkingColor="#e0e0e0"
        height="50px"
        borderRadius="12px"
        timeFormat="12h"
        notWorkingCaption="No working hours today"
        renderTooltip={renderTooltip}
      />
    </div>
  );
};

export default App;

Custom Tooltips

To customize the tooltip displayed for each segment, use the renderTooltip prop:

import React from 'react';
import TimeLine from 'react-daily-timeline-sheet';

const customTooltip = (segment) => (
  <div>
    <strong>{segment.tooltip}</strong>
  </div>
);

const workingHours = [
  {
    start: '09:00',
    end: '17:00',
    title: 'Work',
    status: 'InProgress',
  },
  // Add more working hours as needed
];

const App = () => {
  return (
    <div>
      <h1>My Custom TimeLine</h1>
      <TimeLine
        workingHours={workingHours}
        renderTooltip={customTooltip}
        workingColor="#76c7c0"
        nonWorkingColor="#e0e0e0"
        height="40px"
        borderRadius="12px"
        timeFormat="24h"
        notWorkingCaption="No work"
      />
    </div>
  );
};

export default App;

Props

TimeLine Component Props

WorkingHour Interface

Segment Interface