@weektime-picker/react

WeekTime Picker

A flexible week time grid component for React applications.

Features

• 📅 Week-based time selection grid
• ⚡ Support for React 18+
• 🎨 Customizable themes and styling
• 📱 Responsive design
• 🔧 TypeScript support
• 🎯 Flexible time intervals (15min, 30min, 1hour)

Packages

• @weektime-picker/react - React component

Installation & Usage

React

npm install @weektime-picker/react
or
pnpm add @weektime-picker/react

import React, { useState } from "react";
import { WeekTimeGrid } from "@weektime-picker/react";

function App() {
  const [selectedRanges, setSelectedRanges] = useState([]);

  return (
    <WeekTimeGrid
      selectedRanges={selectedRanges}
      onSelectedRangesChange={setSelectedRanges}
      startHour={9}
      endHour={18}
      timeInterval={60}
    />
  );
}

API

Props

Prop	Type	Default	Description
selectedRanges	TimeRange[]	[]	Array of selected time ranges
onSelectedRangesChange (React) / @selectedRangesChange (Vue)	Function	-	Callback when selection changes
startHour	number	0	Start hour (0-23)
endHour	number	24	End hour (1-24)
timeInterval	number	60	Time interval in minutes (15, 30, 60)
themeColor	string	'#4a89dc'	Theme color for selected cells
dayLabels	string[]	['周一', '周二', ...]	Custom day labels

Types

interface TimeRange {
  day: number; // 0-6 (Monday to Sunday)
  startTime: number; // Start time in minutes from 00:00
  endTime: number; // End time in minutes from 00:00
}

License

MIT