react-week-time-range-picker

Introduction

It's a simple React component for selecting a range of hours per day of the week.

This component is a fork from https://github.com/lizhongzhen11/react-week-time-range-picker with various change such as:

• Reworked completely in english rather than in chinese
• Add customizable styles
• Better architecture and code improvement
• Added minimal storybook
• Props name slightly changed to be more obvious
• Switch from Webpack to Rollup
• Some bug fixes

Get Started

To start using it do npm install @marinos33/react-week-time-range-picker --save

And then you can import it like this:

import ReactWeekTimeRangePicker from '@marinos33/react-week-time-range-picker'

<ReactWeekTimeRangePicker />

Props

The available props for this components are the following. | Prop | Description | Type | Default | | ---------------------| -------------------------------------------------------------------|---------------------------------------------------|-----------| | hasHalfHour | Wheter to display the hour and is following half hour | boolean | false | | selectedData | The data displayed in the component | SelectedDataProps[ ](more information below) | [ ] | | outerCellColor | The color of the outer cells | string | #DDDEE1 | | innerCellColor | The color of the inner cell when inactive | string | #f5f5f5 | | fontColor | The color of the text | string | #000000 | | summaryColor | The background color of the summary at the bottom of the component | string | #ffffff |

| Function | Description | Return Type
| ---------------------| -------------------------------------------------------------------|-------------------------------------------------| | selectTimeRange | Function to get the selectedData and do whetever you want with. | void |

Example:

import ReactWeekTimeRangePicker from '@marinos33/react-week-time-range-picker'

const handleSelectTimeRange = (selectedData: SelectedDataProps[]) => {
    console.log(selectedData)
}
  
<ReactWeekTimeRangePicker hasHalfHour={true} selectTimeRange={handleSelectTimeRange} />

The structure of SelectedDataProps:

 {
    iden?: string; // the id of the day. eg: monday = 1, tuesday = 2, ... sunday = 7
    timeRanges?: string[][]; // the time from the selected box to the end box. eg: [['02:30', '03:00']]
    times?: string[]; //the time original clicked on. eg: ['02:30']
    dayName?: string; //the name of the day. eg: monday, tuesday, etc
 }

Known issues

• The drag box is inaccurate following the mouse movement