Sp-dev-fx-webparts: React Graph Calendar - for Groups?

[elpinto007]

Sample

React Graph Calendar

Authors

@sebastienlevert

Question (the more details, the better)

Hi Sebastien! Awesome work on the React Graph Calendar. I just watched the demo video on Youtube and found it very helpful. I deployed the solution to my tenant but I noticed that the calendar, when I added it to my Team site, did not get the Group events. The fullcalendar view does load, however, the events do not show up.
I thought maybe I needed to enter the group name in the properties, but I saw the properties says "Group Name" which means the web part has not picked up the context or the group ID.

I have not tried to deploy the web part to Teams yet. I need to research and find out how to do this, and was hoping to have it working on SharePoint first before I deploy to a Teams channel.

Question

Is there an additional step I need to take to get the graph calendar working?

Also, is there anything additional I need to do to deploy the solution to Teams?

[msftbot[bot]]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[sebastienlevert]

Did you approved the necessary Graph permissions when deploying the webpart on the tenant app catalog? My feeling is that you are getting unauthorized responses because permissions were not approved.

Let me know how it goes!

[elpinto007]

Did you approved the necessary Graph permissions when deploying the webpart on the tenant app catalog? My feeling is that you are getting unauthorized responses because permissions were not approved.

Let me know how it goes!

Thanks! Good point. I actually did not get a prompt for Graph permissions when I uploaded the app to the app catalog. I will need to do some digging if I need to approve app permissions in AAD

[sebastienlevert]

You don't get prompted in the app catalog, but it tells you to go to your API settings in the tenant Admin Center. Let me know if that makes it work!

[elpinto007]

Thank you! It worked. I needed to go to the API settings in SharePoint admin and grant the permissions there. I dont remember getting a prompt or message to tell me to do that.

[briann5545]

The API settings needs to be included in the instructions as this is not obvious or required for all custom apps. This step is also separate and apart from the share permissions for the app itself in the app catalog. Also, I spent all day trying to package up this app due to numerous errors with npm modules and dependencies' including nodejs, gulp, and graceful-fs. The package.json file needs to be updated and better documentation needs to be included.

[sebastienlevert]

Good catch @briann5545! As this is "only" a sample, we try our best but might be missing some parts. Would you up for the challenge of sending a PR for these documentation changes as you've just went through it? Would love to have your feedback! Thanks!

[briann5545]

I am not a programmer so I am not the best person to figure out all this, I simply wanted the sharepoint app bad enough to spend the time. If you simply follow your instructions and try to package the files you will start to get errors, most of which relate to npm module versions and dependencies. To start with I could only use nodejs version 10.0.23. I have attached the package.json file which has a few edits. I created a npm-shrinkwrap.json file but at the end of the day I’m not sure if that ended up being necessary.

It would be nice if the instructions included the API access step in Sharepoint Online, as well as giving the app catalog site its own separate permissions if you want guest or external users to be able to view the calendar. These permissions are missing by default and even if the external user is a member of the O365 group they cannot see the calendar or any custom app you uploaded to the app catalog unless you add permissions to the app catalog site in the admin portal. I had to change external sharing for the app catalog in the sharepoint admin portal to “new and existing guests”, “Anyone” would not work. I also added permissions for Site Members to “All Users” and Site Visitors to “Everyone except external users”. This was the only way I could get external users (guests) who were members of the O365 group to be able to see the calendar. There was no problem with standard domain group members viewing the calendar.

I would also suggest the instructions included some basic steps such as 1. install nodejs v10.0.23, 2. install gulp v3.9.1, etc… as this was not obvious and if you don’t have these installed you can’t follow your instructions.

If I do another one of these apps I’ll take better notes and post a bug report or something. This react-graph-calendar app is extremely useful.

Thanks
Brian

From: Sébastien Levert [e-mail]
Sent: Tuesday, November 3, 2020 8:00 PM
To: pnp/sp-dev-fx-webparts [e-mail]
Cc: briann5545 [e-mail]; Mention [e-mail]
Subject: Re: [pnp/sp-dev-fx-webparts] React Graph Calendar - for Groups? (#1405)

Good catch @briann5545https://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fbriann5545&data=04%7C01%7C%7Ce10b3e758cf44d26dadf08d8805cf5d8%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637400484026859616%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=NuQGBRDMgqG5LMnvHxWtG1TxE8DONbx9RQMb3v6RzHI%3D&reserved=0! As this is "only" a sample, we try our best but might be missing some parts. Would you up for the challenge of sending a PR for these documentation changes as you've just went through it? Would love to have your feedback! Thanks!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Fissues%2F1405%23issuecomment-721453867&data=04%7C01%7C%7Ce10b3e758cf44d26dadf08d8805cf5d8%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637400484026869611%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=t76NaTWRfFaD9kwrU%2BivJfmexyY4wxYkMUJgq8kqKZA%3D&reserved=0, or unsubscribehttps://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAKZMXD3VPLBZ6I35ELUDY73SOCRRDANCNFSM4PGF2SWA&data=04%7C01%7C%7Ce10b3e758cf44d26dadf08d8805cf5d8%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637400484026879610%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=rU0s8KiHCyvlulRmDJBeVJIXAHaq1zWz%2FFEFAERs2SY%3D&reserved=0.