how to change the color of events in Sharepoint Calendar based on the categories

0
votes

I want to have different background colors for the different events based on selected categories

Json that I am using

{
       “$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
       “elmType”: “div”,
       “txtContent”: “@currentField”,
       “style”: {
          “background-color”: “=if(@currentField == ‘Out Of Office - LabOps’, ‘#2BBBAD’, if(@currentField == ‘Out Of Office - Tools & Monitoring’, ‘#4285F4’, if(@currentField == ‘Out Of Office - Billing & Provisioning’, ‘#aa66cc’, if(@currentField == ‘Out Of Office - Infrastructure’, ‘#bbdefb’, if(@currentField == ‘Out of Office - Networking Team’, ‘#cddc39’, ‘’ )))))”
       }
    }

here it is where I am putting my json but it is not working at all

enter image description here

nothing is changing the background color

enter image description here

can anyone help me here I also looked into this solution and tried to get the json and modified the same for me but still not luck https://sharepoint.stackexchange.com/questions/273991/apply-background-color-to-list-using-column-formatting-based-on-text

1
sharepointsharepoint-online

1 Answers

0
votes

@Muhammad,

I remember that column formatting is only available on modern UI. For classical view, please take a reference of below code:

ExecuteOrDelayUntilScriptLoaded(CustomizeCalendarEvents, "SP.UI.ApplicationPages.Calendar.js");
function CustomizeCalendarEvents() {

    //Week or Day Calendar View
    SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids_Old =
        SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids;
    SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids =
        function SP_UI_ApplicationPages_DetailCalendarView$renderGrids($p0) {
            this.renderGrids_Old($p0);

            onCalendarGridsRendered($p0);
        };

    //Month Calendar View
    SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids_Old =
        SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids;
    SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids =
        function SP_UI_ApplicationPages_SummaryCalendarView$renderGrids($p0) {
            this.renderGrids_Old($p0);

            onCalendarGridsRendered($p0);
        };

}

function onCalendarGridsRendered($p0) {
    console.log($p0);

    var DivRenderingInfos = [];
    $p0.forEach(v => { DivRenderingInfos = DivRenderingInfos.concat(v.$5W_0) });
    console.log(DivRenderingInfos);

    var items = [];
    var clientContext = new SP.ClientContext();
    //get calendar list
    var calendarList = clientContext.get_web().get_lists().getByTitle(_spPageContextInfo.listTitle);
    for (var i = 0; i < DivRenderingInfos.length; i++) {
        var eventId = DivRenderingInfos[i].$d_0.$12_0;
        var calendarListItem = calendarList.getItemById(eventId);
        clientContext.load(calendarListItem);
        items.push(calendarListItem);
    }
    //execute query
    clientContext.executeQueryAsync(Function.createDelegate(this, function () {

        for (var i = 0; i < DivRenderingInfos.length; i++) {
            //get icon
            var Category = items[i].get_item('Category')
            if (Category == "Meeting") {
                $(`div.ms-acal-item[_index='${DivRenderingInfos[i].$2C_0}']`).css('background-color', 'blue');
            }
            if (Category == "Work hours") {
                $(`div.ms-acal-item[_index='${DivRenderingInfos[i].$2C_0}']`).css('background-color', 'yellow');
            }
        }

    }), Function.createDelegate(this, function (e) {
        //call original onItemsSucceed
        console.log(e);
    }));

}

Test result:

enter image description here

More References:

BR