React Native Calendars

https://github.com/wix/react-native-calendars
Admin
React Native Calendars is a declarative cross-platform calendar component for iOS and Android with...
Tokens:18,390
Snippets:191
Trust Score:9.1
License:MIT
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Start local development server with yarn start

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/README.md

Starts a local development server and opens a browser window. Changes are reflected live without restarting the server.

```bash
$ yarn start
```

--------------------------------

### Run the sample module

Source: https://github.com/wix/react-native-calendars/blob/master/README.md

Clone the repository, install dependencies, install iOS pods, and run the app on an iOS simulator. This is the quickest way to try the sample module.

```bash
$ git clone git@github.com:wix/react-native-calendars.git

$ cd react-native-calendars

$ yarn install

$ cd ios && pod install && cd ..

$ react-native run-ios
```

--------------------------------

### Run the sample module

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/intro.md

Clone the repository, install dependencies, install iOS pods, and run the app on iOS. Requires a React Native development environment.

```bash
$ git clone git@github.com:wix/react-native-calendars.git

$ cd react-native-calendars

$ npm install

$ cd ios && pod install && cd ..

$ react-native run-ios
```

--------------------------------

### Install with Yarn

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/intro.md

Install the package using Yarn. No native module linking is required because the library is implemented in JavaScript.

```bash
$ yarn add react-native-calendars
```

--------------------------------

### Install with npm

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/intro.md

Install the package using npm. No native module linking is required because the library is implemented in JavaScript.

```bash
$ npm install --save react-native-calendars
```

--------------------------------

### Install dependencies with yarn

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/README.md

Installs the project dependencies for the Docusaurus website.

```bash
$ yarn
```

--------------------------------

### CalendarList Basic Usage

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/Components/CalendarList.md

Example of using CalendarList with callbacks and scroll range configuration.

```APIDOC
## CalendarList Basic Usage

### Description
Renders a scrollable semi-infinite calendar list with configurable past/future scroll ranges and scroll indicators.

### Method
JSX Component

### Endpoint
N/A - React Native component

### Parameters
#### Props
- **onVisibleMonthsChange** (function) - Optional - Callback which gets executed when visible months change in scroll view. Default = undefined
- **pastScrollRange** (number) - Optional - Max amount of months allowed to scroll to the past. Default = 50
- **futureScrollRange** (number) - Optional - Max amount of months allowed to scroll to the future. Default = 50
- **scrollEnabled** (boolean) - Optional - Enable or disable scrolling of calendar list
- **showScrollIndicator** (boolean) - Optional - Enable or disable vertical scroll indicator. Default = false

### Request Example
```javascript
<CalendarList
  onVisibleMonthsChange={(months) => {console.log('now these months are visible', months);}}
  pastScrollRange={50}
  futureScrollRange={50}
  scrollEnabled={true}
  showScrollIndicator={true}
  ...calendarParams
/>
```

### Response
#### Success Response (200)
- **component** (ReactElement) - The rendered CalendarList component

#### Response Example
```javascript
<CalendarList />
```
```

--------------------------------

### Basic Calendar Parameters Example

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/Components/Calendar.md

Configures the Calendar component with various props. Key options include date limits via minDate/maxDate, day press handlers, arrow customization, and display toggles like hideExtraDays and showWeekNumbers. Note that disabling touch events for disabled days can be overridden per day in markedDates.

```javascript
<Calendar
  // Initially visible month. Default = now
  initialDate={'2012-03-01'}
  // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
  minDate={'2012-05-10'}
  // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
  maxDate={'2012-05-30'}
  // Handler which gets executed on day press. Default = undefined
  onDayPress={day => {
    console.log('selected day', day);
  }}
  // Handler which gets executed on day long press. Default = undefined
  onDayLongPress={day => {
    console.log('selected day', day);
  }}
  // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
  monthFormat={'yyyy MM'}
  // Handler which gets executed when visible month changes in calendar. Default = undefined
  onMonthChange={month => {
    console.log('month changed', month);
  }}
  // Hide month navigation arrows. Default = false
  hideArrows={true}
  // Replace default arrows with custom ones (direction can be 'left' or 'right')
  renderArrow={direction => <Arrow />}
  // Do not show days of other months in month page. Default = false
  hideExtraDays={true}
  // If hideArrows = false and hideExtraDays = false do not switch month when tapping on greyed out
  // day from another month that is visible in calendar page. Default = false
  disableMonthChange={true}
  // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday
  firstDay={1}
  // Hide day names. Default = false
  hideDayNames={true}
  // Show week numbers to the left. Default = false
  showWeekNumbers={true}
  // Handler which gets executed when press arrow icon left. It receive a callback can go back month
  onPressArrowLeft={subtractMonth => subtractMonth()}
  // Handler which gets executed when press arrow icon right. It receive a callback can go next month
  onPressArrowRight={addMonth => addMonth()}
  // Disable left arrow. Default = false
  disableArrowLeft={true}
  // Disable right arrow. Default = false
  disableArrowRight={true}
  // Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates
  disableAllTouchEventsForDisabledDays={true}
  // Replace default month and year title with custom one. the function receive a date as parameter
  renderHeader={date => {
    /*Return JSX*/
  }}
  // Enable the option to swipe between months. Default = false
  enableSwipeMonths={true}
/>
```

--------------------------------

### Localize calendar with LocaleConfig

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/intro.md

Localize the calendar by adding a custom locale to LocaleConfig and setting it as the default locale. This example adds French month and day names.

```javascript
import {LocaleConfig} from 'react-native-calendars';

LocaleConfig.locales['fr'] = {
  monthNames: [
    'Janvier',
    'Février',
    'Mars',
    'Avril',
    'Mai',
    'Juin',
    'Juillet',
    'Août',
    'Septembre',
    'Octobre',
    'Novembre',
    'Décembre'
  ],
  monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
  dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
  dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
  today: "Aujourd'hui"
};
LocaleConfig.defaultLocale = 'fr';
```

--------------------------------

### Horizontal CalendarList

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/Components/CalendarList.md

Example of making the CalendarList scroll horizontally with paging enabled.

```APIDOC
## Horizontal CalendarList

### Description
Enables horizontal scrolling for the CalendarList component with optional paging and custom width.

### Method
JSX Component

### Endpoint
N/A - React Native component

### Parameters
#### Props
- **horizontal** (boolean) - Optional - Enable horizontal scrolling, default = false
- **pagingEnabled** (boolean) - Optional - Enable paging on horizontal, default = false
- **calendarWidth** (number) - Optional - Set custom calendarWidth.

### Request Example
```javascript
<CalendarList
  horizontal={true}
  pagingEnabled={true}
  calendarWidth={320}
  ...calendarListParams
  ...calendarParams
/>
```

### Response
#### Success Response (200)
- **component** (ReactElement) - The rendered CalendarList component with horizontal scrolling

#### Response Example
```javascript
<CalendarList horizontal />
```
```

--------------------------------

### Style individual day headers with dayTextAtIndex

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/Components/Calendar.md

Set individual day header styles using dayTextAtIndex0 and dayTextAtIndex6 in the 'stylesheet.calendar.header' override. This example makes Sunday red and Saturday blue.

```javascript
theme={{
  'stylesheet.calendar.header': {
    dayTextAtIndex0: {
      color: 'red'
    },
    dayTextAtIndex6: {
      color: 'blue'
    }
  }
}}
```

--------------------------------

### Deploy website to GitHub Pages

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/README.md

Deploys the website to GitHub Pages. The first command uses SSH, the second uses a GitHub username for authentication.

```bash
$ USE_SSH=true yarn deploy
```

```bash
$ GIT_USER=<Your GitHub username> yarn deploy
```

--------------------------------

### Build static site with yarn build

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/README.md

Generates static content into the `build` directory, which can be served by any static content hosting service.

```bash
$ yarn build
```

--------------------------------

### Calendar object structure

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/intro.md

Event handler callbacks are called with calendar objects like this example. The timestamp is a UTC timestamp representing 00:00 AM of the date.

```javascript
{
  day: 1,      // day of month (1-31)
  month: 1,    // month of year (1-12)
  year: 2017,  // year
  timestamp,   // UTC timestamp representing 00:00 AM of this date
  dateString: '2016-05-13' // date formatted as 'YYYY-MM-DD' string
}
```

--------------------------------

### Basic Calendar usage

Source: https://github.com/wix/react-native-calendars/blob/master/README.md

Basic usage of the Calendar component with an onDayPress callback that logs the selected day.

```javascript
<Calendar
  onDayPress={day => {
    console.log('selected day', day);
  }}
/>
```

--------------------------------

### Override calendar header styles with stylesheet.calendar.header

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/Components/Calendar.md

Override the calendar header styles by providing a stylesheet with id 'stylesheet.calendar.header' in the theme. This example changes the arrow color to white and adjusts the week row layout.

```javascript
theme={{
  arrowColor: 'white',
  'stylesheet.calendar.header': {
    week: {
      marginTop: 5,
      flexDirection: 'row',
      justifyContent: 'space-between'
    }
  }
}}
```

--------------------------------

### Basic CalendarList Usage

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/Components/CalendarList.md

Shows how to use CalendarList with callbacks for visible months, scroll ranges, and scroll indicators. The component extends Calendar and FlatList props, and all Calendar parameters are available.

```javascript
<CalendarList
  // Callback which gets executed when visible months change in scroll view. Default = undefined
  onVisibleMonthsChange={(months) => {console.log('now these months are visible', months);}}
  // Max amount of months allowed to scroll to the past. Default = 50
  pastScrollRange={50}
  // Max amount of months allowed to scroll to the future. Default = 50
  futureScrollRange={50}
  // Enable or disable scrolling of calendar list
  scrollEnabled={true}
  // Enable or disable vertical scroll indicator. Default = false
  showScrollIndicator={true}
  ...calendarParams
/>
```

--------------------------------

### Basic calendar with selected date

Source: https://github.com/wix/react-native-calendars/blob/master/README.md

A complete App component that creates a basic calendar with default settings. It uses useState to track the selected date and marks it with a selected dot.

```javascript
import React, {useState} from 'react';
import {Calendar, LocaleConfig} from 'react-native-calendars';

const App = () => {
  const [selected, setSelected] = useState('');

  return (
    <Calendar
      onDayPress={day => {
        setSelected(day.dateString);
      }}
      markedDates={{
        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
      }}
    />
  );
};

export default App;
```

--------------------------------

### ExpandableCalendar Component

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/Components/ExpandableCalendar.md

Documentation for the ExpandableCalendar component, including its props for configuring behavior and appearance.

```APIDOC
## ExpandableCalendar Component

### Description
An expandable calendar component that extends CalendarList and should be wrapped with CalendarProvider. It supports various configuration options for its behavior and appearance.

### Component Props

#### initialPosition
- **Type**: 'open' | 'closed'
- **Required**: No
- **Description**: The initial position of the calendar ('open' or 'closed').

#### onCalendarToggled
- **Type**: (isOpen: boolean) => void
- **Required**: No
- **Description**: Handler which gets executed when the calendar is opened or closed.

#### disablePan
- **Type**: boolean
- **Required**: No
- **Description**: Whether to disable the pan gesture and disable the opening and closing of the calendar (initialPosition will persist).

#### hideKnob
- **Type**: boolean
- **Required**: No
- **Description**: Whether to hide the knob.

#### leftArrowImageSource
- **Type**: ImageSourcePropType
- **Required**: No
- **Description**: The source for the left arrow image.

#### rightArrowImageSource
- **Type**: ImageSourcePropType
- **Required**: No
- **Description**: The source for the right arrow image.

#### allowShadow
- **Type**: boolean
- **Required**: No
- **Description**: Whether to have shadow/elevation for the calendar.

#### disableWeekScroll
- **Type**: boolean
- **Required**: No
- **Description**: Whether to disable the week scroll in closed position.

#### openThreshold
- **Type**: number
- **Required**: No
- **Description**: The threshold for opening the calendar with the pan gesture.

#### closeThreshold
- **Type**: number
- **Required**: No
- **Description**: The threshold for closing the calendar with the pan gesture.

#### closeOnDayPress
- **Type**: boolean
- **Required**: No
- **Description**: Whether to close the calendar on day press.
```

--------------------------------

### Customize calendar appearance and marked dates

Source: https://github.com/wix/react-native-calendars/blob/master/README.md

Customize the calendar's appearance with style, set the current date, handle day selection, and mark specific dates with selected and marked styles.

```javascript
<Calendar
  // Customize the appearance of the calendar
  style={{
    borderWidth: 1,
    borderColor: 'gray',
    height: 350
  }}
  // Specify the current date
  current={'2012-03-01'}
  // Callback that gets called when the user selects a day
  onDayPress={day => {
    console.log('selected day', day);
  }}
  // Mark specific dates as marked
  markedDates={{
    '2012-03-01': {selected: true, marked: true, selectedColor: 'blue'},
    '2012-03-02': {marked: true},
    '2012-03-03': {selected: true, marked: true, selectedColor: 'blue'}
  }}
/>
```

--------------------------------

### Agenda Component Props

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/Components/Agenda.md

Documentation for the Agenda component props and their types.

```APIDOC
## Agenda Component

### Description
Agenda component for displaying a calendar with an agenda list of items.

### Props

#### items
- **Type**: `AgendaSchedule`
- **Description**: The list of items that have to be displayed in agenda. If you want to render item as empty date the value of date key has to be an empty array `[]`. If there exists no value for date key it is considered that the date in question is not yet loaded.

#### loadItemsForMonth
- **Type**: `(data: DateData) => void`
- **Description**: Handler which gets executed when items for a certain month should be loaded (month became visible).

#### onDayChange
- **Type**: `(data: DateData) => void`
- **Description**: Handler which gets executed when day changes while scrolling agenda list.

#### onCalendarToggled
- **Type**: `(enabled: boolean) => void`
- **Description**: Handler which gets executed when the calendar is opened or closed.

#### selected
- **Type**: `string`
- **Description**: Initially selected day.

#### renderKnob
- **Type**: `() => JSX.Element`
- **Description**: Replace default agenda's knob with a custom one.

#### hideKnob
- **Type**: `boolean`
- **Description**: Whether to hide the knob.

#### showClosingKnob
- **Type**: `boolean`
- **Description**: Whether the knob should always be visible (when hideKnob = false).

#### showOnlySelectedDayItems
- **Type**: `boolean`
- **Description**: Whether to show items only for the selected date.

#### renderEmptyData
- **Type**: `() => JSX.Element`
- **Description**: Replace default ActivityIndicator with a custom one.
```

--------------------------------

### Add global theme to Calendar

Source: https://github.com/wix/react-native-calendars/blob/master/README.md

Add a global theme to the calendar by passing a theme object with color properties for background, text, selected day, and today.

```javascript
    <Calendar
      style={{
        borderWidth: 1,
        borderColor: 'gray',
        height: 350,
      }}
      theme={{
        backgroundColor: '#ffffff',
        calendarBackground: '#ffffff',
        textSectionTitleColor: '#b6c1cd',
        selectedDayBackgroundColor: '#00adf5',
        selectedDayTextColor: '#ffffff',
        todayTextColor: '#00adf5',
        dayTextColor: '#2d4150',
        textDisabledColor: '#dd99ee'
      }}
    />
```

--------------------------------

### Calendar Props

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/Components/Calendar.md

Configuration properties for the Calendar component, including theming, date constraints, marking, and display options.

```APIDOC
## Calendar Props

### theme
- **Type**: Theme
- **Description**: Specify theme properties to override specific styles for calendar parts.

### style
- **Type**: ViewStyle
- **Description**: Specify style for calendar container element.

### headerStyle
- **Type**: ViewStyle
- **Description**: Specify style for calendar header.

### customHeader
- **Type**: any
- **Description**: Allow rendering a totally custom header.

### initialDate
- **Type**: string
- **Description**: Initially visible month.

### minDate
- **Type**: string
- **Description**: Minimum date that can be selected, dates before minDate will be grayed out.

### maxDate
- **Type**: string
- **Description**: Maximum date that can be selected, dates after maxDate will be grayed out.

### firstDay
- **Type**: number
- **Description**: If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.

### markedDates
- **Type**: MarkedDatesType
- **Description**: Collection of dates that have to be marked.

### displayLoadingIndicator
- **Type**: boolean
- **Description**: Whether to display loading indicator.

### showWeekNumbers
- **Type**: boolean
- **Description**: Whether to show weeks numbers.

### hideExtraDays
- **Type**: boolean
- **Description**: Whether to hide days of other months in the month page.

### showSixWeeks
- **Type**: boolean
- **Description**: Whether to always show six weeks on each month (when hideExtraDays = false).

### disableMonthChange
- **Type**: boolean
- **Description**: Whether to disable changing month when click on days of other months (when hideExtraDays is false).

### enableSwipeMonths
- **Type**: boolean
- **Description**: Whether to enable the option to swipe between months.

### disabledByDefault
- **Type**: boolean
- **Description**: Whether to disable days by default.

### allowSelectionOutOfRange
- **Type**: boolean
- **Description**: Whether to allow selection of dates before minDate or after maxDate.

### monthFormat
- **Type**: string
- **Description**: Month format for the header's title. Formatting values: http://arshaw.com/xdate/#Formatting.

### hideDayNames
- **Type**: boolean
- **Description**: Whether to hide the days names.

### hideArrows
- **Type**: boolean
- **Description**: Whether to hide the arrows.

### arrowsHitSlop
- **Type**: null | Insets | number
- **Description**: Left & Right arrows. Additional distance outside of the buttons in which a press is detected, default: 20.

### disableArrowLeft
- **Type**: boolean
- **Description**: Whether to disable the left arrow.

### disableArrowRight
- **Type**: boolean
- **Description**: Whether to disable the right arrow.

### renderArrow
- **Type**: (direction: Direction) => ReactNode
- **Description**: Replace default arrows with custom ones (direction: 'left' | 'right').

### renderHeader
- **Type**: (date?: string) => ReactNode
- **Description**: Replace default title with custom one.

### customHeaderTitle
- **Type**: JSX.Element
- **Description**: Replace default title with custom element.

### dayComponent
- **Type**: JSX.Element
- **Description**: Replace default day with custom day rendering component.

### disableAllTouchEventsForDisabledDays
- **Type**: boolean
- **Description**: Whether to disable all touch events for disabled days (can be override with 'disableTouchEvent' in 'markedDates').

### disableAllTouchEventsForInactiveDays
- **Type**: boolean
- **Description**: Whether to disable all touch events for inactive days (can be override with 'disableTouchEvent' in 'markedDates').

### disabledDaysIndexes
- **Type**: number[]
- **Description**: Whether to apply custom disable color to selected day names indexes.

```

--------------------------------

### Import Calendar components

Source: https://github.com/wix/react-native-calendars/blob/master/README.md

Import the Calendar, CalendarList, and Agenda components from the react-native-calendars package.

```javascript
import {Calendar, CalendarList, Agenda} from 'react-native-calendars';
```

--------------------------------

### Customize Calendar style and theme

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/Components/Calendar.md

Customize the calendar container and theme properties. The style prop sets border and height; the theme prop overrides specific styles for calendar parts, with defaults of {} for both.

```javascript
<Calendar
  // Specify style for calendar container element. Default = {}
  style={{
    borderWidth: 1,
    borderColor: 'gray',
    height: 350
  }}
  // Specify theme properties to override specific styles for calendar parts. Default = {}
  theme={{
    backgroundColor: '#ffffff',
    calendarBackground: '#ffffff',
    textSectionTitleColor: '#b6c1cd',
    textSectionTitleDisabledColor: '#d9e1e8',
    selectedDayBackgroundColor: '#00adf5',
    selectedDayTextColor: '#ffffff',
    todayTextColor: '#00adf5',
    dayTextColor: '#2d4150',
    textDisabledColor: '#d9e1e8',
    dotColor: '#00adf5',
    selectedDotColor: '#ffffff',
    arrowColor: 'orange',
    disabledArrowColor: '#d9e1e8',
    monthTextColor: 'blue',
    indicatorColor: 'blue',
    textDayFontFamily: 'monospace',
    textMonthFontFamily: 'monospace',
    textDayHeaderFontFamily: 'monospace',
    textDayFontWeight: '300',
    textMonthFontWeight: 'bold',
    textDayHeaderFontWeight: '300',
    textDayFontSize: 16,
    textMonthFontSize: 16,
    textDayHeaderFontSize: 16
  }}
/>
```

--------------------------------

### Calendar Event Handlers

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/Components/Calendar.md

Callback handlers for user interactions with the calendar, such as day presses and month changes.

```APIDOC
## Calendar Event Handlers

### onDayPress
- **Type**: (date: DateData) => void
- **Description**: Handler which gets executed on day press.

### onDayLongPress
- **Type**: (date: DateData) => void
- **Description**: Handler which gets executed on day long press.

### onMonthChange
- **Type**: (date: DateData) => void
- **Description**: Handler which gets executed when month changes in calendar.

### onVisibleMonthsChange
- **Type**: (months: DateData[]) => void
- **Description**: Handler which gets executed when visible month changes in calendar.

### onPressArrowLeft
- **Type**: (method: () => void, month?: string) => void
- **Description**: Handler which gets executed when press left arrow. It receive a callback to go to the previous month.

### onPressArrowRight
- **Type**: (method: () => void, month?: string) => void
- **Description**: Handler which gets executed when press right arrow. It receive a callback to go to the next month.

```

--------------------------------

### Period marking with markingType period

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/Components/Calendar.md

Use this snippet to mark a period of dates with `markingType={'period'}`. Use `startingDay` and `endingDay` to define the range, and `color` to fill the period. `textColor` and `disabled` are also supported.

```javascript
<Calendar
  markingType={'period'}
  markedDates={{
    '2012-05-20': {textColor: 'green'},
    '2012-05-22': {startingDay: true, color: 'green'},
    '2012-05-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
    '2012-05-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
  }}
/>
```

--------------------------------

### Multi-period marking with markingType multi-period

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/Components/Calendar.md

Use this snippet to display multiple periods per date with `markingType="multi-period"`. This marking is only fully supported by `<Calendar/>` because it expands its height; using it with `<CalendarList/>` might lead to overflow issues.

```javascript
<Calendar
  markingType="multi-period"
  markedDates={{
    '2017-12-14': {
      periods: [
        {startingDay: false, endingDay: true, color: '#5f9ea0'},
        {startingDay: false, endingDay: true, color: '#ffa500'},
        {startingDay: true, endingDay: false, color: '#f0e68c'}
      ]
    },
    '2017-12-15': {
      periods: [
        {startingDay: true, endingDay: false, color: '#ffa500'},
        {color: 'transparent'},
        {startingDay: false, endingDay: false, color: '#f0e68c'}
      ]
    }
  }}
/>
```

--------------------------------

### Dot marking with markedDates

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/Components/Calendar.md

Use this snippet to mark individual dates with a single dot. The `markedDates` prop must be immutable; changing its content without changing the reference will not trigger a calendar update. Customize the dot color per day with `dotColor` and control touch behavior with `activeOpacity` and `disableTouchEvent`.

```javascript
<Calendar
  // Collection of dates that have to be marked. Default = {}
  markedDates={{
    '2012-05-16': {selected: true, marked: true, selectedColor: 'blue'},
    '2012-05-17': {marked: true},
    '2012-05-18': {marked: true, dotColor: 'red', activeOpacity: 0},
    '2012-05-19': {disabled: true, disableTouchEvent: true}
  }}
/>
```

--------------------------------

### Combine period and dot marking

Source: https://github.com/wix/react-native-calendars/blob/master/docsRNC/docs/Components/Calendar.md

Use this snippet to combine `period` and `dot` marking types. This is a new feature that allows you to show both a period and a dot on the same date. Note that different marking types are not compatible; you can use just one marking style for a calendar.

```javascript
<Calendar
  markingType={'period'}
  markedDates={{
    '2012-05-15': {marked: true, dotColor: '#50cebb'},
    '2012-05-16': {marked: true, dotColor: '#50cebb'},
    '2012-05-21': {startingDay: true, color: '#50cebb', textColor: 'white'},
    '2012-05-22': {color: '#70d7c7', textColor: 'white'},
    '2012-05-23': {color: '#70d7c7', textColor: 'white', marked: true, dotColor: 'white'},
    '2012-05-24': {color: '#70d7c7', textColor: 'white'},
    '2012-05-25': {endingDay: true, color: '#50cebb', textColor: 'white'}
  }}
/>
```
Tokens:
Raw