What happened?

On Chrome 106.0.5249.119, dates are off by 1 day (minus 1 day)

I configure: startDate: "2022-03-28", endDate: "2022-03-29",

ICS file (Chrome): DTSTART;VALUE=DATE:20221027 DTEND;VALUE=DATE:20221029

ICS file (other browsers): DTSTART;VALUE=DATE:20221028 DTEND;VALUE=DATE:20221030

Unable to apply correction due to inconsistent behaviour across different browsers

How to reproduce?

add-to-calendar-button version: 1.18.3

configure like this: startDate: "2022-03-28", endDate: "2022-03-29",

Open app in Chrome 106.0.5249.119

Now download ICS file, you will see: DTSTART;VALUE=DATE:20221027 DTEND;VALUE=DATE:20221029

Also open Google Calendar -> you will see 27th October to 28 However, intented date was 28th to 29th

The problem is that it is not behaving consistently across all browsers. Otherwise, it would be easy to just add 1 day to dates for correction

Open app in any other browser (Opera, Firefox, Iphone iOS Chrome etc) Download ICS file and you will see: DTSTART;VALUE=DATE:20221028 DTEND;VALUE=DATE:20221030

Also open Google Calendar -> you will see 28th October to 29 So on other browsers, it works as intended. But Desktop Chrome (106.0.5249.119) is 1 day off

On top of that, I am getting following browser console log, when opening calendar (this error also happens in other browsers - not only Chrome):

Screenshots & more

No response

System & Environment

add-to-calendar-button version: 1.18.3

Days display 1 day earlier (e.g. I enter 2022-03-27 as begin, but on the Google Calendar I see 26th October): Device: PC, Windows 10, 64Bit Browser: Chrome 106.0.5249.119

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!

What happened?

Kind of in a chicken-or-the-egg situation right now. I've been digging into the newish support for subscriptions and it went pretty smoothly up until Google.

Google Calendar redirects to: https://calendar.google.com/calendar/u/0/r?cid={url}, but I'm having an issue with getting my URL accepted. For some reason, https:// URLs don't seem to be allowed (or maybe there's a certain cert that they're looking for? StackOverflow answers were inconclusive), but http:// and webcal:// both work for me.

Unfortunately, add-to-calendar-button requires https:// URLs as the icsFile value, so there's not an easy way for me to get both sides to agree on something that works. In an ideal world, I'd just use webcal:// or http:// (or really, figure out why Google doesn't like https).

How to reproduce?

Use an URL with https:// at the start for the value of icsFile.

Screenshots & more

No response

System & Environment

What happened?

This may just be because we are using React, but browser check seems to have broken with the most recent version. Console shows:

no further initialization due to wrong environment (no browser)

How to reproduce?

We are running React and initialize like this:

const AddToCalendarButton = (props) => {
  const { event } = props || {};
  useEffect(ATCBInit, []);

  if (!event) return null;

  return <div className="atcb">{JSON.stringify(event)}</div>;
};

Screenshots & more

System & Environment

1. macOS latest
2. Chrome latest

It uses new Function thus requiring CSP unsafe-eval. Here Luckily only uses it in the browser detection section. Here is the patched code.

// CHECKING FOR SPECIFIC DEVICED AND SYSTEMS
// browser
const isBrowser = ()=>{try { return this===window; } catch(e) { return false; }}
// iOS
const isiOS = isBrowser()
  ? ()=>{
      if ((/iPad|iPhone|iPod/i.test(navigator.userAgent || navigator.vendor || window.opera) && !window.MSStream) || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)) { return true; } else { return false; }
    }
  : ()=>{return false;}
// Android
const isAndroid = isBrowser()
  ? ()=>{
      if (/android/i.test(navigator.userAgent || navigator.vendor || window.opera) && !window.MSStream) { return true; } else { return false; }
    }
  : ()=>{return false;};
// Chrome
const isChrome = isBrowser()
  ? ()=>{
      if (/chrome|chromium|crios/i.test(navigator.userAgent)) { return true; } else { return false; }
    }
  : ()=>{return false;};
// Mobile
const isMobile = () => {
  if (isAndroid() || isiOS()) {
    return true;
  } else {
    return false;
  }
};
// WebView (iOS and Android)
const isWebView = isBrowser()
  ? ()=>{
      if (/(; ?wv|(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari))/i.test(navigator.userAgent || navigator.vendor)) { return true; } else { return false; }
    }
  : ()=>{return false;};
// checking for problematic apps
const isProblematicWebView = isBrowser()
  ? ()=>{
      if (/(Instagram)/i.test(navigator.userAgent || navigator.vendor || window.opera)) { return true; } else { return false; }
    }
  : ()=>{return false;};

Example:

<div class="atcb" style="display:none;"> { "name":"Reminder to star the add to calendar button repo", "description":"Check out the maybe easiest way to include add to calendar buttons to your website at:<br>→ [url]https://github.com/add2cal/add-to-calendar-button[/url]", "startDate":"2023-02-14", "endDate":"2023-02-14", "startTime":"00:00", "endTime":"23:30", "location":"World Wide Web", "options":[ "Apple", "Google", "iCal", "Microsoft365", "MicrosoftTeams", "Outlook.com", "Yahoo" ], "timeZone":"America/Los_Angeles", "iCalFileName":"Reminder-Event" } </div>

The result should show the start time 00:00 -> 1.00 and end time 23:30 -> 12:30 since I am in Asia/Dhaka Timezone. but it is not.

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.

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

Thanks for the library. Worked almost perfectly except that I was asked to implement it for a situation in which the timezone wasn't specified in the date/time of the event.

E.g. the data to be presented only had date, time and said "your local timezone."

Given the nature of the setup - changing the business logic to force timezones into the existing legacy display of data wasn't an option.

This feature request creates a new option "browserTz" which can override the specified timezone. If used it will create a link that uses the local users' timezone. Basically it strips the timezone field out of the ical/url link which causes the event to default to the browser/user's timezone. If that option is not specified then it does not change existing functionality.

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• [X ] My code follows the code style of this project.
• [X] My change requires a change to the Readme.md.
• [X] I have updated the Readme.md accordingly.
• [X] I have read the CONTRIBUTING document.

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.

What happened?

I have followed the documentation and used provided code to send an email from Microsoft Power Automate. After sending the email, I cannot see button in our email. After digging it into developer tool in browser. I can see the class applied in DIV tag is being replaced with x_ i.e. x_atcb. That is why I suppose the button is not being displayed. Please help as soon as possible. Thank you so much in advance. :)

How to reproduce?

No response

Screenshots & more

No response

System & Environment

Browser (MS Edge, Google Chrome)

Bumps prettier from 2.7.1 to 2.8.1.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps @typescript-eslint/eslint-plugin from 5.47.1 to 5.48.0.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps eslint-config-prettier from 8.5.0 to 8.6.0.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps @typescript-eslint/parser from 5.47.1 to 5.48.0.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps timezones-ical-library from 1.4.2 to 1.5.1.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

What happened?

On the event selection window for multiple events, the brand icon and the date box collapsed down due to a global CSS property.

How to reproduce?

Set the following global css property (Automatically added by a library in my case): *, *::before, *::after { box-sizing: inherit; }

Screenshots & more

System & Environment

1. Linux Mint OS
2. Chrome Browser