disable view change or hide the calendar ribbon

Question

I have added the same calendar twice to a web page as web parts and i have used the target audience options to limit access to certain groups. but what i need to do is hide or disable the option for users to change to different calendar views. even if possible hide calendar ribbon completely(see image below, i want to disable or hide this option from users). i tried adding the following java script but this hides everything including the calendar

 <style>

     #ms-designer-ribbon {
         visibility: hidden;
     }

 </style>

Answer 1

Try the following CSS:

/* Hide Calendar Ribbon Body */
#RibbonContainer ul[id$="Calendar"] {
    display: none !important;
}

/* To hide Calendar Ribbon tab */
#RibbonContainer li[id$="Calendar-title"] {
    display: none !important;
}

You can add the above CSS either to the Script Edito/Content Editor web part or embed into the page.