Calendar (color-coded SharePoint calendar / Microsoft 365 Group calendar)

Calendar web part shows rolled up, color-coded events from any SharePoint site or Microsoft 365 group. Users can pick any date or range and RSVP for an event.

Here is an example of the Calendar web part:

All the event content such as Categories, Events, and Dates come from your existing Events list, so it’s easy to just add the web part to the page and it’ll pull events right in.

The link will take users to familiar SharePoint event page:

Setting up the web part

Edit the page where you want to see the Calendar, and pick this app from the gallery:
image

Adding new events

You can add a new event by editing the page where the Calendar web part is on, going to web part properties and clicking the Add an Event button:
image

Tracking RSVPs

Knowing who’s coming to an event can help organizers plan seating, food and other logistics.
Here is an example of how some one can RSVP for an event:
image

image

Here is how to enable this:

  1. In Calendar web part properties, click Enable RSVP

  2. Click the Create RSVP List button. All RSVPs will be tracked in RSVP list on the SharePoint site.
    You can access the list directly from Site contents or by clicking See All RVSPs as shown below:
    image

  3. Finally, ensure users can “write” to RSVP list
    3.1 From the RSVP list, click (*)List settingsPermissions for this list
    3.2 In the ribbon, click Stop Inheriting Permissions
    image
    3.3 Check the “Visitors” group, and in the ribbon, click the Edit Permissions button
    image
    3.4 Tick off “Contribute” permissions, and click OK.
    image

Setting default date range

By default, the web part will show readers any events from today’s date to the end of the month.
You can change that by going to web part properties and selecting:
image

In here:
-today - shows todays events
-this week - shows all events from today until 7 days from today
-this month(default) - shows all events from today till the end of the month
-this quarter - shows all events from today until last days of month 3 from now
-this year - shows all events from today till the end of the year

You may want to tweak this depending on the volume of events you have posted on your site

Reading Events from another site or Microsoft 365 group

The calendar can ready from:

  • URL of any SharePoint site
  • Microsoft 365 Group

All events will be rolled up in a single view as long as the user has access to them.

To set that up, navigate to the web part properties as shown below to pick the source for your events:
image

In case you need to read the events from a Microsoft 365 Group, you’ll also need your IT administrator perform these one-time steps: Enabling Calendar web part to read from Microsoft 365 group

Multiple calendars on a single site

You can have more than one calendar showing events from separate Calendar lists.
To do that, first we need to create a second calendar list:

  1. Click (*)Site contents
  2. Find the Events list, click on (…) next to it, and select Details
  3. Click the Add It button and when prompted, give your new calendar a name. For example: HR Calendar
  4. Click Create

Now you can populate this list as you see fit.
To link this new list to a different calendar on your page

  1. Add the Calendar Origami web part

  2. In the web part properties, under Source of Events, set the Calendar list with the same name as given in step 3 earlier. For example: HR Time Off

  3. Save the page and you’re all set.

Color coding your calendar

You can color code each category in your calendar.
By default, Events list already has categories defined, and you can change them by going to Events list settings, like this:
image
From here, you can define the list of available categories:
image

So how do you map colors to those categories?

Simply go wo Origami Calendar web part properties and click this button:
image

From here you can map each category to any desired color:

Save the web part properties and the page to see changes.

Changing calendar styles

In addition to color coding your events, you can also change the date picker colors using these web part properties, web part height and other options as shown below:
image