Color Calendar

The Color Calendar Web Part displays the color-coded appointments of the selected Sharepoint Calendar.
The web part size can be freely specified which allows to create a "mini" calendar.

You can configure the following web part properties:

  • calendar size
  • hide or show weekends
  • configure CSS settings for individual formatting


Download and extract the current version of the WebPart.
Navigate to the App Catalog, upload the .sppkg file.
The Dialog will ask you about the deployment method and offer you the ability to deploy the Solution to all Sites (Checkbox).
now the WebPart is available to attach it to a WebPart zone as needed

Web Part Settings

Web Part Settings

Site: Select a listed Site, where the Calendar is located in
Other Sie Url: If you like to specify a URL/Site, use this field
Calendar: Select your Calendar
Calendar Width (px): Set the Width of the Calender.
Calendar Height (px): Set the Height of the Calender.
Category Colors: Each Category will be displayed in another Color
Show Details View Link: Enable a detailview on Mouse hover
Show Weekends: Enable or disable Weekends in the displayed section
Show Category Legend: Enable or disable the legend for the Category Colors 
(I.E: Business=tomato;Meeting=red;Get-together=#00be9c;Holiday=#efc94c)
CSS Styles: Select a Class / ID and manipulate the object with CSS.
Options: Specified different working mechanism by Options (List below).
License Key: Enter your license Key.




Product Price
AE Color Calendar SPFx Version Free download..
AE Color Calendar SPFx USD 90.00

Leave a Reply

5 Comments on "Color Calendar"

Notify of
Sort by:   newest | oldest | most voted

I have downloaded, and deployed to my O365 tenant and was set to test but received an error stating [SPLoaderError.loadCompnentError]:
***Failed to load component “xxxxxxxxxxxxxx” (AEColorCalendarWebPart).
There is much more, however I am unable to highlight and copy and paste the text.

Issue fixed! Thanks for quick response!

Is there a way to display a specific view of my calendar? (I can see there is no obvious option, but is there a way to do it via the ‘Options’ field perhaps?

there is currently no option to specify a specific calendar view.
We will be going to add this option in the web part’s next major release (due in March 2018).