{"id":17434633,"url":"https://github.com/add2cal/add-to-calendar-button-react","last_synced_at":"2026-02-21T14:10:34.399Z","repository":{"id":64274839,"uuid":"553045358","full_name":"add2cal/add-to-calendar-button-react","owner":"add2cal","description":"Convenient React wrapper for the add to calendar button snippet, which lets you reliably create beautiful buttons, where people can add events to their calendars.","archived":false,"fork":false,"pushed_at":"2025-12-29T23:28:30.000Z","size":1365,"stargazers_count":55,"open_issues_count":0,"forks_count":9,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-02T06:36:50.576Z","etag":null,"topics":["add-event","add-to-calendar","add-to-calendar-button","calendar","component","free","generator","google","ical","icalendar","ics","javascript","outlook","react","reactjs","script","share","snippet","typescript","widget"],"latest_commit_sha":null,"homepage":"https://add-to-calendar-button.com","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/add2cal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"security.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-10-17T16:18:33.000Z","updated_at":"2025-12-29T23:28:10.000Z","dependencies_parsed_at":"2025-12-16T06:05:48.585Z","dependency_job_id":null,"html_url":"https://github.com/add2cal/add-to-calendar-button-react","commit_stats":{"total_commits":129,"total_committers":6,"mean_commits":21.5,"dds":"0.10852713178294571","last_synced_commit":"f7eddbd5c90793e8a58b19e47aef868be75d6256"},"previous_names":[],"tags_count":89,"template":false,"template_full_name":null,"purl":"pkg:github/add2cal/add-to-calendar-button-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/add2cal%2Fadd-to-calendar-button-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/add2cal%2Fadd-to-calendar-button-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/add2cal%2Fadd-to-calendar-button-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/add2cal%2Fadd-to-calendar-button-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/add2cal","download_url":"https://codeload.github.com/add2cal/add-to-calendar-button-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/add2cal%2Fadd-to-calendar-button-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29682751,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T13:29:26.630Z","status":"ssl_error","status_checked_at":"2026-02-21T13:26:50.125Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["add-event","add-to-calendar","add-to-calendar-button","calendar","component","free","generator","google","ical","icalendar","ics","javascript","outlook","react","reactjs","script","share","snippet","typescript","widget"],"created_at":"2024-10-17T09:08:04.384Z","updated_at":"2026-02-21T14:10:34.394Z","avatar_url":"https://github.com/add2cal.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Add to Calendar Button React Wrapper](https://github.com/add2cal/add-to-calendar-button-react/blob/main/assets/readme-header.png?raw=true)\n\n![Version](https://img.shields.io/npm/v/add-to-calendar-button-react?style=for-the-badge\u0026label=Version)\n[![Parent Script Version](https://img.shields.io/badge/Parent%20Script%20Version-v2.13.6-blue?style=for-the-badge)](https://github.com/add2cal/add-to-calendar-button)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/add-to-calendar-button-react?style=for-the-badge)](https://www.npmjs.com/package/add-to-calendar-button-react)\n[![npm Installations](https://img.shields.io/npm/dt/add-to-calendar-button-react?label=npm%20Installations\u0026style=for-the-badge)](https://www.npmjs.com/package/add-to-calendar-button-react)\n\n\u003cbr /\u003e\n\n# The Add to Calendar Button - optimized for React\n\nThis is a wrapper repository for the popular [Add to Calendar Button](https://github.com/add2cal/add-to-calendar-button), making it even more convenient, to create beautiful buttons in React, where people can add events to their calendars.\n\n\u003cbr /\u003e\u003cbr /\u003e\n\nThis is for everybody, who wants to include a button in their React application, which enables users to easily add a specific event to their calendars.\nThe main goal of this repository is to keep this process as easy as possible at maximum compatibility. Simply define your button configuration and everything else is automatically generated by the script.\nSupporting calendars at Apple, Google, Microsoft (365, Outlook, Teams), Yahoo, and generic iCal.\n\n![Supported Calendars: Apple (via iCal), Google, Microsoft (365, Outlook, Teams), Yahoo, generic iCal](https://github.com/add2cal/add-to-calendar-button-react/blob/main/assets/badge-supported-calendars.svg)\n\nIn terms of system support, **all modern browsers** (Chrome, Edge, Firefox, Safari) on **Windows, Mac, Android, and iOS** as well as rather restricted webview environments like the **Instagram** in-app browser are supported.\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n---\n\n\u003cbr /\u003e\n\n## ▶️ Demo\n\nSee [add-to-calendar-button.com](https://add-to-calendar-button.com/) for a live demo and more documentation.\n\n\u003cbr /\u003e\n\n---\n\n\u003cbr /\u003e\n\n## ✨ Features\n\nSimple and convenient integration of 1 or many buttons, optimized to be used as a React component.\n\n### Supported Calendars\n\n- **Google** Calendar.\n- **Yahoo** Calender.\n- **Microsoft 365, Outlook, and Teams**.\n- Automatically generated **iCal/ics** files (for all other calendars, like **Apple**).\n\n### Event Types\n\n- Timed and all-day events.\n- One-time, multi-date, recurring.\n- Calendar Subscription.\n- Most robust time zone and daylight saving management (via our own [TimeZones iCal Library](https://github.com/add2cal/timezones-ical-library)).\n- Dynamic dates (like \"today + 3\").\n\n### Look\n\n- Beautiful and adjustable UI.\n- Light and dark mode.\n- Multiple themes.\n\n### Accessibility\n\n- Optimized and adjustable UX (for desktop and mobile).\n- Dynamic dropdown positioning.\n- Taking care of all those edge cases, where some scenarios do not support specific setups (like WebView blocking downloads); utilizing beautiful user guidance workarounds.\n- Auto-generated Schema.org rich (structured) data for better SEO.\n- Full support for mouse, touch, or keyboard input (W3C WAI compliant).\n- Supporting 20+ languages, incl. RTL text for Arabic; but also custom labels and text blocks.\n\n### And much more\n\n- Well documented code, to easily understand the processes and build on top of it.\n- No external module or backend dependencies.\n- Fully GDPR, CCPA, and LGPD compliant by design - without the need of signing some data processing agreement.\n- FREE and easy.\n\n\u003cbr /\u003e\n\n---\n\n\u003cbr /\u003e\n\n## 🚀 Go PRO\n\n- ics file generation and hosting for better compatibility.\n- RSVP, incl. automatic updates sent to attendees, GDPR features, and more.\n- More customization - all no-code.\n- API, webhooks, and more technical toys.\n- Share events among all kinds of channels - email, social media, ...\n\nCheck the details at [add-to-calendar-pro.com](https://add-to-calendar-pro.com)!\n\n\u003cbr /\u003e\n\n---\n\n\u003cbr /\u003e\n\n## 📦 Installation\n\nInstall the package using the following npm command:\n\n```sh\nnpm install add-to-calendar-button-react\n```\n\nIt requires React and React-Dom, both \u003e=18.0.0. The installer will warn you automatically if your setup does not fit.\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n## 🎛️ Setup \u0026 Configuration\n\nImport the component wherever you want to use it:\n\n```javascript\nimport { AddToCalendarButton } from 'add-to-calendar-button-react';\n```\n\n**Mind that this package only works on the client side!**\nYou should mark the component where you use it as `use client` and/or make use of dynamic imports, where you set \"ssr\" to false (e.g. with Next.js).\n\nUse the componet inside your code and declare any options as props. You will get warned about any type misconfiguration.\n\nCalendar type options and time zone information are not required, but recommended.\n\n```javascript\n\u003cAddToCalendarButton\n  name=\"Test-Event\"\n  startDate=\"2023-05-22\"\n  options={['Apple','Google','Yahoo','iCal']}\n  timeZone=\"America/Los_Angeles\"\n\u003e\u003c/AddToCalendarButton\u003e\n```\n\n\u003cbr /\u003e\u003cbr /\u003e\n\nIf you need to use the type explicitely, you can import it via:\n\n```javascript\nimport type { AddToCalendarButtonType } from 'add-to-calendar-button-react';\n```\n\n\u003cbr /\u003e\u003cbr /\u003e\n\nWhen using the PRO version, you can keep it even shorter, as you would only need the proKey.\n\n```javascript\n\u003cAddToCalendarButton proKey=\"prokey-of-your-event\"\u003e\u003c/AddToCalendarButton\u003e\n```\n\n\u003cbr /\u003e\n\n### All options and hidden features\n\nFind all information about the available props and how to configure specific features on the demo page at [add-to-calendar-button.com/configuration](https://add-to-calendar-button.com/configuration).\n\nMind the difference to the web component! At this wrapper, you would use the `\u003cAddToCalendarButton\u003e` component instead of the `\u003cadd-to-calendar-button\u003e` custom element.\n\n**Also mind that, different to the main package, with the React wrapper, you can actually declare arrays (like with the options prop) as arrays and objects (like with multi-date setups) as objects!**\n\n\u003cbr /\u003e\n\n---\n\n\u003cbr /\u003e\n\n## 🤗 Support it!\n\nYou like this project? It would be awesome if you would support it, so it lives on!\n\n- ⭐ [Star the repository](#) in order to stay up-to-date and save it for later!\n- 📣 Spread the word! On Twitter/X, Medium, Discord, Facebook, ...\n- ✍️ Leave a review at [ProductHunt](https://www.producthunt.com/products/add-to-calendar-button-generator/reviews).\n- 💌 Send us some positive feedback at the [discussion board](https://github.com/add2cal/add-to-calendar-button/discussions).\n\n\u003cbr /\u003e\n\n## ⚡ Changelog\n\n- v2.11 : ⚠️ Breaking: When setting the dates objects and respective attributes on the root level, root values always override the dates object (except for name in the multi-date case)\n- v2.10 : update to parent script v2.10; Hungarian localization, style updates, ics optimization\n- v2.9 : update to parent script v2.9; new style \"simple\" and better ics generation\n- v2.8 : update to parent script v2.8; Ukranian localization, time zone upgrade\n- v2.7 : update to parent script v2.7; RSVP open seats, fixes\n- v2.6 : update to parent script v2.6; useUserTZ, css ::part\n- v2.5 : update to parent script v2.5; Introducing PRO, default branding, customLabels update, optionsMobile, dropdown for date style\n- v2.4 : update to parent script v2.4; forceOverlay\n- v2.3 : update to parent script v2.3; pastDateHandling, disabled option, static-dropup option, new languages\n- v2.2 : update to parent script v2.2; type fixes; \"attendee\" option; better lazy load of external css\n- v2.1 : update to parent script v2.1; type fixes\n- v2.0 : supporting latest major version of the parent script\n- v1.0 : initial release\n\n(Only referring to this wrapper repository and not including any patches!)\n\nFind all changes regarding the parent package at its [CHANGELOG.md](https://github.com/add2cal/add-to-calendar-button/blob/main/CHANGELOG.md).\n\n\u003cbr /\u003e\n\n## 🙌 Contributing\n\nAnyone is welcome to contribute, but mind the [guidelines](.github/CONTRIBUTING.md):\n\n- [Bug reports](.github/CONTRIBUTING.md#bugs)\n- [Feature requests](.github/CONTRIBUTING.md#features)\n- [Pull requests](.github/CONTRIBUTING.md#pull-requests)\n\n**IMPORTANT NOTE:** Run `npm install` and `npm run format` before you create any pull request!\n\n\u003cbr /\u003e\n\n## 📃 Copyright and License\n\nCopyright (c) [Jens Kuerschner](https://jenskuerschner.de).\n\nLicensed under [Elastic License 2.0 (ELv2)](LICENSE.txt).\n\n**About open-source**:\nWe consider ourselves open-source.\nHowever, we are also aware of the controversy coming with licenses like the one selected.\nTherefore, and contrary to many other companies and products, we no longer use the term in any marketing statements unless it is about other pieces which really are under an official OSI license.\n\nSpeaking **about the license**:\nWe love it, because it is so simple. Have a look!\nYou are basically free to do anything unless you are not offering the tool itself as a product or service; or want to remove copyright and license stuff.\nIn doubt, simply ask and we find a way. :)\n\n\u003cbr /\u003e\n\n---\n\n\u003cbr /\u003e\n\n## 💜 Kudos go to\n\n...all contributors and people involved! Thanks a lot!\n\nFind more details at [the respective parent repo section here...](https://github.com/add2cal/add-to-calendar-button#-kudos-go-to)\n\n\u003cbr /\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadd2cal%2Fadd-to-calendar-button-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadd2cal%2Fadd-to-calendar-button-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadd2cal%2Fadd-to-calendar-button-react/lists"}