Proceeding with the appointments with the MGT (Microsoft Graph Toolkit) controls today I want to talk about the Agenda control.
I will not cover in detail the implementation, it’s not the scope of this post, if you’re wondering how to achieve all the steps to enable you to use MGT inside SPFx you can have a look at my previous post or have a look at the code of this sample here.
Starting with the result, the UI of the control is the following:
- All events for the next N days (specified in the configuration pane):
- All events of the next N days and grouped by day:
The code behind this useful component is quite simple, to insert the control in your code you need to install the NPM packages relative to MGT (as before, if you need have a look here), register the SharePointProvider and then insert the Agenda control in the web part code.
To include the control in the web part you have to import it:
import { Agenda } from '@microsoft/mgt-react/dist/es6/spfx';
Once imported you can instantiate it like the following:
<Agenda groupByDay={this.props.groupByDay === true} days={this.props.showMaxDays} eventClick={(e: CustomEvent<any>) => { console.log(e.detail); e.preventDefault(); }} />
In my sample the groupByDay and days properties are bounded to the property pane values, other than that I’ve added an eventClick just to print the event details in the console when clicking on it.
Just for the sake of completeness: here I got an error! 
Of course I missed something, and that something was granting the permission to the app to access the Graph API, as you can see here for the Agenda control to work I need to grant the Calendars.Read permission. If you’re wondering how to achieve this have a look at my recent post, otherwise just go for it!
Hope this helps!
Top comments (0)