A modern React component for managing weekly availability schedules.
npm install react-schedule-availability
# or
yarn add react-schedule-availability'use client'; import { AvailabilityPicker } from 'react-schedule-availability'; import 'react-schedule-availability/styles.css'; export default function Page() { const [schedule, setSchedule] = useState({ monday: { isOpen: true, isAllDay: false, intervals: [{ start: "09:00", end: "17:00" }] }, // ... other days }); return ( <AvailabilityPicker value={schedule} onChange={setSchedule} timeStep={30} /> ); }
import { AvailabilityPicker } from 'react-schedule-availability'; import 'react-schedule-availability/styles.css'; function ScheduleManager() { const [schedule, setSchedule] = useState({ monday: { isOpen: true, isAllDay: false, intervals: [{ start: "09:00", end: "17:00" }] }, // ... other days }); return ( <AvailabilityPicker value={schedule} onChange={setSchedule} timeStep={30} /> ); }
We provide complete, styled templates for both React and Next.js:
-
React Template: Copy from
/templates/ReactTemplate.tsx- Basic setup with TypeScript
- Clean, modern UI
- State management example
- Schedule display
-
Next.js Template: Copy from
/templates/NextTemplate.tsx- App Router compatible
- Tailwind CSS styling
- Custom animations
- Schedule display
| Prop | Type | Default | Description |
|---|---|---|---|
value |
WeeklySchedule |
Required | Current schedule |
onChange |
(schedule: WeeklySchedule) => void |
Required | Change handler |
timeStep |
number |
30 |
Interval in minutes |
minTime |
string |
"00:00" |
Start time (24h) |
maxTime |
string |
"23:30" |
End time (24h) |
disabled |
boolean |
false |
Disable picker |
className |
string |
"" |
Custom CSS class |
type WeeklySchedule = { [key in DayOfWeek]: { isOpen: boolean; isAllDay: boolean; intervals: Array<{ start: string; end: string; }>; }; };
- Default Style
import 'react-schedule-availability/styles.css';
- Custom Styling
.availability-picker { /* Your styles */ }
<AvailabilityPicker value={schedule} onChange={setSchedule} minTime="06:00" maxTime="22:00" timeStep={15} />
<form onSubmit={handleSubmit}> <AvailabilityPicker value={formData.schedule} onChange={schedule => setFormData({ ...formData, schedule })} /> <button type="submit">Save</button> </form>
MIT