add2cal / add-to-calendar-button Goto Github PK

The convenient JavaScript snippet, which lets you reliably create beautiful buttons, where people can add events to their calendars.

Home Page: https://add-to-calendar-button.com

License: Other

CSS 39.50% JavaScript 60.50%

add-to-calendar snippet vanilla-js javascript css add-to-calendar-button outlook google apple microsoft generator component free calendar angular react event vue widget add-event

add-to-calendar-button's Introduction

Your next Add to Calendar Button

The convenient JavaScript Web Component, which lets you reliably create beautiful buttons, where people can add events to their calendars.

For everybody, who wants to include a button at their website or app, which enables users to easily add a specific event to their calendars. It's main goal 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. Supporting calendars at Apple, Google, Microsoft (365, Outlook, Teams), Yahoo, and generic iCal.

The script, since it is a web component, integrates easily with any usual HTML webpage (VanillaJS way) as well as popular JavaScript frameworks and libraries like Angular, React, Vue, Svelte, and more.

Works with 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.

▶️ Demo

See add-to-calendar-button.com for a live demo and playground.

✨ Features

Simple and convenient integration of 1 or many buttons, configurable directly within the HTML code.

Supported Calendars

Google Calendar.
Apple Calendar.
Yahoo Calender.
Microsoft 365, Outlook, and Teams.
Automatically generated iCal/ics files (for all other calendars and cases).

Event Types

Timed and all-day events.
One-time, multi-date, recurring.
Calendar subscription.
Most robust time zone and daylight saving management (via our own TimeZones iCal Library).
Dynamic dates (like "today + 3").

Look

Beautiful and adjustable UI.
Light and dark mode.
Multiple themes.

Accessibility

Optimized and adjustable UX (for desktop and mobile).
Dynamic dropdown positioning.
Taking care of all those edge cases, where some scenarios do not support specific setups (like WebView blocking downloads); utilizing beautiful user guidance workarounds.
Auto-generated Schema.org rich (structured) data for better SEO.
Full support for mouse, touch, or keyboard input (W3C WAI compliant).
Supporting 20+ languages, incl. RTL text for Arabic & Persian; but also custom labels and text blocks (i18n).

And much more

Well documented code, to easily understand the processes and build on top of it.
No external service or backend dependencies.
Fully GDPR, CCPA, and LGPD compliant by design - without the need of signing some data processing agreement.
FREE and easy.

🚀 Go PRO

ics file generation and hosting for better compatibility.
RSVP, incl. automatic updates sent to attendees, GDPR features, and more.
More customization - all no-code.
API, webhooks, and more technical toys.
Share events among all kinds of channels - email, social media, ...

Check the details at add-to-calendar-pro.com!

📦 Installation / Setup

Option 1: simple (CDN)

You can use the jsDelivr CDN and load the respective script directly into your website.

Place the script tag inside the <head> section.

<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>

Option 2: npm

Install the package using the following npm command:

npm install add-to-calendar-button

Import the module into your project/component

import 'add-to-calendar-button';

Based on your framework/library, you might need to make minor adjustments to the respective config.

Find detailed installation guides for the most common ones, like React, Angular, Vue, Svelte, or Astro at add-to-calendar-button.com/#installation.

🎛️ Configuration

A button can be easily created by using the respective custom element.

<add-to-calendar-button></add-to-calendar-button>
<!-- OR simply ... -->
<add-to-calendar-button />

You can then configure the button by simply adding the options as attributes to it. Boolean values (true/false) can be set as optionName="true" or simply by adding optionName to the tag. Not setting it at all would be automatically translate to "false".

Structure (PRO)

<add-to-calendar-button proKey="prokey-of-your-event" />

Minimal structure (no PRO)

Mind that for auto-generating rich snippets, a location would be mandatory as well.

Calendar type options and time zone information are not required, but recommended.

<add-to-calendar-button
  name="Add the title of your event"
  startDate="2022-02-21"
  options="['Google']"
  timeZone="America/Los_Angeles"
/>

A more powerful example (no PRO)

<add-to-calendar-button
  name="Add the title of your event"
  description="A nice description does not hurt"
  startDate="2022-02-21"
  endDate="2022-03-24"
  startTime="10:13"
  endTime="17:57"
  location="Somewhere over the rainbow"
  options="['Apple','Google','iCal','Microsoft365','Outlook.com','Yahoo']"
  timeZone="Europe/Berlin"
  trigger="click"
  inline
  listStyle="modal"
  iCalFileName="Reminder-Event"
/>

More Examples • Full Configuration Documentation • PRO Version

🤗 Support it!

You like this project? It would be awesome if you would support it, so it lives on!

⭐ Star the repository in order to stay up-to-date and save it for later!
📣 Spread the word! On Twitter/X, Medium, Discord, Facebook, ...
✍️ Leave a review at ProductHunt.
💌 Send us some positive feedback at the discussion board.

⚡ Changelog

Find all changes in the dedicated file at CHANGELOG.md.

🙌 Contributing

Anyone is welcome to contribute, but mind the guidelines:

IMPORTANT NOTE: Run npm install and npm run format to auto-lint!

📃 Copyright and License

Licensed under Elastic License 2.0 (ELv2).

About open-source: We consider ourselves open-source. However, we are also aware of the controversy coming with licenses like the one selected. Therefore, 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.

Speaking about the license: We love it, because it is so simple. Have a look! You 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. In doubt, simply ask and we find a way. :)

💜 Kudos go to

...all amazing contributors:

add-to-calendar-button's People

Contributors

Stargazers

Watchers

Forkers

bansicloud manikantag daocatt ketchalegend max-got sayaterima sandeepsatapathy ajrepo robertaonnis chriswerstiuk ortovoxx pavlosb arpithparikh jasonmcneill usd21developers velomapa bryan-brancotte jamesgrubb asdonslimsky willnguyen1312 maxine-le-pennec ahalabs micker simonfarrell sterpawan justzero annette8888 troisidesign maatticlabs ssaaiidd acm-will david-carty kristian240 kaangiray26 mrjk05 almoral killerrin a4deb kelly-castanos nticaric digitalbil productinfo anuovec antoniosinesi wir anitasalunke danieledantuon jkalio52 haniefss darshanmakwana412 emilebosch openrepo4u shimpark kucici spidermunkey thebrijeshmangotra denperidge-contrib c0rychu ccs24 cpano98 gg-big-org ramzimalhas tumelo-mapheto thescholarlysquire turcuciprian icephoenixz paulgmcdonald agustin-ferrari joeosterfeld toshoajibade ngoclam99 baudryj delosgatos wdenouden pil717171 vanmarco zelkibuilds ptky18it4 sarb98 ahmadghizzawi sath-it js-popular-repos goudarz pieer nihalpawar4 crowdlift w6cloud jenniferbacon01 ragnarkurm purushu007 mrmartech nstankov23 rafaelderolez isaacmfg allomov simple10 klaus-gsma pbaumard julamb qazimhussain

add-to-calendar-button's Issues

Error importing css file when using react

Hi, I have a next.js react app with a global.css file. In my global.css file, when I try to import the css file, @import "add-to-calendar-button/assets/css/atcb.min"; I get the following error: Package path ./assets/css/atcb.min is not exported from package /Users/daniellin/Documents/<project-name>/node_modules/add-to-calendar-button (see exports field in /Users/daniellin/Documents/<project-name>/node_modules/add-to-calendar-button/package.json)

Wondering if there is a way to address this issue? Basically what is happening is when I click on the button, the dropdown opens but it takes up the entire screen currently... So I try to import the css file to see if this will solve the issue. My component is the same as the atcb_action example.

Ability to pass style props in to react component

I would like to use the built-in atcb button class as part of this library in React/Typescript, but am unable to style specific properties via this method. Specifically, I'd like to remove the drop shadow behind the button component if possible. Can you expose that ability or allow this shadow to be controlled by a prop?

Otherwise, it's working fabulously.

Advanced timezone in iCal/ics

Currently, a timezone (other than UTC) gets transformed into UTC.
This is fine for all web links, but there is a better solution for iCal/ics, since it supports to explicitly specifiy timezone specifics.
This would be an enhancement, getting to an even more stable solution.

see:

[Bug]: `fill-available` creates warning

What happened?

The latest CSS change with fill-available seems to result in a warning (we are using ATCB in React using CRA).

Sorry, I'm not sure what the fix is, but this results in a compile warning on every build, as shown in the screenshot.

How to reproduce?

Update to latest add-to-calendar-button 1.11.1.

Screenshots & more

See the screenshot above.

System & Environment

On build
Browser not relevant
add-to-calendar-button 1.11.1

Error when parsing time and date in the same value

Hi there,

Thanks for this. Using this with React and noticed that a date and time in the same field seems to not work as intended (or we are doing something wrong or documentation is wrong).

I created a Code Sandbox example here, please see both event objects inside App.js:
https://codesandbox.io/s/charming-frost-8g7qvz?file=/src/App.js

Click either button and for example "Google" to see the error:
RangeError
Invalid time value

Also, the second button may not be supported at this time, but if that's the case, then it would be really nice to have support for a full date/timestamp including milliseconds and Z so that we can avoid parsing on the date when pulling it from the database.

On mouse enter the popuo show and close very fast.

There is one point of atcb.js

bgOverlay.addEventListener('mouseenter', atcb_close_all, false);

during the transiction of the mouse the system continous open the popup. SHould be a system that open and close on on mouse out of the div and not for all the transiction.

Schema.org Event markup compatibility

@jekuer, thank you for publishing the add-to-calendar-button-library, I love it!

To achieve compatibility with the schema.org Event markup it would be awesome to enhance you parser accordingly.

The JSON markup could be something like:

<div class="atcb">
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "TouristAttraction",
    "name":"Reminder to check the add-to-calendar-button repo",
    "description":"Check out the maybe easiest way to include add-to-calendar-buttons to your website at: https://github.com/jekuer/add-to-calendar-button",
    "event": {
    "@type": "Event",
    "startDate":"01-14-2022",
    "endDate":"01-18-2022",
    "startTime":"10:15",
    "endTime":"23:30",
    "location":"World Wide Web"
    },
    "options":[
    "Apple",
    "Google",
    "iCal",
    "Microsoft365",
    "Outlook.com",
    "Yahoo"
    ],
    "timeZone":"Europe/Berlin",
    "iCalFileName":"Reminder-Event"
  }
  </script>
</div>

Adding the ld+json script tag would allow you to remove the style="display:none;" altogether, too.

The javascript code could be enhanced to look for a script-child element and use that in case of existence, like:

let atcButtons = document.querySelectorAll('.atcb');
// ... and generate the buttons one by one
for (let i = 0; i < atcButtons.length; i++) {
  let atcbConfig;
  // check if schema.org markup is present
  let schema = atcButtons[i].querySelector('script');
  // get their JSON content first
  if (schema && schema.innerHTML) {
    // get schema.org event markup
    atcbConfig = JSON.parse(schema.innerHTML);
  } else {
    // get JSON from HTML block
    atcbConfig = JSON.parse(atcButtons[i].innerHTML);
  }
  // ...
}

The schema.org validator will still highlight some compatibility issues regarding to unkown attributes, but the Googlebot should be able to index the content.

Support line breaks for the description + mind different methods per calendar type

Title says it all.

Google Cal doesn't recognize \n as line break. <br /> is needed for that. For now you can only line break on ical OR google Calendar, but not both.

By the way: Thank you very much! The button helps a lot!

Adding dynamic data to angular v12 atcb control - Rebind event

The atcb div does not re-render through *ngIf clause or any other way. The actual requirement is to rebind the json data object as the data that is to be passed to the atcb widget is not loaded as soon as the html is rendered. It is received as part of a response from an Ajax call. By that time if we change the model variable which is bound to the json object, it does not reflect. We tried with an *ngIf clause and only show the atcb div/control after the API response has loaded but in this case the button does not render at all.

Is there any way to rebind the control's json variable or make changes to the json variable after the control has rendered.

@jekuer

Not working properly with dynamic content

Currently, I am using the library with AngularJS. One of the add-to-calendar buttons is rendered on page load but the others are loaded dynamically after "ng-repeat" finishes.
The issue is that one of the buttons is already rendered and has the assigned ID of 0 (from the library). However when the other buttons are rendered, the first button HTML class - .atcb is already processed by the library and gone. The library does not see it as an add-to-calendar button, therefore the IDs of the buttons start back from 0 to n.
This problem causes the following functionality disruption.
After clicking the first button in the ng-repeat, it calls the first button on the page which was generated on the initial page load.
I've created a temporary fix by generating random IDs and not relying on the plugin count of .atcb elements to assign the IDs.
Inside the function atcb_init(), where the btnID is assigned, I've changed it to use a random number instead of the count.
var btnId = Math.floor(Math.random() * 1000) + 1;

Optimize and describe best practice for Angular/React implementation

It is currently easy to get it running with the current docu; yet it does not describe best practice.
Needs deeper evaluation, whether the code also needs updates, but mind that it needs to work for Angular, React, and "stupid" Vanilla JS at the same time!

Support of subscription calendars

Excellent job on this script!

We would love to see it supporting subscribing to a calendar (the feature where you can subscribe to an external dynamic .ics, for instance to load and always sync all the days off in your country with your calendar)

Addevent.com has a specific button for that: https://www.addevent.com/documentation/add-to-calendar-button-for-calendars
and I have never found a good open source alternative! 😔

How to customize the init hook

First of all, thanks for you work, is awesome!

Is possible to customize the hook where to initialize? For what I understood from docs, the point is:
class="atcb"

What about if the same page we have more than one "Add to Calendar" buttons?

Feature request: event reminder parameter

It would be nice to add event reminder parameters in the .ics file and on the Google Calendar:
Something like this on the .ics file:

BEGIN:VALARM
ACTION:DISPLAY
DESCRIPTION:REMINDER
TRIGGER:-PT15M
END:VALARM

Google's add event URL may also have some paramters to pass the reminder info.

Angular Example

Hello, do you have an example (step by step) to integrate in Angular app?

[Bug]: In Safari browse iOS devices start and end time not come right for Microsoft365

What happened?

When we pass data in start time and end time
startTime: '09:00',
endTime: '12:00',
options: ['Apple', 'Google', 'iCal', 'Microsoft365', 'Yahoo'],
timeZone: "Europe/Berlin",

        we are not getting the right start and end time.

How to reproduce?

No response

Screenshots & more

No response

System & Environment

1.Device iPhone
2.Browser safari

Angular needs to init in ngAfterViewChecked instead of ngAfterViewInit

Calling atcb_init() in the ngAfterViewInit will find no DOM nodes with the button as the DOM is not rendered yet. The function needs to be called in ngAfterViewChecked when the buttons are rendered.

issue with the accents like è being converted to é

Hi,

If I type "è" in the Name, Description or Location, it gets "converted" to é
So I don't see how to allow accents in those fields.
Txs :)

Feature Request: Description syntax parse for hyperlink

Since the description field in calendar apps generally support hyperlinking text, it would be nice to obfuscate the link behind a defined string.
for example

description:"
Some info about the event:
Website:
[url]https://github.com/jekuer/add-to-calendar-button [text] View our source [/text][/url]
"

Looks like:
View our source

Getting to a Web Component

In order to get closer to a smooth web component, let's work on the following:

move the css into the js file (for better encapsuling when using it the vanilla way without npm). But maybe only for the npm version (therefore, this would be a job for the build process to include the css into the JS). And maybe as a variation, so the developer can decide whether he want to import the whole thing or only the js (adding the css as a second step as it is at the moment).
extend the HTMLElement with an AddToCalendarButton element. As the new default way. Should still be compatible with the div implementation, but have its own semantic one for future implementations.
Offer the option to move the config into data-attributes rather than the JSON way. While the JSON way is still the way to go for Schema.org implementation, data-attributes should be the future default (while still supporting the JSON).

Update Readme gif

Update the gif image to reflect recent style changes.

"Get code at GitHub" button link is broken

Looks like some kind of Markdown error, but the GH link on this page is broken:

https://jekuer.github.io/add-to-calendar-button/

Rewrite date format to ISO_8601

In https://jekuer.github.io/add-to-calendar-button/, you’ve put dates in the format MM-DD-YYYY. They should be YYYY-MM-DD, especially for schema.org Event data where the former is invalid (and raises grave concerns to me about how you’re parsing it, though I haven’t looked and don’t intend to).

multievents

Hello! Thanks for such a great tool! I have a question: Is it possible to add multiple events?

[Bug]: Event Times in Mozilla Thunderbird Are Wrong with ICS file

What happened?

I am a new user of your code and it's great, but I am having difficulty geting ICS exports to produce correct times in Mozilla Thunderbird calendars. The problem could well be one with Thunderbird itself (I'm using 91.11.0 (64-bit) on Linux Fedora 36).

I have tried exporting calendars with and without a timezone (plus passing in a UTC time or a time adjusted using moment.js to match the user's device timezone) but I am not able to produce an exported ICS file that produces events with correct start time in Thunderbird's calendar.

Sometimes the start time of my event is 10 hours out in Thunderbird, but renders ok in Google or the OS calendar. For example, this is the start time shown for the event in Thunderbird's calendar:

The difference between the UTC time and the local time is 10 hours, but I am in the GMT timezone so it shouldn't really be more than 1 hour different.

Is this a bug with Thunderbird or am i misconfiguring your plugin?

N.B. I also notice that Thunderbird creates a new calendar that it treats as a remote source for the imported item which is not ideal.

How to reproduce?

Create a calendar event for add to calendar event using JS and attaching to a button using atcb_action.
Include either a local timezone, UTC or 'currentBrowser' as a timezone.
Save the resulting ICS file locally and open it in Mozilla Thunderbird via the 'open calendar' option.
Start time is incorrect.

Screenshots & more

No response

System & Environment

Dell Laptop - Fedora 36 (64 Bit)
Mozilla Firefox 102.0 (64-bit)
Mozilla Thunderbird 91.11.0 (64-bit)
v1.13.2 of add to calendar button

Support hooking into events

I'd like to track how many users actually follow through and click on one of the options (and possibly track which option they clicked to see which calendar apps are most relevant to support for my users).

It'd be nice if browser events were triggered when users trigger the widget and (more importantly for me) when users select an option.

Possibility to add link in description

Hi,

if i try to add in the description html tag all works good;
but if I insert the tag href like this: test the system fails.

This is usefull to insert link into the description.

Customizing buttons view

Please, make the option to not use this main button. In my case I need calendar buttons in the row.
So it will be great to have some options for customizing.

[Bug]: "isAndroid is not defined" on selecting Outlook.com

What happened?

Reason:

The isMobile function was created with "new Function" syntax, it will execute in the global context. So calling isAndroid and isiOS methods within it will raise an error.

const isMobile = new Function('if (isAndroid() || isiOS()) { return true; } else { return false; }');

Solution:

Consider rewriting like below or in any format as long as it runs in the same lexical environment as isAndroid and isiOS methods.

const isMobile = () => {
	if (isAndroid() || isiOS()) {
		return true;
	} else {
		return false;
	}
};

How to reproduce?

No response

Screenshots & more

No response

System & Environment

MacOS 11.6.5
Chrome
Version of the application 1.14.2
Used in svelte version 3.44.0

The string to be encoded contains characters outside of the Latin1 range.

As I am using some Cyrillic symbols I had to add this inside the btoa method this code
.replace(/[\u00A0-\u2666]/g, function(c) { return '&#' + c.charCodeAt(0) + ';'; })

Desktop Outlook/Outlook App

consider adding option for Desktop Outlook and Outlook mobile apps

https://docs.microsoft.com/en-us/answers/questions/202137/34ms-outlookeventsnew-scheme-url.html

template

 ms-outlook://events/new?title=MY%20MEETING&start=2019-01-29T13:00:00&end=2019-01-29T14:00:00&location=LOCATION&[email protected]

[Bug]: It is not possible to use the features [url]https://....|URL Text[/url]

What happened?

Doesn't work on gmail

How to reproduce?

[url]https://test.it|URL Text[/url]

Screenshots & more

System & Environment

chorme/windows

Use of GPL license

Hi there, was the choice of GPL licensing intentional? GPL license makes it effectively impossible for anyone to use this for a commercial project.

Seems like you've put a HUGE amount of work on this, I just don't want that to be wasted because of a restrictive license that means people won't see your awesome work.

Any chance of a vanilla Javascript version?

Great project here! I don't use Angular or React though, so I'm just wondering if there's a way to make this work with vanilla Javascript.

blur

Hello, and congrats for this feature. I have a question in Apple devises if i have more than one add to calendar buttons, when one is active the others doesn't blur, and the active one doesn't cover the other. Is it a known bug or maybe there is a solution for this?

Sorry for my english, thanks in advance

Location not adding to Google Calendar app [iPhone Only]

When selecting the 'Google' option from the Add to Calendar dropdown, the 'Location' field is not being set in the Google Calendar app on iPhone. If the Google Calendar application is not installed on the device, the Calendar is opened in the Browser and is set appropriately.

Issue is not reproducible on Desktops or Android devices. I have tested with the iCal and Apple options and Location is set as expected. All other values (Name, Description, Start/End Date+Times) seem to set as expected within Google Calendar.

Test Site: https://www.musicofdenver.com/

Replication Steps:

Install Google Calendar application on iPhone
Navigate to and select 'Add to Calendar' button
Select 'Google' option
Observe Location field is empty in Google Calendar app

A few feature requests

Would it be possible to pass a boolean prop that would determine whether or not to trigger atcb_generate_bg_overlay?
Can you generate types for Typescript?
Is it possible to create a true React component so as not to be dependent on passing literal strings as inner HTML for the atcb className method (atcb_init).

[Bug]: Microsoft 365 and Outlook.com buttons are not redirecting to particular pages.

What happened?

Following this documentation for react does not work for Microsoft 365 and Outlook.com

How to reproduce?

const AddtoCalendarButton: React.FC = ({ event }) => {
React.useEffect(atcb_init, [])
return (

{'{'}
"name":"{event.title}", "startDate":"
{moment(event.eventDate).format('YYYY - MM - DD')}", "endDate":"
{moment(event.endDate).format('YYYY - MM - DD')}", "startTime":"
{moment(event.eventDate).format('HH:mm')}", "endTime":"
{moment(event.endDate).format('HH:mm')}
", "location":"{event.address}", "label":"Add to Calendar", "options":[ "Apple", "Google",
"iCal", "Microsoft365", "Outlook.com", "Yahoo" ], "timeZone":"{event.timezone}",
"iCalFileName":"Reminder-Event", "trigger": "click"
{'}'}

)
}

Screenshots & more

Uploading Screen Recording 2022-08-10 at 17.18.32.mov…

System & Environment

macOS,
chrome,
1.14.2

downloads not working in in-app browser (instagram)

Somehow the Apple and ICS version are broken (do nothing) in the instagram in-app browser. I tried to find out why, because apparently other downloads work, so it is not an issue with instagram, but i could not verify that.

would be great if this was fixed, because this totally breaks this tool for us.

PS: thank you for the awesome package, otherwise it is working perfectly and looks clean and polished!

Accessibility needs fixing (currently completely broken)

This is currently completely inaccessible to screen readers, keyboard users and such, because you’ve built it on unfocusable divs and mouse hover and touch events. For accessibility purposes: (a) never depend only on those events; (b) never use an unfocusable element—at the least, give the div a tabindex=0 attribute; (c) don’t use divs where you mean buttons or links.

I believe this library could do with being split into two parts, one for functionality and one for DOM; this would allow alternative implementations of the DOM half to fit in with existing UI frameworks. This may be beyond the effort you wish to go to; up to you. But the accessibility parts at least of the current implementation really need fixing.

Blank screen after sending outlook invite

I use office 365 with a blank screen after sending the event Calendar, what is the problem? I try your demo same blank screen too

help, please

Update README/Troubleshoot

Hello,

Thanks for a great plugin!

I spend a good few hours chasing a but why buttons didn't work in on iOS. The error was json parse error. I have description texts with line-breaks, emails url/links etc.

After trying a few good things with no solution I found it was iOS format detection causing problems.

Adding these meta tags

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">

on pages with add-to-calendar-button solves the problem. Obviously it will break iOS creating links on other content on the page. So not the best solution maybe.

Anyway I'm leaving this info here for anyone else having problems. Maybe we could add a "Tips" or troubleshooting section to the README.

Sorry I'm creating this as an issue rather than a pull-request with README update but I don't have time to make a PR at the moment.

width of Microsoft Teams icon (really a tiny tiny "issue")

It is really a detail (I hardly dare posting about it :) ), but I have noticed that the icon for Microsoft Teams is a little bit wider than all the other ones. Consequence: the text next to the icons is aligned for all... except Microsoft Teams.

Well, don't make a new release just for that obviously :D

[Bug]:

What happened?

Attempting to implement atcb_action on custom button component results in triggerElement being undefined.

How to reproduce?

export const AddToCalendar: React.VFC<Props> = ({ appointment }) => {
  const saveToCalendar = useCallback(
    (e) => {
      e.preventDefault();
      atcb_action({
        trigger: 'click',
        name: `${appointment?.visit_reason}`,
        startDate: `${formatApptDate(appointment?.start_time)}`,
        endDate: `${formatApptDate(appointment?.end_time)}`,
        startTime: `${formatApptTime(appointment?.start_time)}`,
        endTime: `${formatApptTime(appointment?.end_time)}`,
        location: `${addressToString(appointment?.clinic.address)}`,
        options: ['Apple', 'Google', 'iCal', 'Microsoft365', 'Outlook.com', 'Yahoo'],
        timeZone: 'America/Los_Angeles',
        iCalFileName: 'Reminder-Event',
      });
    },
    [appointment?.clinic.address, appointment?.end_time, appointment?.start_time, appointment?.visit_reason]
  );

  return (
    <IconButton
      onClick={saveToCalendar}
      icon={<CalendarIcon />}
    />
  );
};

Screenshots & more

System & Environment

Chrome on MacBook

1.11.2

Change dropdown direction based on available space

If the button is located at the bottom of the screen, dropdown should probably open up, not down. That way user does not have to scroll the page to see all available options.

Recurring events

Is there any posibility on add recurring events on calendars?
like: repeats every Monday
Google calendars links seems to support them.

What are you using to minify atcb.js ?

Was testing an update/fix to your script, but when I run uglifyjs atcb.js , it throws errors.

Would like to know what you are using to generate the atcb.min.js so when I update atcb.js I follow the same procedure you use for testing the minified version.

Thanks.

All day event dates are one day off

First, we are loving this script; it's exactly what we needed.

However, we're seeing an issue with all-day events. When opened in a calendar, either web-based or from an .ics file, the dates are always one day ahead. So specifying 2022-05-04 will show up in the calendar as May 5th. Again, this only appears to be happening if start/end times are omitted. Here is a sample:

{
  "name":"Calendar Event 1",
  "description":"This is a description",
  "location":"Anywhere, USA",
  "startDate":"2022-05-04",
  "endDate":"2022-05-04",
  "timeZone":"America/New_York"
}

I've also created a Codepen that loads the latest from the CDN. You can see the example button should be May 5-6, but shows in a calendar as May 6-7. The second example has a start/end time specified, and works as expected.

Also, I should note that the "all day" example from the script's homepage is exhibiting this behavior as well.

Thanks again for the script and your attention to this issue. Let me know if you have any additional questions.

create a React package for this library

ideally I'd like to do just:

import { AddToCalendarButton } from 'react-add-to-calendar-button'

<AddToCalendarButton event={...}>

Currently it requires a bit more work.

Uncaught ReferenceError: isiOS is not defined

Hi,

Not sure if it's something specific to me but I get "Uncaught ReferenceError: isiOS is not defined" on OSX 10.14.6 in lastest Chrome, Firefox and Safari when trying to click add to Google Calendar. I have the issue in my implementation and the demo.

For some reason changing const isiOS to var isiOS fixes it...

Thanks for the time saving script.

add2cal / add-to-calendar-button Goto Github PK

add-to-calendar-button's Introduction

Your next Add to Calendar Button

▶️ Demo

✨ Features

Supported Calendars

Event Types

Look

Accessibility

And much more

🚀 Go PRO

📦 Installation / Setup

Option 1: simple (CDN)

Option 2: npm

🎛️ Configuration

Structure (PRO)

Minimal structure (no PRO)

A more powerful example (no PRO)

🤗 Support it!

⚡ Changelog

🙌 Contributing

📃 Copyright and License

💜 Kudos go to

add-to-calendar-button's People

Contributors

Stargazers

Watchers

Forkers

add-to-calendar-button's Issues

What happened?

How to reproduce?

Screenshots & more

System & Environment

What happened?

How to reproduce?

Screenshots & more

System & Environment

What happened?

How to reproduce?

Screenshots & more

System & Environment

What happened?

Reason:

Solution:

How to reproduce?

Screenshots & more

System & Environment

What happened?

How to reproduce?

Screenshots & more

System & Environment

What happened?

How to reproduce?

Screenshots & more

System & Environment

What happened?

How to reproduce?

Screenshots & more

System & Environment

Recommend Projects

Recommend Topics

Recommend Org