Modify Aggregation Panel view

Question

how can I modify aggregation panel items? I need to hide Title of current calendar (see picture below). I've got Sharepoint Online 2013. I try it in Sharepoint Designer. But I don't want to hide all Aggregation Panel, only item "Dovolenkovy kalendar" , which is title of viewed Calendar.

Thank you

Answer 1

You can hide that with the help of CSS as an approach. Before that you need to read this article, In that David has explained how the CSS class is being referred by each of the overlay calendar.

From that I have found that if you place below CSS snippet as a script editor web part on that page or you can place it in your own CSS file.

<style type="text/css">
    .ms-acal-apanel-color { display: none; }
</style>

Make sure this CSS snippet only appears where you want to hide the main calendar item as shown in your snap.

In my example there were two calendars:

As I have inspected on HTML DOM elements found the following:

In above snap you can see in both li elements different class is provided: ms-acal-apanel-color (default calendar color) and ms-acal-apanel-color4 (other overlay calendar color).

I have just applied CSS to hide the first element of that calendar items.

Answer 2

The following jQuery example demonstrates how to hide a specific calendar panel:

function hideCalPanel(name)
{
    var calPanel = $('.ms-acal-apanel-item:contains("' +  name + '")');
    calPanel.parent().hide();
}

hideCalPanel('My Calendar');    //put the proper name of panel here, e.g. Dovolenkovy kalendar

How to apply the changes

1. Open the calendar page in Edit mode
2. Add Content Editor or Script Editor web part on the page
3. Insert the specified JavaScript code by enclosing it using script tag into web part
4. Save the changes