Adding Calendar Feature in React Native Expo SDK

Do you know how to add the Calendar Feature in React Native Expo Calendar  SDK ? it took me a few days to find out. but Finally, I did it.

In this blog post, I will explain How I added the calendar feature to my react native application.

React Native Expo SDK has just released a new update with the addition of a calendar feature. The calendar is a native UI that comes with its own set of unique properties and functionalities. React Native Expo SDK’s goal is to make an app feel truly native by providing a whole suite of components that are beautiful, customizable, and easy to use.

So first we have to install the expo calendar package.

npx expo install expo-calendar

Step 2 is to write our code into your component.

import React, { useEffect } from 'react';
import { View, StyleSheet, Image, Text, TouchableWithoutFeedback } from 'react-native';
import * as Calendar from 'expo-calendar';


function App() {
  useEffect(() => {
    (async () => {
      const { status } = await Calendar.requestCalendarPermissionsAsync();
      if (status === 'granted') {
       // const calendars = await Calendar.getCalendarsAsync(Calendar.EntityTypes.EVENT);
        console.log('calender access granted');
      //  console.log({ calendars });
      }
    })();
  }, []);

    return (   

        <TouchableWithoutFeedback onPress={() => createCalendar()}>         
          <Text>  Add To Calendar </Text>   
          </TouchableWithoutFeedback>          

 );
}



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


  async function createCalendar(playdate,teamname,location) {
   console.log(playdate);

    const defaultCalendarSource =
      Platform.OS === 'ios'
        ? await getDefaultCalendarSource()
        : { isLocalAccount: true, name: 'CalendarName' };    
            const newCalendarID = await Calendar.createCalendarAsync({
            title: 'CalendarName',
            color: 'red',      
            timeZone: "GMT+1",
            status:Calendar.EventStatus.CONFIRMED,
            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}`);
    alert(`Event saved in your Calendar.`);
  
  }

Now the calendar Created, Now we have to push events to the calendar .

To push events to the calendar we have to write another function.

Use the generated calendar ID  for this getcalid variable

const newevent = await Calendar.createEventAsync(getcalid,{  
        title: 'Event Name',      
        startDate: new Date('2022-09-17T15:00:00.000Z'),
        endDate: new Date ('2022-09-17T15:00:00.000Z'),
        timeZone: "GMT+1",
        location: 'India',
        alarms: [ {relativeOffset: -15}],
        status:Calendar.EventStatus.CONFIRMED,      
        accessLevel: Calendar.CalendarAccessLevel.OWNER,
      });

Here is the complete code

import React, { useEffect } from 'react';
import { View, StyleSheet, Image, Text, TouchableWithoutFeedback } from 'react-native';
import * as Calendar from 'expo-calendar';


function App() {
  useEffect(() => {
    (async () => {
      const { status } = await Calendar.requestCalendarPermissionsAsync();
      if (status === 'granted') {
       // const calendars = await Calendar.getCalendarsAsync(Calendar.EntityTypes.EVENT);
        console.log('calender access granted');
      //  console.log({ calendars });
      }
    })();
  }, []);

    return (   

        <TouchableWithoutFeedback onPress={() => createCalendar()}>         
          <Text>  Add To Calendar </Text>   
          </TouchableWithoutFeedback>          

 );
}



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


  async function createCalendar(playdate,teamname,location) {
   console.log(playdate);

    const defaultCalendarSource =
      Platform.OS === 'ios'
        ? await getDefaultCalendarSource()
        : { isLocalAccount: true, name: 'CalendarName' };    
            const newCalendarID = await Calendar.createCalendarAsync({
            title: 'CalendarName',
            color: 'red',      
            timeZone: "GMT+1",
            status:Calendar.EventStatus.CONFIRMED,
            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}`);
    alert(`Event saved in your Calendar.`);
 
// creating event with calendar ID

    let getcalid = newCalendarID;
     
   const newevent = await Calendar.createEventAsync(getcalid,{  
        title: 'Event Name',      
        startDate: new Date('2022-09-17T15:00:00.000Z'),
        endDate: new Date ('2022-09-17T15:00:00.000Z'),
        timeZone: "GMT+1",
        location: 'India',
        alarms: [ {relativeOffset: -15}],
        status:Calendar.EventStatus.CONFIRMED,      
        accessLevel: Calendar.CalendarAccessLevel.OWNER,
      });
  
  }

Adding permission to access calander

Go to your App.json File.

Android

Add “READ_CALENDAR”,”WRITE_CALENDAR” Permissions

"android": {
      "adaptiveIcon": {
        "foregroundImage": "./app/assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "com.appsite.appname",
      "versionCode":56,
      "googleServicesFile": "./google-services.json",
      "permissions": ["READ_CALENDAR","WRITE_CALENDAR"]
    },

IOS 

inside infoPlist we have to add the permission “NSRemindersUsageDescription”

"ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.appsite.newapp",
      "buildNumber": "1.1.0",
      "infoPlist": {
        "NSRemindersUsageDescription": "This app uses the calender to save events."
      }
    },

Like this.

I tried Expo Publish (over the air) update. and it worked on ios but in android, i have to build a release and released an update.

Hope this helps