1.0.4 • Published 7 months ago
@yuefengzhang/slotbooking v1.0.4
@yuefengzhang/slotbooking
A modern React time slot booking component library with calendar picker and scheduler. Built with Material-UI and Emotion.
Features
- 📅 Modern calendar picker with dark theme support
- ⏰ Flexible time slot selection
- 🎨 Fully customizable themes
- 📱 Responsive design
- 🔄 Built-in availability management
- 💪 TypeScript support
Installation
First, install the package:
npm install @yuefengzhang/slotbooking
This library uses Material-UI and other dependencies. If you don't have them in your project yet, install the required peer dependencies:
npm install @mui/material @mui/x-date-pickers @mui/icons-material @mui/system @emotion/react @emotion/styled date-fns
If you already have some of these dependencies in your project, you don't need to install them again. The library is compatible with the following versions:
{
"@emotion/react": "^11.0.0",
"@emotion/styled": "^11.0.0",
"@mui/material": "^5.0.0",
"@mui/x-date-pickers": "^6.0.0",
"@mui/icons-material": "^5.0.0",
"@mui/system": "^5.0.0",
"date-fns": "^2.30.0"
}
Note: The library requires react
and react-dom
version 18 or higher.
Usage
TimeScheduler
import { TimeScheduler, TimeSchedulerProvider } from '@yuefengzhang/slotbooking';
const scheduleData = [
{
date: '2024-03-18',
operatingHours: {
start: '09:00',
end: '17:00'
},
unavailableRanges: [
{ start: '12:00', end: '13:00' } // Lunch break
],
bookings: [
{ start: '14:00', end: '15:00' } // Existing booking
]
}
];
function App() {
return (
<TimeSchedulerProvider initialScheduleData={scheduleData}>
<TimeScheduler />
</TimeSchedulerProvider>
);
}
CalendarPicker
import { CalendarPicker, darkTheme } from '@yuefengzhang/slotbooking';
function App() {
const [isOpen, setIsOpen] = useState(false);
const [selectedDate, setSelectedDate] = useState<Date | null>(null);
return (
<CalendarPicker
isOpen={isOpen}
onClose={() => setIsOpen(false)}
onSelect={setSelectedDate}
theme={darkTheme}
availableDates={availableDates}
minDate={minDate}
maxDate={maxDate}
/>
);
}
API Reference
TimeSchedulerProvider Props
Prop | Type | Description |
---|---|---|
initialScheduleData | DaySchedule[] | Schedule configuration with available slots and bookings |
children | ReactNode | Child components |
CalendarPicker Props
Prop | Type | Description |
---|---|---|
isOpen | boolean | Controls calendar visibility |
onClose | () => void | Called when calendar is closed |
onSelect | (date: Date) => void | Called when date is selected |
theme | Theme | Theme configuration |
availableDates | Date[] | Array of available dates |
minDate | Date | Minimum selectable date |
maxDate | Date | Maximum selectable date |
Customization
Theme Structure
const theme = {
colors: {
primary: '#00C853',
primaryLight: '#4CD787',
primaryDark: '#27AE60',
secondary: '#757575',
text: '#FFFFFF',
disabled: '#666666',
weekend: '#BBBBBB',
background: '#424242',
headerBackground: '#00C853',
selectedBackground: '#00C853',
hoveredBackground: '#00E676'
},
borderRadius: '4px',
fontSize: {
small: '12px',
medium: '14px',
large: '16px'
},
typography: {
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
calendar: {
fontSize: '14px',
fontWeight: '400'
}
}
};
License
MIT © Yuefeng Zhang