2

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

enter image description here

Improve this question
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:

My List of Calendar

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

enter image description here

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.

Improve this answer
  • 1
    Hi Pradip, that's great! It really works! Thank you so much! – David Repka May 7 '15 at 8:56
  • and how can I hide mini calendar in the left corner of window? Can I use the same script with other ID? What's the name of this calendar? – David Repka May 13 '15 at 9:11
  • There should be div with ID DatePickerDiv. You can use that id and specify the css with display: none property. – Pradip R. May 13 '15 at 9:22
  • I've add Script Editor with this: <style type="text/css"> .ms-DatePickerDiv { display: none; } </style> but nothing happend. I see this mini calendar. Any idea? – David Repka May 13 '15 at 10:13
  • Try this: <style type="text/css"> #DatePickerDiv { display: none; } </style> – Pradip R. May 13 '15 at 10:23
1

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
Improve this answer
  • I've use your JavaScript with proper name of panel, bud now I've got one more web part and I always see "Dovolenkovy kalendar". What am I doing wrong way? Please, see pictures below. Thanks – David Repka May 7 '15 at 6:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.