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

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.

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.

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:

• https://www.rfc-editor.org/rfc/rfc5545#section-3.6.5
• sabre-io/vobject#317
• https://confluence.alitecs.de/pages/viewpage.action?pageId=11403372

@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.

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?

1. Create a calendar event for add to calendar event using JS and attaching to a button using atcb_action.
2. Include either a local timezone, UTC or 'currentBrowser' as a timezone.
3. Save the resulting ICS file locally and open it in Mozilla Thunderbird via the 'open calendar' option.
4. 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

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 :)

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

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

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

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) + ';'; })

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

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.

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

1. MacOS 11.6.5
2. Chrome
3. Version of the application 1.14.2
4. Used in svelte version 3.44.0

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

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!

Update the gif image to reflect recent style changes.

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]

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.

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.

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

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

1. On build
2. Browser not relevant
3. add-to-calendar-button 1.11.1

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.

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 (

Screenshots & more

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

System & Environment

macOS,
chrome,
1.14.2

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.

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

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

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.

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:

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

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.

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.

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;

ideally I'd like to do just:

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

<AddToCalendarButton event={...}>

Currently it requires a bit more work.

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.

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?

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

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.

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

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

1. 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).
2. 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.
3. 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).

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

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.

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.

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!

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.

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.

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.

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).

What happened?

Doesn't work on gmail

How to reproduce?

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

Screenshots & more

System & Environment

chorme/windows

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! 😔

1. Would it be possible to pass a boolean prop that would determine whether or not to trigger atcb_generate_bg_overlay?
2. Can you generate types for Typescript?
3. 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).

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

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!