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:

Setting Up Your Calendar in Origami :date: - Watch Video

Adding new events

You can add a new event by going to your SharePoint event list and creating an event there.

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:


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:

  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
    3.3 Check the “Visitors” group, and in the ribbon, click the Edit Permissions button
    3.4 Tick off “Contribute” permissions, and click OK.

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:

In here:
-today - shows today’s 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 read 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:

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:
From here, you can define the list of available categories:

So how do you map colors to those categories?

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

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:

Events showing wrong date or time?

You might need to update your calendar locale setting so calendar knows which timezone you’d like to show.
To do that, go to web part properties and adjust locale as follows: