[Bug]: Date button style formatting limitation/issue

[chriskastner]

What happened?

When displaying an event using the Date buttonStyle, the detail section includes a date which is formatted mm/dd/yyyy (US date format). Is it possible to provide either an option to specify that date format, or an option to just hide that date entirely... it's already included on the left side of the button anyway so largely redundant. I'm also not sure why but the date does not appear all of the time.

Would also be good to have an option to hide the time zone display. One would assume it is always in the local time based on the location - so we would prefer it to be disabled entirely.

I can remove these values with JavaScript but working with the shadowRoot is a bit of a pain in that regard.

How to reproduce?

This seems to display only if the time zone is not the same as the client time zone.

Screenshots & more

No response

System & Environment

1. Device and OS: Windows
2. Browser: Chrome
3. Version number of the application: 138.0.7204.97
4. How you include the script: CDN + add-to-calendar-button element (basic JS implementation)

[jekuer]

This information is highly adaptive and in a way opinionated.

Time zone is showing up, if the specified time zone varies from the user's time zone, which is important - otherwise the shown time is not correct.
You can circumvent this by setting the location to "global" - this way, it would convert the time to the user's time zone and not show the time zone. see https://add-to-calendar-button.com/configuration#location

The date is showing up, when the left side is not fully covering it (like when it is another year or different end date). It would not show up, if it is exactly what is already showing. So, there is NO redundancy!

The format adapts to the specified language and respective typical format. For English, yes, it goes for en_US.

So far, I do not see any bug with it.
If you have a specific feature request, feel free to start a discussion!

[chriskastner]

Thanks for the response - maybe bug was the wrong thing to tag this one as... was probably more just feedback and/or a request for a way to configure some of this a little more.

Having the date format adapt based on the language is great, but defaulting en to en_US is ignoring the majority of English-speaking populations who use DMY format. However I think maybe it was only showing up because I was testing with old events that were in a previous year... would have to do a bit more testing there, but maybe it won't be an issue in a real-world scenario.

I'm not sure the Global/Worldwide/Online location setting will address the issue with the time zone or date format, events need to be able to have specific locations.

I guess maybe an option to "show as local time" with the Date display would be helpful for people who don't want to show the converted client time. Example: A user is attending an event overseas that they'll be travelling to - they would just want to know the start date/time of the event (e.g. 7:30pm local time) - not what time it will be in the time zone they're currently in. Obviously the iCal file will have the time zone in it which is fine, and it will adjust the start/end for the individual clients - it's more about what you're showing on the website. If there's a registration form next to the add-to-calendar-button element, it would almost always just show the local event time (at least with numerous event platforms I've used anyway).

From an accessibility and UI design perspective the Date button is not obviously an interactive element - in order to make it usable we would really have to add content/indicators around it so people know it's a button (e.g. "Click here to add to calendar:"). Having it only show "add to calendar" on hover is not accessible (nor mobile-friendly where there is no hover state) - whilst it does have a great aria-label for screen readers, it has no focus state that indicates that it's an add to calendar button for anyone using the site visually. Perhaps having the "add to calendar" text & icon always visible in it somehow would address that?

[jekuer]

Will consider. For the time zone: That's exactly how it works and why it works this way 😉

…

On Wed, Jul 16, 2025, 01:51 chriskastner ***@***.***> wrote: *chriskastner* left a comment (add2cal/add-to-calendar-button#710) <#710 (comment)> Thanks for the response - maybe bug was the wrong thing to tag this one as... was probably more just feedback and/or a request for a way to configure some of this a little more. Having the date format adapt based on the language is great, but defaulting en to en_US is ignoring the majority of English-speaking populations who use DMY format. However I think maybe it was only showing up because I was testing with old events that were in a previous year... would have to do a bit more testing there, but maybe it won't be an issue in a real-world scenario. I'm not sure the Global/Worldwide/Online location setting will address the issue with the time zone or date format, events need to be able to have specific locations. I guess maybe an option to "show as local time" with the Date display would be helpful for people who don't want to show the converted client time. Example: A user is attending an event overseas that they'll be travelling to - they would just want to know the start date/time of the event (e.g. 7:30pm local time) - not what time it will be in the time zone they're currently in. Obviously the iCal file will have the time zone in it which is fine, and it will adjust the start/end for the individual clients - it's more about what you're showing on the website. If there's a registration form next to the add-to-calendar-button element, it would almost always just show the local event time (at least with numerous event platforms I've used anyway). From an accessibility and UI design perspective the Date button is not obviously an interactive element - in order to make it usable we would really have to add content/indicators around it so people know it's a button (e.g. "Click here to add to calendar:"). Having it only show "add to calendar" on hover is not accessible (nor mobile-friendly where there is no hover state) - whilst it does have a great aria-label for screen readers, it has no focus state that indicates that it's an add to calendar button for anyone using the site visually. Perhaps having the "add to calendar" text & icon always visible in it somehow would address that? — Reply to this email directly, view it on GitHub <#710 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACBM7U5SBUAPY525JBXMK2L3IWHWVAVCNFSM6AAAAACBIYGKIKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTANZWGA4TMMRRG4> . You are receiving this because you commented.Message ID: ***@***.***>