react-native-ep-calendar

1. Installation

react-native-ep-calendar requires react-native >= 0.63.4. It also uses react-native-svg to display icons. To install simply run

npm install react-native-ep-calendar

in your project. For iOS you need to install the pods:

cd ios && pod install && cd ..

2. Usage

The Calendar component takes some parameters, but they are all optional.

| Property | Description | Default | | ----------------------|-------------------------------------------------------------------------------------------| --------------------------| | darkTheme | A style object defining the dark theme. See 4. Themes. | null (predefined style). | | lightTheme | A style object defining the light theme. See 4. Themes. | null (predefined style). | | localization | Currently unused | null | | markedDates | Array of Objects containing a date property and a markerType as string | today with default marker | | markerTypes | Array of Objects containing a string property markerType as identifier and a style object | empty array | | maxDate | Max date the user can see. | null | | minDate | Min date the user can see | null | | onDayLongPress | Callback for a long press on a day | null | | onDayPress | Callback for a normal press on a day | null | | onMonthChangeListener | Callback when changing the displayed month & year | null | | startDate | Starting date of the calendar component | today | | useDarkMode | Darkmode for calendar allowed? | true |

2.1 markedDates

Needs an array of objects containing a date and a markerType, for example:

let markedDates = [
  {
    date: new Date(Date.now()),
    markerType: 'myMarker'
  },
];

2.2 markerTypes

Needs an array of objects containg a markerType and some style objects:

let markerTypes = [
  {
    markerType: 'myMarker',
    markerTextStyle: {color: 'red'}.
    markerTouchableStyle = {backgroundColor: 'transparent'},
    markerColumnStyle = null
  },
];

2.3 onMonthChangeListener

This callback gets fired, when the users changes the displayed month. The callback receives four parameters:

1. previousMonth
2. previousYear
3. month
4. year

In our example that callback is used to load the data for the new month.

3. Example

An example with some properties set:

                <Calendar
                  markerTypes={[missMarker]}
                  markedDates={[...checkedMarker, ...missedMarkers]}
                  darkTheme={{
                    markerColor: habit.Color,
                    markerTextColor: getTextColorForBgHex(habit.Color),
                  }}
                  lightTheme={{
                    markerColor: habit.Color,
                    markerTextColor: getTextColorForBgHex(habit.Color),
                  }}
                  onMonthChangeListener={(
                    previousMonth,
                    previousYear,
                    month,
                    year,
                  ) => {
                    getTimelineData(
                      habit,
                      month,
                      year,
                      setCheckedMarker,
                      setMissedMarker,
                    );
                  }}
                />          

4. Themes

5. License

This component is licensed under MIT