Using React-Native Calendar Events

Using React-Native Calendar Events

The React-Native Calendar Events module is great for giving your React Native apps access to the OS calendar and its events. It’s also great for creating your own intricate events easily. If there was ever an amazing React-Native module that lacked opening documentation, it would definitely be this one. For new users it is a trial-and-error process, but for such a great module Let’s not only see how to use react-native-calendar-events, but also see what it can do!

What React-Native Calendar Events Does

React-Native Calendar Events gives you direct access to the OS Calendar with iOS and Android. Doing so allows your app to access and edit any calendar, but also create new fully-featured events. Simply creating events is an understatement of its power. You can also create a series of events with alarms and set to any calendar.

Issues

The output from this module is very minimal. So you are not going to see many visual responses, especially regarding it success or failure of methods. You would be right to assume the API is linked to the OS calendar itself, opening the calendar after event creation. Unfortunately it does not work that way, but can be made to.

Prepare for iOS 10+

When running a pre-iOS 10 app as-is, you will find that it will stick on the loading screen. iOS 10 added one more additional security measure before allowing access to the calendar. You will need to add a new key to your project’s Info or Info.plist file.

Info.plist

<key>NSCalendarsUsageDescription</key>
<string>schedules</string>

Checking and Granting Access to the Calendar

We want to make sure that the user authenticates access to the calendar(s). Set a state for the access status, then check to see if we have access on startup. If we do not have access, ask for it. Add this to your root application component, passing the status down to components that access the calendar. Without access you will find unresponsive calendar components, and causing some very odd side-effects.

app.js

import RNCalendarEvents from 'react-native-calendar-events'

export class default App extends Componemnt {
  constructor() {
    super();
    this.state = {
      cal_auth: ''
    }
  }

  componentWillMount () {
    // iOS
    RNCalendarEvents.authorizationStatus()
     .then(status => {
       // if the status was previous accepted, set the authorized status to state
       this.setState({ cal_auth: status })
       if(status === 'undetermined') {
         // if we made it this far, we need to ask the user for access 
         RNCalendarEvents.authorizeEventStore()
         .then((out) => {
           if(out == 'authorized') {
             // set the new status to the auth state
             this.setState({ cal_auth: out })
           }
         })
        }
      })
    .catch(error => console.warn('Auth Error: ', error));
  
    // Android
    RNCalendarEvents.authorizeEventStore()
    .then((out) => {
      if(out == 'authorized') {
        // set the new status to the auth state
        this.setState({ cal_auth: out })
      }
    })
    .catch(error => console.warn('Auth Error: ', error));
  }

  ...

Creating an Showing an Event

So let’s start with a basic example of adding an event to the calendar. This will add an event with a location, description, start/end date, alarm all on a specific calendar.

event.js

RNCalendarEvents.saveEvent(`Example Event`, {
  location:'Our Awesome Place City, State',
  notes: `${this.props.title}`,
  description: `${this.props.title}`,
  startDate: firstTime.toISOString(),
  endDate: lastTime.toISOString(),
  calendar: ['Calendar'],
  alarm: [{
    date:-1
  }],
})
.then(id => {
  // we can get the event ID here if we need it
  Linking.URL(`cal:${firstTime.getTime()}`);
}).catch(error => console.log('Save Event Error: ', error));

The Options

The Location can be used in tandem with maps. If you use an exact location (business/address, city, state, country), you will receive a linkable location. With these, users can tap on the location opening directly in their maps.

We have two very ambiguous options, notes, and description. Notes is used for the text in an iOS calendar event. Description is specific to the description found in Android calendar events. Use a Platform.select to separate these two, but it is not mandatory for the events to work. So both iOS and Android understand the time, convert to an ISOString. If you want you can also set these times manually with a string.

The function to check the available calendars is not shown, but you can specify the calendars to add events in. In this case, it is the default ‘Calendar‘. We also see a Linking setup that opens the calendar after a successful response of the save event. The save event will return the new event’s EventID, as the id key. Using the findEventByID method, you can access your new event immediately after creation.

Summary

This barely scratches the surface of what you can do with the calendar events. Even so, the rest of the API fairly easy to comprehend after using these basics examples. Best of all, the ability needed to create your own calendar application, viewing, creating, and editing events is all there. So, hit up the rest of the documentation to take advantage of the rest!

If you feel this documentation lacks something more, let me know in the comment below!

 calendar react-native