Example of React Native Add Calendar Event NPM YARN

Hello friends, In today’s tutorial we would learn React Native Add Calendar Event NPM Yarn package. The main purpose of this package is to automatically add Events in our inbuilt Calendar application using react native app. We can set Event name, Event start time and Event end time using this tutorial. This package is really amazing it helps us to add events and set event alarms directly from our app. So in this tutorial we would learn about Example of React Native Add Calendar Event NPM YARN package.

Contents in this project Example of React Native Add Calendar Event NPM YARN :-

1. First of all we have to install this package in our RN application. So open your project’s main directory in CMD in windows and Terminal in MAC and execute below command.

npm install react-native-add-calendar-event --save

1	npm install react-native-add-calendar-event --save

yarn add react-native-add-calendar-event

1	yarn add react-native-add-calendar-event

Example of React Native Add Calendar Event NPM YARN

2. We have to also install React Native Moment package in our project, In order to maintain Date format.

npm install --save moment react-moment

1	npm install --save moment react-moment

yarn add react-moment

1	yarn add react-moment

2. Now this step is for iOS users only. First of all we have to add NSCalendarsUsageDescription and NSContactsUsageDescription keys to your Info.plist file.

3. At the end, We have to execute pod install command in iOS directory of our react native project.

4. Now It’s time to start coding for the application. Open your project’s main App.js file and import useState, Alert, StyleSheet, SafeAreaView, Text, TextInput, TouchableOpacity, moment and AddCalendarEvent package in our project.

import React, { useState } from 'react';

import { Alert, StyleSheet, SafeAreaView, Text, TextInput, TouchableOpacity } from 'react-native';

import moment from 'moment';

import * as AddCalendarEvent from 'react-native-add-calendar-event';

import React, { useState } from 'react';

import { Alert, StyleSheet, SafeAreaView, Text, TextInput, TouchableOpacity } from 'react-native';

import moment from 'moment';

import * as AddCalendarEvent from 'react-native-add-calendar-event';

5. Creating our main App component.

export default function App() {



}

export default function App() {

}

6. Now we would make 1 state named as eventName with State update method setEventName(). This state is used to store Event name we will type inside the TextInput component.

  const [eventName, setEventName] = useState('');

1	const [eventName, setEventName] = useState('');

7. Creating 1 Constant named as CURRENT_TIME. In this constant we would store the Current time of our device with current time zone using Moment package. I’m using current time as Event starting time.

  const CURRENT_TIME = moment.utc();

1	const CURRENT_TIME = moment.utc();

8. Creating a function named as currentTimeToString(). We would use this function to convert current selected time to text string.

  const currentTimeToString = (momentInUTC) => {
    var temp = moment.utc(momentInUTC).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]');
    return temp;
  };

const currentTimeToString = (momentInUTC) => {

var temp = moment.utc(momentInUTC).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]');

return temp;

};

9. Creating a function named as addEventToCalendar(). This is our main function. It is used to add Event in our Calendar. Now one more main thing. Our event start time is Current time and event end time is after 1 hour. You can give your own time here as per your choice.

  const addEventToCalendar = (title, currentTime) => {
    const eventConfig = {
      title,
      startDate: currentTimeToString(currentTime),
      endDate: currentTimeToString(moment.utc(currentTime).add(1, 'hours')),
      notes: 'Party Time...',
      navigationBarIOS: {
        tintColor: 'black',
        backgroundColor: 'blue',
        titleColor: 'pink',
      },
    };

    AddCalendarEvent.presentEventCreatingDialog(eventConfig)
      .then((eventInfo) => {
        Alert.alert('eventInfo -> ' + JSON.stringify(eventInfo));
      })
      .catch((error) => {
        // handle error such as when user rejected permissions
        Alert.alert('Error -> ' + error);
      });
  };

const addEventToCalendar = (title, currentTime) => {

const eventConfig = {

title,

startDate: currentTimeToString(currentTime),

endDate: currentTimeToString(moment.utc(currentTime).add(1, 'hours')),

notes: 'Party Time...',

navigationBarIOS: {

tintColor: 'black',

backgroundColor: 'blue',

titleColor: 'pink',

};

AddCalendarEvent.presentEventCreatingDialog(eventConfig)

.then((eventInfo) => {

Alert.alert('eventInfo -> ' + JSON.stringify(eventInfo));

})

.catch((error) => {

// handle error such as when user rejected permissions

Alert.alert('Error -> ' + error);

});

};

10. Creating return() block, Now here we would make 1 Text component to show the current time, 1 Text Input to get event title from user and 1 button to add event.

  return (
    <SafeAreaView style={styleSheet.MainContainer}>

      <Text style={styleSheet.title_1}>
        React Native Add Calendar Event Example
      </Text>

      <Text style={styleSheet.title_2}>
        Event Date Time: {moment.utc(CURRENT_TIME).local().format('lll')}
      </Text>

      <TextInput
        value={eventName}
        onChangeText={
          (value) => setEventName(value)
        }
        placeholder={'Enter Event Name'}
        style={styleSheet.textInput}
      />

      <TouchableOpacity
        style={styleSheet.button}
        onPress={() => { addEventToCalendar(eventName, CURRENT_TIME) }}>
        <Text style={styleSheet.buttonText}>
          Add Event to Calendar
        </Text>
      </TouchableOpacity>

    </SafeAreaView>
  );

return (

React Native Add Calendar Event Example

</Text>

Event Date Time: {moment.utc(CURRENT_TIME).local().format('lll')}

</Text>

<TextInput

value={eventName}

onChangeText={

(value) => setEventName(value)

}

placeholder={'Enter Event Name'}

style={styleSheet.textInput}

<TouchableOpacity

style={styleSheet.button}

onPress={() => { addEventToCalendar(eventName, CURRENT_TIME) }}>

Add Event to Calendar

</Text>

</TouchableOpacity>

</SafeAreaView>

);

11. Creating Style.

const styleSheet = StyleSheet.create({

  MainContainer: {
    flex: 1,
    alignItems: 'center',
    padding: 8,
  },

  textInput: {
    height: 44,
    borderColor: '#4CAF50',
    borderRadius: 7,
    borderWidth: 1,
    width: '80%',
    paddingHorizontal: 8,
  },

  title_1: {
    color: 'red',
    fontSize: 24,
    textAlign: 'center',
    margin: 6,
  },

  title_2: {
    color: 'black',
    fontSize: 16,
    textAlign: 'center',
    margin: 12,
  },

  button: {
    width: '80%',
    height: 44,
    backgroundColor: '#00BFA5',
    margin: 15,
    justifyContent: 'center',
    alignItems: 'center'
  },

  buttonText: {
    color: 'white',
    textAlign: 'center',
    fontSize: 18
  }

});

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

alignItems: 'center',

padding: 8,

textInput: {

height: 44,

borderColor: '#4CAF50',

borderRadius: 7,

borderWidth: 1,

width: '80%',

paddingHorizontal: 8,

title_1: {

color: 'red',

fontSize: 24,

textAlign: 'center',

margin: 6,

title_2: {

color: 'black',

fontSize: 16,

textAlign: 'center',

margin: 12,

button: {

width: '80%',

height: 44,

backgroundColor: '#00BFA5',

margin: 15,

justifyContent: 'center',

alignItems: 'center'

buttonText: {

color: 'white',

textAlign: 'center',

fontSize: 18

}

});

12. Complete Source Code for App.js file :-

import React, { useState } from 'react';

import { Alert, StyleSheet, SafeAreaView, Text, TextInput, TouchableOpacity } from 'react-native';

import moment from 'moment';

import * as AddCalendarEvent from 'react-native-add-calendar-event';

export default function App() {

  const [eventName, setEventName] = useState('');

  const CURRENT_TIME = moment.utc();

  const currentTimeToString = (momentInUTC) => {
    var temp = moment.utc(momentInUTC).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]');
    return temp;
  };

  const addEventToCalendar = (title, currentTime) => {
    const eventConfig = {
      title,
      startDate: currentTimeToString(currentTime),
      endDate: currentTimeToString(moment.utc(currentTime).add(1, 'hours')),
      notes: 'Party Time...',
      navigationBarIOS: {
        tintColor: 'black',
        backgroundColor: 'blue',
        titleColor: 'pink',
      },
    };

    AddCalendarEvent.presentEventCreatingDialog(eventConfig)
      .then((eventInfo) => {
        Alert.alert('eventInfo -> ' + JSON.stringify(eventInfo));
      })
      .catch((error) => {
        // handle error such as when user rejected permissions
        Alert.alert('Error -> ' + error);
      });
  };

  return (
    <SafeAreaView style={styleSheet.MainContainer}>

      <Text style={styleSheet.title_1}>
        React Native Add Calendar Event Example
      </Text>

      <Text style={styleSheet.title_2}>
        Event Date Time: {moment.utc(CURRENT_TIME).local().format('lll')}
      </Text>

      <TextInput
        value={eventName}
        onChangeText={
          (value) => setEventName(value)
        }
        placeholder={'Enter Event Name'}
        style={styleSheet.textInput}
      />

      <TouchableOpacity
        style={styleSheet.button}
        onPress={() => { addEventToCalendar(eventName, CURRENT_TIME) }}>
        <Text style={styleSheet.buttonText}>
          Add Event to Calendar
        </Text>
      </TouchableOpacity>

    </SafeAreaView>
  );
};

const styleSheet = StyleSheet.create({

  MainContainer: {
    flex: 1,
    alignItems: 'center',
    padding: 8,
  },

  textInput: {
    height: 44,
    borderColor: '#4CAF50',
    borderRadius: 7,
    borderWidth: 1,
    width: '80%',
    paddingHorizontal: 8,
  },

  title_1: {
    color: 'red',
    fontSize: 24,
    textAlign: 'center',
    margin: 6,
  },

  title_2: {
    color: 'black',
    fontSize: 16,
    textAlign: 'center',
    margin: 12,
  },

  button: {
    width: '80%',
    height: 44,
    backgroundColor: '#00BFA5',
    margin: 15,
    justifyContent: 'center',
    alignItems: 'center'
  },

  buttonText: {
    color: 'white',
    textAlign: 'center',
    fontSize: 18
  }

});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

import React, { useState } from 'react';

import { Alert, StyleSheet, SafeAreaView, Text, TextInput, TouchableOpacity } from 'react-native';

import moment from 'moment';

import * as AddCalendarEvent from 'react-native-add-calendar-event';

export default function App() {

const [eventName, setEventName] = useState('');

const CURRENT_TIME = moment.utc();

const currentTimeToString = (momentInUTC) => {

var temp = moment.utc(momentInUTC).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]');

return temp;

};

const addEventToCalendar = (title, currentTime) => {

const eventConfig = {

title,

startDate: currentTimeToString(currentTime),

endDate: currentTimeToString(moment.utc(currentTime).add(1, 'hours')),

notes: 'Party Time...',

navigationBarIOS: {

tintColor: 'black',

backgroundColor: 'blue',

titleColor: 'pink',

};

AddCalendarEvent.presentEventCreatingDialog(eventConfig)

.then((eventInfo) => {

Alert.alert('eventInfo -> ' + JSON.stringify(eventInfo));

})

.catch((error) => {

// handle error such as when user rejected permissions

Alert.alert('Error -> ' + error);

});

};

return (

React Native Add Calendar Event Example

</Text>

Event Date Time: {moment.utc(CURRENT_TIME).local().format('lll')}

</Text>

<TextInput

value={eventName}

onChangeText={

(value) => setEventName(value)

}

placeholder={'Enter Event Name'}

style={styleSheet.textInput}

<TouchableOpacity

style={styleSheet.button}

onPress={() => { addEventToCalendar(eventName, CURRENT_TIME) }}>

Add Event to Calendar

</Text>

</TouchableOpacity>

</SafeAreaView>

);

};

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

alignItems: 'center',

padding: 8,

textInput: {

height: 44,

borderColor: '#4CAF50',

borderRadius: 7,

borderWidth: 1,

width: '80%',

paddingHorizontal: 8,

title_1: {

color: 'red',

fontSize: 24,

textAlign: 'center',

margin: 6,

title_2: {

color: 'black',

fontSize: 16,

textAlign: 'center',

margin: 12,

button: {

width: '80%',

height: 44,

backgroundColor: '#00BFA5',

margin: 15,

justifyContent: 'center',

alignItems: 'center'

buttonText: {

color: 'white',

textAlign: 'center',

fontSize: 18

}

});

Screenshots :-

Example of React Native Add Calendar Event NPM YARN

Contents in this project Example of React Native Add Calendar Event NPM YARN :-

Also Read :

Leave a Reply Cancel reply

Search Here