Skip to content

Latest commit

 

History

History
 
 

react-personal-calendar

README.md

Personal Calendar web part

This web part provides you the ability to add a particular user's personal calendar on a web page. The web part may be configured to automatically refresh, as well as display up to seven days of events and a pre-defined number of events at a time. This web part is powered by the Microsoft Graph.

This webpart is a technology demostrator of Microsoft Graph Toolkit React components, in particular "Agenda". This webpart uses the @microsoft/mgt-react and @microsoft/mgt-spfx packages, currently version 2.9.0.

NOTE: This webpart includes the use of a custom SPFx library, library-starter-kit-shared. If you need to rebuild / bundle / package this solution, refer to Minimal Path to Awesome

NOTE: This webpart includes the use the Microsoft Graph Toolkit with React, @microsoft/mgt-react.

NOTE: This webpart includes the use the Microsoft Graph Toolkit with React SPFx, @microsoft/mgt-spfx with a dependency on mgt-spfx-2.9.0.sppkg that must be installed to the tenant app catalog. By default the Starter Kit will install this additional dependency.

Personal Calendar

How to use this web part on your web pages

  1. Place the page you want to add this web part to in edit mode.
  2. Search for and insert the Personal Calendar web part.
  3. Configure the web part to update its properties.

Configurable Properties

The Personal Calendar web part can be configured with the following properties:

Label Property Type Required Description
Upcoming Events title string no The web part title, editable inline with the web part itself
How often to check for new upcoming meetings (in minutes) refreshInterval number no Default: 5 - the interval in minutes between auto refresh
How many days in advance to retrieve meetings for? 0 - today only daysInAdvance number no Default: 0 (Today only) - the interval in minutes between auto refresh
How many meetings to show? 0 - show all retrieved meetings numMeetings number no Default: 0 (all) - the interval in minutes between auto refresh
Show Calendar showCalendar bool no Show or hide the calendar component

Used SharePoint Framework Version

drop

  • Supported in SharePoint Online

Applies to

Prerequisites

  • library-starter-kit-shared - must be installed to the tenant app catalog. By default the Starter Kit will install this additional dependency. If you need to rebuild / bundle / package this solution, refer to Minimal Path to Awesome

  • mgt-spfx-2.9.0.sppkg must be installed to the tenant app catalog. By default the Starter Kit will install this additional dependency.

Minimal Path to Awesome

This solution uses a SPFx library, library-starter-kit-shared. As such, additional steps are required to rebuild this project.

  1. Clone this entire project
  2. Within the library-starter-kit-shared source, i.e. ./source/library-starter-kit-shared
npm install
gulp build
gulp bundle
npm link
  1. Within this SPFx solution folder react-personal-calendar, i.e. ./source/react-personal-calendar
  • in the command line run:
npm install
npm link @starter-kit/shared-library
  1. Edit package.json found at the root of the react-personal-calendar, i.e. ./source/react-personal-calendar/package.json
  • Add a new dependancy to the project: "@starter-kit/shared-library": "3.0.0"

Example:

  "dependencies": {
    "@microsoft/mgt-react": "2.9.0",
    "@microsoft/mgt-spfx": "2.9.0",
    ...
    "react": "17.0.1",
    "react-dom": "17.0.1"
  }

to:

  "dependencies": {
    "@microsoft/mgt-react": "2.9.0",
    "@microsoft/mgt-spfx": "2.9.0",
    ...
    "react": "17.0.1",
    "react-dom": "17.0.1"
    "@starter-kit/shared-library": "3.0.0"
  }
  1. Within this SPFx solution folder react-personal-calendar, i.e. ./source/react-personal-calendar
  • in the command line run:
gulp serve
  1. To rebundle the webpart, within this SPFx solution folder react-personal-calendar, i.e. ./source/react-personal-calendar
  • in the command line run:
gulp bundle
gulp package-solution

If you add this webpart's sppkg to your app catalog, the sppkg for the shared library must also be installed. The library may be built, bundled, and packaged similar to a standard SPFx webpart or extension.

The package.json within this SPFx solution file must be manually updated for if the library dependency was included by default with the project, npm install would fail as the library-starter-kit-shared package would not be found. Linking the two projects allows this webpart to reference the library during development, while the package.json reference is required for bundling and packaging.

Features

Description of the web part with possible additional details than in short summary. This Web Part illustrates the following concepts on top of the SharePoint Framework:

Solution

Solution Author(s)
react-personal-calendar Waldek Mastykarz
react-personal-calendar Beau Cameron
react-personal-calendar Eric Overfield

Version history

Version Date Comments
1.0 May, 2018 Initial release
2.0 November 29,2019 v2.0
2.1 November 2020 Include Microsoft Graph Toolkit React components
2.3 August 2021 Upgrade to MGT 2.2.1
3.0 February 2023 Upgrade to SPFx v1.16.1

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.