Add Event in Device’s Calendar from React Native App for Android and iOS

Here is an Example to Add Event in Device’s Calendar from React Native App for Android and iOS. In this example, you will see how easily you can add any event in your device’s calendar from React Native App. While planning this example I was thinking it is going to be very tricky to open the calendar of the device and how to the callback for the success of addition or cancellation but after finding react-native-add-calendar-event library everything became very easy. This library starts an activity (in Android) or shows a modal window (for iOS) to add, view or edit events in the device’s calendar. It provides a promise in return, with the help of that you can find out if a new event was added and can get its id.

To add an event in the calendar

In this example, we will show the title and the time of the event on the top of the screen which we are going to add in the calendar. Timing of the event will be current time so that you can see the event notification in your device calendar.

We will have an “add an event to calendar” button which will call a handler to add the event in the calendar. After clicking on it you will see the prefilled calendar screen with the parameter provided in ur app. After adding the event when you come back you will see the details related to the event with the event id as well. you will also see an input to put this calendar id to edit or view the event. So let’s start with the example and see how to add event in the device’s calendar.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run

npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the --version argument:

react-native init ProjectName --version X.XX.X
react-native init ProjectName --version react-native@next

This will make a project structure with an index file named App.js in your project directory.

Installation of Dependencies

To install the dependencies open the terminal and jump into your project using

1. To add an event in the device’s calendar we will use AddCalendarEvent component and for that install react-native-add-calendar-event dependency

2. In this example, we are dealing with the date-time and to handle those date time we will use moment.js in our project, to import moment in our project let’s import moment using

This command will copy all the dependencies into your node_module directory.

CocoaPods Installation

After the updation of React Native 0.60, they have introduced autolinking so we do not require to link the library but need to install pods and to install cocoa pods use

Time format for the event

If you are working with any date-time in JavaScript you need a proper time format and according to the standard, we should use UTC format which us a standard format and used in many places. In this example also we have used UTC time formate for our start and end date.

As I have told you earlier that we are going to use moment.js for that so here is how you can get the current date-time in UTC format using moment.js0

To know more about moment.js you can visit:

  1. React Native Get Current Time in 12 hours Format AM PM
  2. React Native CountDown Timer using react-native-countdown-component
  3. React Native Get Current Date Time

Code to Add Event in Device’s Calendar

Open App.js in any code editor and replace the code with the following code

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

Android

                  
 

iOS

         

This is how you can add an event in the device’s calendar from React Native app for Android and iOS. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned! Hope you liked it. 🙂

 

2 thoughts on “Add Event in Device’s Calendar from React Native App for Android and iOS”

  1. Hi, Im new with react native I wonder if you can help me. Im trying to connect my app into device primary calendar and save event but the thing is i need to bypass the save button of the calendar app. I need to save it immediately and don’t show/ open the device calendar app. I really appreciate if you can help me. Thank you

    • Hi, Shiela, Device calendar do not provide the direct APIs to save the event due to the security reasons. Here we have used a bridge to connect to the calendar and passing some value to fill the fields. I tried to find the option for direct scheduling but unable to find any.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.