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:

$3

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 🚀

$3

`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)}

defaultDate='2021-04-13'
onMonthChange={(date, type) => {
setCurrentMonth(date)
}}>
locale={'tw'}
theme={theme}
markedDates={markedDates}
/>


)
`

API

$3

| 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 | |

$3

| 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 |

$3

`ts
type Locale = 'cn' | 'hk' | 'en' | 'tw';
`

$3

`ts
// key = 'yyyy-MM-dd'
export interface MarkedDates {
[key: string]: {
marked: boolean;
markedColor: string;
data?: MarkedData
}
}

export interface MarkedData {
title: string;
description: string;
}
`

$3

`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