Having Trouble Setting Up All Day Event on Microsoft Teams

[jrod95]

Hello everyone,

I am trilled with the add-to-calendar feature, and I have recently forked the repository with the intention to contribute in any possible way. While using this feature on one of my projects, I observed that if I only provide the start date in the YYYY-MM-DD format, which is supposed to create an all-day event, it shows two different dates and times. Specifically, the event starts at 7 PM on the day before the input start date and ends at 7 PM on the input start date. Thanks in advance for any insight you can provide me with!

[jekuer]

Can you share the full code block?
You can remove your input for name, description, and location, of course.

[jrod95]

Thanks for getting back to me Jens, I removed the fields you mentioned above. Please note that convertToYYYYMMDD(date) is simply converting an existing date format to the one required by add-to-calendar-button. I will include the code to that below as well, but that should be working fine.

<AddToCalendarButton startDate={convertToYYYYMMDD(date)} timeZone={tzValue} buttonStyle="text" options={['MicrosoftTeams', 'Apple', 'Google']} hideCheckmark="true" buttonsList hideTextLabelButton size="5" /> <SingleDayEventAlerts />

------------------------ convertToYYYYMMDD function ---------------------

function convertToYYYYMMDD(dateString) {
var date = new Date(dateString);
var year = date.getFullYear();
var month = ('0' + (date.getMonth() + 1)).slice(-2);
var day = ('0' + date.getDate()).slice(-2);

return year + '-' + month + '-' + day;
}

export default convertToYYYYMMDD;

[jekuer]

This should now be fixed with the latest update.
Would be awesome if you could validate this! 😃

One side note: The Teams integration is still highly experimental with a lot of workarounds, since Microsoft is somehow not able to provide a proper interface. Hopefully this will get more robust in the future. For now, all-day events should also work. However, Teams will not directly show them as all-day events, but rather an event from 00:00 to 00:00 of the following day.

[jrod95]

So for me, it doesn't create an event from 00:00 to 00:00 of the following day. Instead it is 7:00 pm the previous day to 7:00 pm on the input date. One work around I found is to make my users aware using an MUI Alert; I did the same for the missing HTML tags. I wonder if this is something we can use in the buttons for users using Microsoft Teams. Additionally, I think that Microsoft365 is not working... I believe that due to security measures unless your app is being authenticated using Microsoft, it will not work.

https://mui.com/material-ui/react-alert/

[jekuer]

What is the time zone at your event AND your Teams?

[jrod95]

They are both America/Chicago.

[jekuer]

Ok, I was able to reproduce it. Somehow the fix is not triggered with the React Wrapper.
Still, have no clue why. Will need to investigate this further.

[jrod95]

I tried doing that and a couple other things, but still ran into some issues. Microsoft is kind of a pain to work with, but hopefully their future updates will take care of these issues For the meantime, my alerts should help out... Thanks for all your help @jekuer !

[jekuer]

yes, Microsoft Outlook (and the 365 option) is another issue.
Were you able to get proper times in teams? Like at least 0:00 till 0:00?

[jrod95]

No, the times I get for Teams are still 7:00 pm - 7:00pm the following day of startDate

[jekuer]

@jrod95 , would you be so kind to test the following stackblitz to check, whether the time issue is solved there?
https://stackblitz.com/edit/add-to-calendar-button-react-typescript?file=App.tsx

This would be awesome. It is also using the React wrapper and I cannot reproduce it there as well.

[jrod95]

Yeah, I just tested it and the time issue is resolved. I will take a further look into my instances, it is really really weird...