This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 54).

The next version of the Calendar API is included in the expo-calendar library. It can be used alongside the previous API, and offers a simplified, object oriented way of performing calendar operations.

To provide quicker updates, expo-calendar/next is currently unsupported in Expo Go and Snack. To use it, create a development build.

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 the user to view or edit events. On iOS, they present either EKEventViewController or EKEventEditViewController as a modal.

Installation

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

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

Configurable properties

Usage

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

const BasicUsage = () => {
  useEffect(() => {
    (async () => {
      const { status } = await Calendar.requestCalendarPermissions();
      if (status === 'granted') {
        const calendars = Calendar.getCalendars(Calendar.EntityTypes.EVENT);
        console.log('Here are all your calendars:');
        console.log(JSON.stringify(calendars));
      }
    })();
  }, []);

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

async function createCalendar() {
  const newCalendar = await Calendar.createCalendar({
    title: 'Expo Calendar',
    color: 'blue',
    entityType: Calendar.EntityTypes.EVENT,
  });
  console.log(`Your new calendar: ${JSON.stringify(newCalendar)}`);
}

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

API

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

Unless specified otherwise, all dates are returned in the ISO 8601 format.

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.

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: