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.




AE Color Calendar SPFx Version
AE Color Calendar SPFxUSD 90.00

Leave a Reply

9 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
7 Comment authors
newest oldest
Notify of

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).

Sagar Vadalia

Hi, Is there way to default a view to week or day? Right now it is set to month. Will there be option to select list view or filtered view?


Can you add the ability to color code based on another column instead of Category? For example there is a STatus column of Not Started, In Progress and Complete and we want to color red for not started, green for complete and yellow in progress? Or have it red if end date is past due color red?

Also, how does this handle recurring items?


wan i click on the item i get an error “404 NOT FOUND”.
the link to the item isn’t correct.
the list name and the URL of my list is not the same.
the list title is “On Call Calendar ”
and the URL is “/Lists/IT_OnCall/”
how can i fix this error ?



we have now added the new “listname” option (to be added to the web part’s “Options” setting) to allow you to specify the internal name of the list.

Please download the below update:

extract the sppkg file and upload it to the Sharepoint App Catalog.

Please then enter the below into the web part’s “Options” setting: