@marinos33/react-week-time-range-picker

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