+
+ {this.state.currentSelectedEvent &&
+
+ Start Time
+ {moment(this.state.currentSelectedEvent.start).format('MMMM Do YYYY [at] h:mm:ss a')}
+ Start Time
+ {moment(this.state.currentSelectedEvent.end).format('MMMM Do YYYY [at] h:mm:ss a')}
+ {this.state.currentSelectedEvent.extendedProps["location"] &&
+
+
Location
+ {this.state.currentSelectedEvent.extendedProps["location"]}
+
+ }
+ {this.state.currentSelectedEvent.extendedProps["body"] &&
+
+
Body
+ {this.state.currentSelectedEvent.extendedProps["body"]}
+
+ }
+
+ }
+
+ );
+ }
+
+ /**
+ * Calculates the dynamic height of the surface to render.
+ * Mainly used for Teams validation so it renders "full-screen" in Teams
+ */
+ private _calculateHeight(): number {
+ if(this._isRunningInTeams()) {
+ return window.innerHeight - 30;
+ } else {
+ return 600;
+ }
+ }
+
+ /**
+ * Validates if the current web part is running in Teams
+ */
+ private _isRunningInTeams() {
+ return this.props.teamsContext;
+ }
+
+ /**
+ * Handles the click event and opens the OUIF Panel
+ * @param eventClickInfo The information about the selected event
+ */
+ private _handleEventClick(eventClickInfo: any) {
+ this.setState({
+ isEventDetailsOpen: true,
+ currentSelectedEvent: eventClickInfo.event
+ });
+ }
+
+ /**
+ * If the view changed, reload the events based on the active view
+ * @param info Information about the current active view
+ */
+ private _datesRender(info: any) {
+ if(this.calendar.value) {
+
+ // If the active view has changed
+ if((this.state.currentActiveStartDate && this.state.currentActiveEndDate) && this.state.currentActiveStartDate.toString() != info.view.activeStart.toString() && this.state.currentActiveEndDate.toString() != info.view.activeEnd.toString()) {
+ this._loadEvents(info.view.activeStart, info.view.activeEnd);
+ }
+ }
+ }
+
+ /**
+ * Handles the resize event when in Microsoft Teams to ensure a proper responsive behaviour
+ */
+ private _handleResize() {
+ if(this._isRunningInTeams()) {
+ this.setState({
+ height: window.innerHeight - 30
+ });
+ }
+ }
+
+ /**
+ * Loads the Events based on the current state of the Calendar
+ * @param startDate The first visible date on the calendar
+ * @param endDate The last visible date on the calendar
+ */
+ private _loadEvents(startDate: Date, endDate: Date): void {
+
+ // If a Group was found, execute the query. If not, do nothing.
+ if(this.state.groupId) {
+
+ this.props.context.msGraphClientFactory
+ .getClient()
+ .then((client: MSGraphClient): void => {
+
+ client
+ .api(`/groups/${this.state.groupId}/events`)
+ .version("v1.0")
+ .select('subject,start,end,location,bodyPreview,isAllDay')
+ .filter(`start/dateTime ge '${startDate.toISOString()}' and end/dateTime le '${endDate.toISOString()}'`)
+ .top(this.props.limit)
+ .get((err, res) => {
+
+ if (err) {
+ console.error(err);
+ return;
+ }
+
+ var events: Array