useCalendar Hook 🚀

Updated to Expo SDK53

Blog post & example

To learn more about using this hook and see it in action, read the post!

To see a working example, check out my-expo-agenda which is a small example app developed to showcase how to use useCalendar hook.

What is it for

This is an easy hook to use expo-calendar. It allows you:

• Get access permission to calendar
• Open settings to give access permission to calendar
• Create a new calendar and store it on your device
• Add events to the calendar
• Get all events
• Get calendarId
• Check if an event exists inside of the calendar created
• Delete the calendar and all events inside of it

Install

npm install @atiladev/usecalendar

or

yarn add @atiladev/usecalendar

After installing the hook, you'll have to install the following libraries

$ npx expo install expo-calendar expo-localization @react-native-async-storage/async-storage

How to use it

Start by importing the useCalendar hook and then import the packages that you need to interact with the Calendar:

import useCalendar from "@atiladev/usecalendar";

const {
  addEventsToCalendar,
  createCalendar,
  deleteCalendar,
  getCalendarId,
  getEvents,
  getPermission,
  isThereEvents,
  openSettings,
} = useCalendar("App_Name", "#BADA55", "Calendar_Name");

const createCalAndEvent = async () => {
  const granted = await getPermission();

  if (granted) {
    await createCalendar();
    let eventExists = await isThereEvents();

    if (!eventExists) {
      try {
        addEventsToCalendar("Event title", new Date(), new Date());
      } catch (e) {
        // Something went wrong
      }
    }
  } else {
    openSettings();
  }
};

const removeCalendar = () => deleteCalendar();

useCalendar

useCalendar(title: string, color: string, storeName: string);

useCalendar returns:

getPermission: () => Promise<Calendar[] | undefined>

createCalendar: () => Promise<void>

addEventsToCalendar: (eventTitle: string, eventStartDate: Date, eventEndDate: Date) => Promise<void>

deleteCalendar: () => Promise<void>

openSettings: () => Promise<void>

isThereEvents: () => Promise<boolean>

getEvents: () => Promise<Calendar.Event[]>

getCalendarId: () => Promise<any>

⭐️ If this hook is useful for you, please consider giving it a star. This motivates us to continue working on this and adding new features. Thanks!

Developed with ❤️ by Leandro Favre (AtilaDev)