react native calendar with a week and month view

- Pure JS. No Native code required
- Customization of theme
- Detailed documentation and examples
- Support multiple languages
- Swipe to switch month and week
- Support Agenda List
Here's how to get started with react-native-switch-month-week in your React Native project:
Using npm:
```
$ npm install --save react-native-switch-month-week
Using Yarn:
``
$ yarn add react-native-switch-month-week
React Native Switch Month Week is implemented in JavaScript, so no native module linking is required.
`tsx
import { MonthWeekCalendar, MonthWeekCalendarProvider } from 'react-native-switch-month-week';
const [theme, setTheme] = useState
todayTextColor: '#3CA0AE',
selectedTodayButtonBackgroundColor: '#3CA0AE',
dotBackgroundColor: '#3CA0AE',
agendaItemTextColor: '#3CA0AE',
})
const [date, setDate] = useState('2023-04-13')
const [currentMonth, setCurrentMonth] = useState
const [markedDates, setMarkedDates] = useState({
'2023-05-13': { marked: true, markedColor: '#000', data: { title: 'Code optimization', description: '5:00- 5:00 pm 11F high-speed conference room' } }
})
return (
onMonthChange={(date, type) => {
setCurrentMonth(date)
}}>
theme={theme}
markedDates={markedDates}
/>
)
`
| Prop | Description | Default |
|---------------|-------------------------------------------------------------------------|---------------|
| defaultDate | Initial date in 'yyyy-MM-dd' format. | Default = now |
| onDateChanged | Callback for date change event | |
| onMonthChange | Callback for month change event | |
| Prop | Description | Default |
|-------------------|-------------------------------------------------------------------------|-------------------|
| locale | i18n | en |
| calendarWidth | Width of calendar | windowWidth |
| markedDates | Calendar mark | drill down |
| theme | Specify theme properties to override specific styles for calendar parts | drill down |
| customReservation | User-defined reserved areas | () => JSX.Element |
| onAgendaItemPress | Agenda click event | () => void |
`ts`
type Locale = 'cn' | 'hk' | 'en' | 'tw';
`ts
// key = 'yyyy-MM-dd'
export interface MarkedDates {
[key: string]: {
marked: boolean;
markedColor: string;
data?: MarkedData
}
}
export interface MarkedData {
title: string;
description: string;
}
`
`ts``
export interface ITheme {
containerBackgroundColor: string;
calendarBackgroundColor: string;
reservationBackgroundColor: string;
todayTextColor: string;
selectedTodayButtonBackgroundColor: string;
selectedButtonBackgroundColor: string;
dotBackgroundColor: string;
disabledButtonTextColor: string;
dotSize: number;
knobShadowColor: string;
buttonTextColor: string;
dayNameTextColor: string;
agendaItemBackgroundColor: string;
agendaItemTextColor: string;
}
React Native Calendars is MIT licensed