@umituz/react-native-calendar
Version:
Generic calendar component for React Native apps with timezone support, event management, and system calendar sync
93 lines (68 loc) • 2.26 kB
Markdown
# @umituz/react-native-calendar
Generic calendar component for React Native apps with timezone support, event management, and system calendar sync.
## Installation
```bash
npm install @umituz/react-native-calendar
```
## Peer Dependencies
- `react` >= 18.2.0
- `react-native` >= 0.74.0
- `@umituz/react-native-design-system` >= 1.5.0
- `expo-calendar` ~13.0.3
- `@react-native-async-storage/async-storage` >= 1.21.0
- `zustand` >= 5.0.2
## Features
- ✅ Timezone-aware calendar generation
- ✅ Generic event system (workouts, habits, tasks, etc.)
- ✅ Month/Week/Day views
- ✅ Event CRUD operations with persistence
- ✅ Completion tracking
- ✅ Recurring events support
- ✅ System calendar sync (expo-calendar) - iOS/Android only
## Usage
### Basic Usage
```typescript
import { useCalendar, AtomicCalendar, useSystemCalendar } from '@umituz/react-native-calendar';
const MyScreen = () => {
const { days, selectedDate, actions } = useCalendar();
const {
systemCalendars,
permission,
requestPermission,
syncEventToCalendar,
} = useSystemCalendar();
// Request permission to access device calendar
useEffect(() => {
requestPermission();
}, []);
// Sync event to device calendar
const handleCreateEvent = async (eventData) => {
const event = await actions.addEvent(eventData);
await syncEventToCalendar(event); // Sync to iOS/Android calendar
};
return (
<AtomicCalendar
days={days}
selectedDate={selectedDate}
onDateSelect={actions.setSelectedDate}
/>
);
};
```
## API
### Components
- `AtomicCalendar`: Main calendar component with month view
### Hooks
- `useCalendar()`: Main hook for calendar functionality
- `useCalendarNavigation()`: Hook for calendar navigation
- `useCalendarEvents()`: Hook for event management
- `useSystemCalendar()`: Hook for system calendar integration
### Services
- `CalendarService`: Static calendar service for date calculations and operations
- `CalendarPermissions`: Permission management service
- `CalendarEvents`: Event CRUD operations service
- `CalendarGeneration`: Calendar grid generation service
- `CalendarSync`: System calendar synchronization service
- `DateUtilities`: Date helper utilities
## License
MIT