culturehq / add-to-calendar Goto Github PK

The "Add to My Calendar" button appears, but when I click on it, nothing happens.

Looking at html via "inspect", I see:

<div class="chq-atc"><button type="button" class="chq-atc--button"><svg width="20px" height="20px" viewBox="0 0 1024 1024"><path d="M704 192v-64h-32v64h-320v-64h-32v64h-192v704h768v-704h-192z M864 864h-704v-480h704v480z M864 352h-704v-128h160v64h32v-64h320v64h32v-64h160v128z"></path></svg> Add to My Calendar</button></div>

...in other words, I see no "onClick" function, no dropdown menu, etc.

What am I missing?

There really should be prop label to customize button.
Same with iconVisible.

My workaround is now:
`
.chq-atc--button {
font-size: 0;
}

.chq-atc--button svg {
display: none;
}

.chq-atc--button::before {
content: "Add to calendar";
text-decoration: underline;
font-size: 22px;
color: #fff;
}
`

Can the list item names be exposed as props for editing the names depending on language.

Hi, do you have any plan to avoid enable a way to customize the "add" button?

Thanks,

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @culturehq/[email protected] for the project I'm working on.

In some cases, the onClick event that is added to the document is triggered at the same time that I click on the button to open the dropdown, resulting in it immediately closing again (before it even has time to render). In effect this prevents the dropdown menu from even opening.

In my case, this is happening when I open a Select from Material-UI, then navigate (using react-router-dom) to the page containing my AddToCalendar element.

My project: https://github.com/Avasam/speedrun.com_global_scoreboard_webapp/tree/f51b522dd6f33d8cc146c3b3b0d53c1baf52f2bf (this is at the current latest commit which does contain the issue)
Live example on my dev server: https://avasamdev.pythonanywhere.com/tournament-scheduler/register/5-f5c44dd3-4800-4778-ae7f-249a7c958acd

How to replicate:

1. Navigate to the given link
2. Open the dropdown (no need to enter any information)
3. Click on the Click here to view the current registrations link
   (Filling any information and click "Sign Me/Us up!" would result in the same behaviour)
4. Watch the dropdown not work

If you skip step 2. It'll work.

Here is the diff that solved my problem:
Of course this isn't an actual fix, just a workaround. And I do loose the ability to close the dropdown from clicking outside it

diff --git a/node_modules/@culturehq/add-to-calendar/dist/AddToCalendar.js b/node_modules/@culturehq/add-to-calendar/dist/AddToCalendar.js
index 418e2d6..c6ef105 100644
--- a/node_modules/@culturehq/add-to-calendar/dist/AddToCalendar.js
+++ b/node_modules/@culturehq/add-to-calendar/dist/AddToCalendar.js
@@ -45,7 +45,7 @@ var useOpenState = function (initialOpen) {
     react_1.useEffect(function () {
         if (open) {
             var onClose_1 = function () { return setOpen(false); };
-            document.addEventListener("click", onClose_1);
+            // document.addEventListener("click", onClose_1);
             return function () { return document.removeEventListener("click", onClose_1); };
         }
         return undefined;

This issue body was partially generated by patch-package.

Hello,

I have been trying to use this add to calendar button component for awhile now and I haven't been able to get the drop down menu to toggle by clicking the event button. I even tried importing the styles to see if that resolved my issue and still no luck. If I set the open prop to true the drop down buttons do appear by default and they are functional, but that is the only way I can get them to toggle. Does anyone know what I could possibly be missing? Also is there any straightforward way that I could just cut out the outlook ICS download portion into a function and use that on my own button if I am unable to get this drop down toggle to work?

Any help would be greatly appreciated, thanks!

Add event to google works perfectly, but facing issue while adding event to apple cal or outlook.
".ics" file get downloaded but having only following data

BEGIN:VCALENDAR VERSION:2.0 BEGIN:VEVENT URL:http://localhost:3011/

missing event details in '.ics' file

React version :
"react": "^17.0.1",
"react-dom": "^17.0.1",

I tried using new lines \n to do so, but it does not recognize them. Is there a way to do this?

In React 18, the children prop is no longer part of the React.FC type by default and has to be explicitly added.

Can we please support SSR?

Clicking Apple Calendar or Outlook when on an iOS device (v15.4.1) is causing an error to pop up saying "Safari cannot download this file." No event is created in the calendar.

pass in a start date of '2021-09-12T11:30` will give a yahoo link similar to https://calendar.yahoo.com/?v=60&view=d&type=20&title=A%20Event&st=20210912T103000Z&dur=0000

new Date('2021-09-12T10:30:00Z') correctly resolves to Sun Sep 12 2021 11:30:00 GMT+0100 (British Summer Time)

but the yahoo calendar sets the event time to 10:30 ( not 11:30 ). The same time format works for all other calendars. This seems to be a bug in Yahoo Calendar api? Just checking if you concur?

Hi,

I tried to use your package in the Next.js project and every time I tried to open a dropdown I ended up in frozen app. As I debugged I found out that the part responsible for it is in src/makeUrls.ts, line 47: uid: new Date().getTime().toString(),, which triggers an infinite loop.