Upgrade Calendar Feed web part to latest version of SPFx - Refresh Rangers Hacktoberfest Event

[Adam-it]

🎯Aim

The aim of this issue is to upgrade the Calendar Feed web part sample to the latest version of SPFx (1.20)

🤔 Tips how to get started

To support you in this issue you may use the below tooling:

• CLI for Microsoft 365 has a command that will generate upgrade guidance for this SPFx project m365 spfx project upgrade
• SPFx Toolkit VS Code extension has an Upgrade Project action which generates an .md report with upgrade guidance to the latest supported SPFx version

📣 What's this event all about

Refresh Rangers is a unique Hacktoberfest event aiming to update our most popular samples 🚀.
During this, you may obtain a unique Microsoft 365 & Power Platform Community badge - Refresh Rangers 🎖️
To obtain this badge besides opening a PR you also need to opt-in the Microsoft 365 & Power Platform Community Recognition Program and fill out this form

[petkir]

i'll take it @Adam-it

[Adam-it]

i'll take it @Adam-it

all yours 👏👏👏👏

[Adam-it]

@petkir what is the status on this one?
The event is ending with October and this will mean that this won't count toward the Hacktoberfest event if you participated in this one (here there is nothing we may do about it)
BUT a PR for this issue will be created even after October this will still count to get the Refresh Ranger badge from the Microsoft 365 and Power Platform Community

[petkir]

@Adam-itit's coming only Outlook feed is missing the other 3 providers work already. give me some time for the PR

[petkir]

Hi @Adam-it

Currently, the following providers are implemented:

• SharePoint: Same domain requests are working.
• iCAL / RSS / WordPress: Mostly functional, but dependent on CORS settings.
• Exchange Calendar Feed: Not working due to CORS issues.

Problem Description:

Originally, to avoid CORS problems, a proxy provider was used, but it returns Access-Control-Allow-Origin: *.
This does not accapt my Edge Browser on a SharePoint Page.
When I set the fetch mode to mode:'no-cors', I receive a successful response of type response.type === 'opaque'.
While this allows me to download the data to the client, but I'm unable to manipulate the data using JavaScript.

I have experimented with other proxy providers and various Edge plugins, but none have proven to be effective solutions.

One potential solution I see is starting a web browser on localhost to make the request. However, there are no existing examples in this sample gallery that include an additional Azure function or something else.

on the other hand removing support for the Exchange Calendar Feed is also a solution, as it is referred to as the Exchange Public Calendar so ...

So what do you think @Adam-it : self-hosted proxy or remove the Exchange iCal support?

after playing hours i would remove the support for EX, because this is a thing of minutes.

[Adam-it]

@petkir sorry for the late reply 🙏 and thank you for an awesome analysis on this and sum up.
TBH I am also not sure what would be the most preferable approach and I would leave it to the authors of this sample to decide. From what I see it is you and @hugoabernier so... 🙂
But If you want any feed from my side I would suggest the easiest path possible so for now removing the support to Exchange iCal. Usually when a sample is to complex and requires additional setup which is not described in the readme or added with the sample then it is rather not usable. Ideally a sample should be easy to start, use, and extend for your needs if someone will want to do that.

[hugoabernier]

I am OK with removing the support for Exchange

[petkir]

I will do it next week thanks @hugoabernier

[Adam-it]

hey @petkir there is no pressure or priority on this issue but I was wondering if you have any updates on this case?