TimePeriodSelector - Drag to Select Time Period of the Day

TimePeriodSelector is a React component that allows users to select time periods for a specific day by dragging. It supports both Chinese and English languages and allows customization of styles.

Installation

Install the component via npm:

npm install time-period-selector-react

Usage

import { TimePeriodSelector, Time} from 'time-period-selector-react';

const MyComponent = () => {

  const [selectedTime, setSelectedTime] = useState<Time>({
    Mon: [],
    Tue: [],
    Wed: [],
    Thu: [],
    Fri: [],
    Sat: [],
    Sun: [],
  });

  return (
    <div>
      <TimePeriodSelector
        title='Select Time Period'
        language='en'
        showTime
        style={{ margin: '200px auto' }}
        value={selectedTime}
        onChange={setSelectedTime}
      />
    </div>
  );
};

Props

| Name | Type | Description | | --------- | ------------------- | ------------------------------- | | style | React.CSSProperties | The style of the component | | value | Time | The selected time periods | | onChange | (value: Time) => void | The callback function | | title | string | The title of the component | | language | 'zh','en' | The language of the component | | showTime | boolean | Whether to show time |

Component Features

• Drag and drop to select time periods for a specific day
• Support both Chinese and English languages
• Customize the style of the week day

Component Structure

The TimePeriodSelector component uses weekDays as the list of days in a week and renders the selection area for each day based on this list. Each day's selected time periods (Time type) are stored as an array of numbers representing the selected time range.

const weekDays: readonly ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
type WeekDay = (typeof weekDays)[number];
export type Time = Record<WeekDay, number[]>;

License

MIT License