Expo Calendar (legacy)

A library that provides an API for interacting with the device's system calendars, events, reminders, and associated records.

Android

iOS

Included in Expo Go

Recommended version:

~56.0.10

The legacy version of Calendar API is included in the expo-calendar library. It can be used alongside the class-based expo-calendar API, which is exposed from root. To use the legacy API, import it from expo-calendar/legacy.

expo-calendar provides an API for interacting with the device's system calendars, events, reminders, and associated records.

Additionally, it provides methods to launch the system-provided calendar UI to allow user view or edit events. On Android, these methods start the system calendar app using an Intent. On iOS, they present either EKEventViewController or EKEventEditViewController as a modal.

Installation

Terminal

- npx expo install expo-calendar

- yarn expo install expo-calendar

- pnpm expo install expo-calendar

- bun expo install expo-calendar

If you are installing this in an existing React Native app, make sure to install expo in your project.

Configuration in app config

You can configure expo-calendar using its built-in config plugin if you use config plugins in your project (Continuous Native Generation (CNG)). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect. If your app does not use CNG, then you'll need to manually configure the library.

Example app.json with config plugin

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-calendar",
        {
          "calendarPermission": "The app needs to access your calendar."
        }
      ]
    ]
  }
}

Configurable properties

Name	Default	Description
`calendarPermission`	`"Allow $(PRODUCT_NAME) to access your calendar"`	Only for: iOS A string to set the `NSCalendarsUsageDescription` permission message.
`remindersPermission`	`"Allow $(PRODUCT_NAME) to access your reminders"`	Only for: iOS A string to set the `NSRemindersUsageDescription` permission message.

Are you using this library in an existing React Native app?

If you're not using Continuous Native Generation (CNG) (you're using native android and ios projects manually), then you need to configure following permissions in your native projects:

For Android, add android.permission.READ_CALENDAR and android.permission.WRITE_CALENDAR permissions to your project's android/app/src/main/AndroidManifest.xml:
```
<uses-permission android:name="android.permission.READ_CALENDAR" />
<uses-permission android:name="android.permission.WRITE_CALENDAR" />
```

For iOS, add NSCalendarsUsageDescription and NSRemindersUsageDescription to your project's ios/[app]/Info.plist:

<key>NSCalendarsUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to access your calendar</string>
<key>NSRemindersUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to access your reminders</string>

Usage

Basic Calendar usage

import { useEffect } from 'react';
import { StyleSheet, View, Text, Button, Platform } from 'react-native';
import * as Calendar from 'expo-calendar/legacy';

export default function App() {
  useEffect(() => {
    (async () => {
      const { status } = await Calendar.requestCalendarPermissionsAsync();
      if (status === 'granted') {
        const calendars = await Calendar.getCalendarsAsync(Calendar.EntityTypes.EVENT);
        console.log('Here are all your calendars:');
        console.log({ calendars });
      }
    })();
  }, []);

  return (
    <View style={styles.container}>
      <Text>Calendar Module Example</Text>
      <Button title="Create a new calendar" onPress={createCalendar} />
    </View>
  );
}

async function getDefaultCalendarSource() {
  const defaultCalendar = await Calendar.getDefaultCalendarAsync();
  return defaultCalendar.source;
}

async function createCalendar() {
  const defaultCalendarSource =
    Platform.OS === 'ios'
      ? await getDefaultCalendarSource()
      : { isLocalAccount: true, name: 'Expo Calendar' };
  const newCalendarID = await Calendar.createCalendarAsync({
    title: 'Expo Calendar',
    color: 'blue',
    entityType: Calendar.EntityTypes.EVENT,
    sourceId: defaultCalendarSource.id,
    source: defaultCalendarSource,
    name: 'internalCalendarName',
    ownerAccount: 'personal',
    accessLevel: Calendar.CalendarAccessLevel.OWNER,
  });
  console.log(`Your new calendar ID is: ${newCalendarID}`);
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
});

API

import * as Calendar from 'expo-calendar/legacy';

No API data file found, sorry!

Permissions

Android

If you only intend to use the system-provided calendar UI, you don't need to request any permissions.

Otherwise, you must add the following permissions to your app.json inside the expo.android.permissions array.

Android permission	Description
`READ_CALENDAR`	Allows an application to read the user's calendar data.
`WRITE_CALENDAR`	Allows an application to write the user's calendar data.

iOS

If you only intend to create events using system-provided calendar UI with createEventInCalendarAsync, you don't need to request permissions.

The following usage description keys are used by this library:

Info.plist key	Description
`NSCalendarsUsageDescription`	A message that tells the user why the app is requesting access to the user’s calendar data.
`NSRemindersUsageDescription`	A message that tells the user why the app is requesting access to the user’s reminders.