# React Native Switch Month Week
## A declarative cross-platform React Native calendar component for iOS and Android.
## Features ✨
- 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
## Getting Started 🔧
Here's how to get started with react-native-switch-month-week in your React Native project:
### Install the package:
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.**
## Example 🚀
### Please yarn android before pushing changes.
```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(moment().startOf('month').format('YYYY-MM-DD'))
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 (
{currentMonth.slice(0, -3)}
{
setCurrentMonth(date)
}}>
)
```
## API
### MonthWeekCalendarProvider
| 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 | |
### MonthWeekCalendar
| 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 |
### Locale
```ts
type Locale = 'cn' | 'hk' | 'en' | 'tw';
```
### markedDates
```ts
// key = 'yyyy-MM-dd'
export interface MarkedDates {
[key: string]: {
marked: boolean;
markedColor: string;
data?: MarkedData
}
}
export interface MarkedData {
title: string;
description: string;
}
```
### Theme
```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;
}
```
## License
React Native Calendars is MIT licensed