[TODO] Create a new component to mark the event on their Calendar

[Dnouv]

It is quite a valuable feature to have the event marked on their calendar so that the event attendee or Speaker can schedule their time. And also, get a reminder in case they forget about it.

It should have the following export options:

• Google Calendar
• Yahoo
• iCal *
• Outlook

• The Open Event Server we are using already has an API endpoint to export the event as iCal; we need the frontend UI to make the call.

Please feel free to comment and ask questions, if any. Thank you!

[nsundriyal62]

i want to work on this issue. please assign it to me.

[VanshulB]

Hey @Dnouv,

I would really like to work on that issue;
I have thoroughly researched how to add events to calendars, and I believe I can work on this specific issue.
My approach to the issue will be creating a react component and taking various event details as props and creating functions to format the date and time of the event and to encode the link as a URI, and redirect to that link on clicking; additionally, we will fetch the iCal file through Open event server for exporting as iCal/Outlook. (just for clarification I am not working on any issue other that #64 ).

[Dnouv]

Hey @VanshulB

Thank you for taking up the issue. I have a question. Could you please explain how you will implement the Google Calendar Add feature? Will it be something like redirecting the user using some magic link? (What happens if a user is not logged in with Google), also, as you have seen on some websites, when you click on "Add to Outlook," it opens up the Outlook App on Windows, is there any specific API calls required for that?

And also, please consider the edge cases where Outlook is not present on the Device.

Thank you!

[VanshulB]

Hey @Dnouv

I apologise for the delayed reply.

Regarding the Google Calendar Add feature can be done using the Google Calendar API. This API provides a set of RESTful endpoints that allows you to create, update, and manage events in a user's Google Calendar.

In terms of redirecting the user, one approach could be to use the authorization flow provided by the Google API. This would require the user to log in with their Google account and grant permission for the application to access their Google Calendar. Once the user has granted permission, the application can use the API to create the event on the user's behalf.

If the user is not logged in with Google, the application can redirect them to the Google sign-in page. After the user logs in, the application can then request permission to access their Google Calendar.
Same goes for Yahoo as well,

As far as Outlook is concerned, personally I haven't seen any links opening an Outlook Calendar app into my laptop, what I have seen is that it redirects to https://outlook.live.com/calendar/ or in some cases https://outlook.office.com/calendar/ and then it follows the same as the Google calendar one.

Here is a sample link that you can try
https://outlook.live.com/owa/?rru=addevent&startdt=2023-03-10T12:30:00.000Z&enddt=2023-03-10T14:30:00.000Z&subject=Test%20Event&location=Online&body=This%20is%20a%20test%20event%3A%20Test%20Event&allday=false

What do you think about that? Is this correct?

Thank You!

[Dnouv]

Thanks for researching more on this. Please go ahead to implement this component.