{"id":16453719,"url":"https://github.com/vonovak/react-native-add-calendar-event","last_synced_at":"2025-05-14T15:07:47.366Z","repository":{"id":38421748,"uuid":"88529836","full_name":"vonovak/react-native-add-calendar-event","owner":"vonovak","description":"Create, view or edit events in react native using the standard iOS / Android dialogs","archived":false,"fork":false,"pushed_at":"2024-10-25T11:59:53.000Z","size":1613,"stargazers_count":357,"open_issues_count":51,"forks_count":104,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-09T21:33:41.007Z","etag":null,"topics":["android","calendar","event","events","hacktoberfest","ios","react-native"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vonovak.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["vonovak"]}},"created_at":"2017-04-17T16:58:48.000Z","updated_at":"2025-05-08T10:15:59.000Z","dependencies_parsed_at":"2024-06-18T15:18:02.169Z","dependency_job_id":"8662e942-7607-4094-a59b-5188c2cd5773","html_url":"https://github.com/vonovak/react-native-add-calendar-event","commit_stats":{"total_commits":142,"total_committers":18,"mean_commits":7.888888888888889,"dds":"0.28873239436619713","last_synced_commit":"7ae923cd1b55515283cc263d7adf71eaf5fbcd1a"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-native-add-calendar-event","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-native-add-calendar-event/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-native-add-calendar-event/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-native-add-calendar-event/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vonovak","download_url":"https://codeload.github.com/vonovak/react-native-add-calendar-event/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254169742,"owners_count":22026214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","calendar","event","events","hacktoberfest","ios","react-native"],"created_at":"2024-10-11T10:16:34.589Z","updated_at":"2025-05-14T15:07:47.301Z","avatar_url":"https://github.com/vonovak.png","language":"Java","funding_links":["https://github.com/sponsors/vonovak"],"categories":[],"sub_categories":[],"readme":"#### Maintenance notice\n\n\u003e [!IMPORTANT]\n\u003e This package has been deprecated in favor of [`expo-calendar`](https://docs.expo.dev/versions/v52.0.0/sdk/calendar/#launching-system-provided-calendar-dialogs) which provides the features of this package (and more) and does so in a better way. Please use the package provided by Expo. Thank you.\n\n# react-native-add-calendar-event\n\nThis package alows you to start an activity (Android) or show a modal window (iOS) for adding, viewing or editing events in device's calendar. Through a promise, you can find out if a new event was added and get its ID, or if it was removed.\n\nFor managing calendar events without the UI for user to interact with, see [react-native-calendar-events](https://github.com/wmcmahan/react-native-calendar-events).\n\n\u003cimg src=\"https://raw.githubusercontent.com/vonovak/react-native-add-calendar-event/master/images/ios.gif\" width=\"300\" hspace=\"60\" /\u003e \u003cimg src=\"https://raw.githubusercontent.com/vonovak/react-native-add-calendar-event/master/images/android.gif\" width=\"300\" /\u003e\n\n## Getting started\n\n`npm install react-native-add-calendar-event --save`\n\nor\n\n`yarn add react-native-add-calendar-event`\n\n## Permissions\n\nYou'll also need to install and setup [react-native-permissions](https://github.com/zoontek/react-native-permissions/), or similar, to request calendar permissions for your app.\n\n## Expo Support\n\nThis package is not available in the [Expo Go](https://expo.io/client) app. Learn how you can use it with [custom dev clients](/plugin/install.md).\n\n## Mostly automatic installation\n\n1. (only RN \u003c 0.60) `react-native link react-native-add-calendar-event`\n\n(only RN \u003e= 0.60) run `pod install` in the ios folder\n\n2. add `NSCalendarsWriteOnlyAccessUsageDescription` or `NSCalendarsFullAccessUsageDescription` (for edit/view access) to your `Info.plist` file. The string value associated with the key will be used when asking user for calendar permission.\n\n3. rebuild your project\n\niOS note for RN \u003c 0.60: If you use pods, `react-native link` will probably add the podspec to your podfile, in which case you need to run `pod install`. If not, please verify that the library is under `link binary with libraries` in the build settings in Xcode (see manual installation notes).\n\n## Quick example\n\nSee the example folder for a demo app.\n\nUsing `react-native-permissions` to request calendar permission before creating a calendar event.\n\n```js\nimport { Platform } from 'react-native';\nimport * as AddCalendarEvent from 'react-native-add-calendar-event';\nimport * as Permissions from 'react-native-permissions';\n\n\nconst eventConfig = {\n  title,\n  // and other options\n};\n\nPermissions.request(\n  Platform.select({\n    ios: Permissions.PERMISSIONS.IOS.CALENDARS_WRITE_ONLY,\n    android: Permissions.PERMISSIONS.ANDROID.WRITE_CALENDAR,\n  })\n)\n  .then(result =\u003e {\n    if (result !== Permissions.RESULTS.GRANTED) {\n      throw new Error(`No permission: ${result}`);\n    }\n    return AddCalendarEvent.presentEventCreatingDialog(eventConfig)\n  })\n  .then((eventInfo: { calendarItemIdentifier: string, eventIdentifier: string }) =\u003e {\n    // handle success - receives an object with `calendarItemIdentifier` and `eventIdentifier` keys, both of type string.\n    // These are two different identifiers on iOS.\n    // On Android, where they are both equal and represent the event id, also strings.\n    // when { action: 'CANCELED' } is returned, the dialog was dismissed\n    console.warn(JSON.stringify(eventInfo));\n  })\n  .catch((error: string) =\u003e {\n    // handle error such as when user rejected permissions\n    console.warn(error);\n  });\n```\n\n### Creating an event\n\ncall `presentEventCreatingDialog(eventConfig)`\n\neventConfig object:\n\n| Property         | Value   | Note                                                                |\n| :--------------- | :------ | :------------------------------------------------------------------ |\n| title            | String  |                                                                     |\n| startDate        | String  | in UTC, format: 'YYYY-MM-DDTHH:mm:ss.SSSZ'                          |\n| endDate          | String  | in UTC, format: 'YYYY-MM-DDTHH:mm:ss.SSSZ'                          |\n| location         | String  |                                                                     |\n| allDay           | boolean |                                                                     |\n| url              | String  | iOS only                                                            |\n| notes            | String  | The notes (iOS) or description (Android) associated with the event. |\n| navigationBarIOS | Object  | config object for the navbar, see below                             |\n\nThe dates passed to this module are strings. If you use moment, you may get the right format via `momentInUTC.format('YYYY-MM-DDTHH:mm:ss.SSS[Z]')` the string may look eg. like this: `'2017-09-25T08:00:00.000Z'`.\n\nMore options can be easily added, PRs are welcome!\n\n### Editing an event\n\ncall `presentEventEditingDialog(eventConfig)`\n\neventConfig object:\n\n| Property      | Value   | Note                                 |\n| :------------ | :------ | :----------------------------------- |\n| eventId       | String  | Id of edited event.                  |\n| useEditIntent | boolean | Android only, see description below. |\n\nuseEditIntent: `ACTION_EDIT` should work for editing events, according to [android docs](https://developer.android.com/guide/topics/providers/calendar-provider.html#intent-edit) but this doesn't always seem to be the case as reported in the [bug tracker](https://issuetracker.google.com/u/1/issues/36957942?pli=1). This option leaves the choice up to you. By default, the module will use `ACTION_VIEW` which will only show the event, but from there it is easy for the user to tap the edit button and make changes.\n\n### Viewing an event\n\ncall `presentEventViewingDialog(eventConfig)`\n\neventConfig object:\n\n| Property              | Value   | Note                                                                                                                                     |\n| :-------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------- |\n| eventId               | String  | Id of edited event.                                                                                                                      |\n| allowsEditing         | boolean | iOS only; [docs](https://developer.apple.com/documentation/eventkitui/ekeventviewcontroller/1613964-allowsediting?language=objc)         |\n| allowsCalendarPreview | boolean | iOS only; [docs](https://developer.apple.com/documentation/eventkitui/ekeventviewcontroller/1613956-allowscalendarpreview?language=objc) |\n\n### Interpreting the results\n\nThe aforementioned functions all return a promise that resolves with information about what happened or rejects with an error.\n\nDue to the differences in the underlying native apis, it is not trivial to come up with a unified interface that could be exposed to JS and the module therefore returns slightly different results on each platform (we _can_ do better though, PRs are welcome!). The rules are:\n\n- presentEventCreatingDialog\n\n| situation                   | result on both platforms                                                       |\n| :-------------------------- | :----------------------------------------------------------------------------- |\n| event is created            | `{ action: 'SAVED', eventIdentifier: string, calendarItemIdentifier: string }` |\n| event creation is cancelled | `{ action: 'CANCELED' }`                                                       |\n\n- presentEventEditingDialog\n\n| situation                  | result on iOS                                                                  | result on Android        |\n| :------------------------- | :----------------------------------------------------------------------------- | ------------------------ |\n| event is edited            | `{ action: 'SAVED', eventIdentifier: string, calendarItemIdentifier: string }` | `{ action: 'CANCELED' }` |\n| event editing is cancelled | `{ action: 'CANCELED' }`                                                       | `{ action: 'CANCELED' }` |\n| event is deleted           | `{ action: 'DELETED' }`                                                        | `{ action: 'DELETED' }`  |\n\n- presentEventViewingDialog\n\nOn Android, this will lead to same situation as calling `presentEventEditingDialog`; the following table describes iOS only:\n\n| situation                                              | result on iOS             |\n| :----------------------------------------------------- | :------------------------ |\n| event modal is dismissed                               | `{ action: 'DONE' }`      |\n| user responded to and saved a pending event invitation | `{ action: 'RESPONDED' }` |\n| event is deleted                                       | `{ action: 'DELETED' }`   |\n\n### Configuring the navigation bar (iOS only)\n\nThe navigation bar appearance for all calls can be customized by providing a `navigationBarIOS` object in the config. The object has the following shape:\n\n```\nnavigationBarIOS: {\n  tintColor: string,\n  barTintColor: string,\n  backgroundColor: string,\n  translucent: boolean,\n  titleColor: string,\n}\n```\n\nPlease see the docs on [tintColor](https://developer.apple.com/documentation/uikit/uinavigationbar/1624937-tintcolor?language=objc), [barTintColor](https://developer.apple.com/documentation/uikit/uinavigationbar/1624931-bartintcolor?language=objc), [backgroundColor](https://developer.apple.com/documentation/uikit/uiview/1622591-backgroundcolor?language=objc), [translucent](https://developer.apple.com/documentation/uikit/uinavigationbar/1624928-translucent?language=objc), [titleTextAttributes](https://developer.apple.com/documentation/uikit/uinavigationbar/1624953-titletextattributes?language=objc) (NSForegroundColorAttributeName)\n\n### Exported constants\n\nPlease note that `SAVED`, `CANCELED`, `DELETED`, `DONE` and `RESPONDED` constants are exported from the module. The constants are borrowed from iOS and are covered in [EKEventViewAction docs](https://developer.apple.com/documentation/eventkitui/ekeventviewaction?language=objc) and [EKEventEditViewAction docs](https://developer.apple.com/documentation/eventkitui/ekeventeditviewaction?language=objc).\n\n#### Note on the `Date` JS Object\n\nIt is recommended to not rely on the standard `Date` object and instead use some third party library for dealing with dates, such as moment.js because JavaScriptCore (which is used to run react-native on devices) handles dates differently from V8 (which is used when debugging, when the code runs on your computer).\n\n#### Changing the language of the iOS dialog\n\nsee [StackOverflow answer](https://stackoverflow.com/questions/18425945/xcode-5-and-localization-of-xib-files)\n\n### Manual installation\n\n#### iOS\n\n1.  In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2.  Go to `node_modules` ➜ `react-native-add-calendar-event` and add `RNAddCalendarEvent.xcodeproj`\n3.  In XCode, in the project navigator, select your project. Add `libRNAddCalendarEvent.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4.  Run your project (`Cmd+R`)\u003c\n\n#### Android\n\n1.  Open up `android/app/src/main/java/[...]/MainApplication.java`\n\n- Add `import com.vonovak.AddCalendarEventPackage;` to the imports at the top of the file\n- Add `new AddCalendarEventPackage()` to the list returned by the `getPackages()` method\n\n2.  Append the following lines to `android/settings.gradle`:\n    ```\n    include ':react-native-add-calendar-event'\n    project(':react-native-add-calendar-event').projectDir = new File(rootProject.projectDir,   '../node_modules/react-native-add-calendar-event/android')\n    ```\n3.  Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n    ```\n      compile project(':react-native-add-calendar-event')\n    ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvonovak%2Freact-native-add-calendar-event","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvonovak%2Freact-native-add-calendar-event","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvonovak%2Freact-native-add-calendar-event/lists"}