https://github.com/waqaskhanroghani/react-schedule-availability
A modern React component for managing weekly availability schedules.
https://github.com/waqaskhanroghani/react-schedule-availability
availability availability-checker calendar nextjs react scheduler time-picker
Last synced: about 1 month ago
JSON representation
A modern React component for managing weekly availability schedules.
- Host: GitHub
- URL: https://github.com/waqaskhanroghani/react-schedule-availability
- Owner: waqaskhanroghani
- License: mit
- Created: 2025-02-04T20:52:09.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-04T20:59:32.000Z (about 1 year ago)
- Last Synced: 2025-02-04T21:37:49.344Z (about 1 year ago)
- Topics: availability, availability-checker, calendar, nextjs, react, scheduler, time-picker
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-schedule-availability
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Schedule Availability
A modern React component for managing weekly availability schedules.
## Installation
```bash
npm install react-schedule-availability
# or
yarn add react-schedule-availability
```
## Quick Start Templates
### For Next.js (App Router)
```tsx
'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 (
);
}
```
### For React
```tsx
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 (
);
}
```
## Ready-to-Use Templates
We provide complete, styled templates for both React and Next.js:
1. **React Template**: Copy from `/templates/ReactTemplate.tsx`
- Basic setup with TypeScript
- Clean, modern UI
- State management example
- Schedule display
2. **Next.js Template**: Copy from `/templates/NextTemplate.tsx`
- App Router compatible
- Tailwind CSS styling
- Custom animations
- Schedule display
## Props
| 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 |
## Types
```typescript
type WeeklySchedule = {
[key in DayOfWeek]: {
isOpen: boolean;
isAllDay: boolean;
intervals: Array<{ start: string; end: string; }>;
};
};
```
## Styling
1. **Default Style**
```tsx
import 'react-schedule-availability/styles.css';
```
2. **Custom Styling**
```css
.availability-picker {
/* Your styles */
}
```
## Examples
### Custom Time Range
```tsx
```
### With Form
```tsx
setFormData({ ...formData, schedule })}
/>
Save
```
## License
MIT