9

I have a Calendar View web part that I've placed in a SharePoint page. Right now it looks like this:

enter image description here

I want to prevent the user from editing the list from here--I have an app that will take care of editing. To accomplish this I want to hide/remove the "+Add" button.

Any idea how to hide/remove it?

I see this question seems similar, but when I tried that solution I still see the "+Add" button. Perhaps I did something wrong? Or do I continue to see the buttons because I have elevated permissions on the SharePoint site?

Improve this question
1
  • 1
    I think the other answer refers to +Add buttons at the top or bottom of list views, not within a calendar.
    – Christophe
    Jun 4, 2014 at 21:29

4 Answers 4

Reset to default
9

Just hiding/removing +Add button, does not prevent the user from creating calendar Events using Calendar View, since the Events could be created by clicking inside calendar area.

So, if you are interested not only in hiding/removing +Add button you could consider the following approach.

How to disable the calendar events

Example 1

ExecuteOrDelayUntilScriptLoaded(function(){

   //Disable calendar events
   $('.ms-acal-rootdiv td').on("mousedown mouseup dblclick mousemove", false);

}, 'SP.UI.ApplicationPages.Calendar.js');

Example 2

$("body").on("mousedown mouseup dblclick mousemove", ".ms-acal-rootdiv td", false);

Usage

  • Add Content Editor on Calendar page
  • Insert the provided JavaScript code:
Improve this answer
10
  • I see what this is trying to do--use JavaScript to modify what the default click event does, and hide the add button. It seems like the right solution for me. Unfortunately, when I placed it in a Content Editor or Script Editor on the page with the calendar nothing seems to happen. "+Add" is still displayed and I can still click to add events.
    – Ectropy
    Jun 6, 2014 at 13:03
  • I'll verify it some later today and get back to you
    – Vadim Gremyachev
    Jun 6, 2014 at 13:32
  • That would be great.
    – Ectropy
    Jun 6, 2014 at 16:30
  • The answer has been updated and it works for me
    – Vadim Gremyachev
    Jun 7, 2014 at 10:13
  • Ok, for some reason it still doesn't seem to have any effect. I wrapped the provided code in <script> tags and tried placing it inside of a content editor (and script editor). The calendar on the page appears to behave normally.
    – Ectropy
    Jun 9, 2014 at 12:48
8

I don't know of a configuration setting that will turn off the Add button in the Calendar but you can hide it by placing a Content Editor web part on the page and adding the following CSS to the Content Editor. Be sure to click the Edit Source button in the ribbon and paste it in the HTML Source.

<style type="text/css">
    .ms-acal-rootdiv A[title="Add"]{ display:none; }
</style>
Improve this answer
1
  • 2
    This technique does successfully hide the "+Add" button, but Vadim Gremyachev is correct in saying that it won't actually prevent people from adding events by clicking on that day on the calendar.
    – Ectropy
    Jun 6, 2014 at 13:05
2

You can use this code : 

<script type='text/javascript'> 
ExecuteOrDelayUntilScriptLoaded(MyCalendarHook, 'SP.UI.ApplicationPages.Calendar.js');
function MyCalendarHook() {                     
    var calendarCreate = SP.UI.ApplicationPages.CalendarContainerFactory.create;
    SP.UI.ApplicationPages.CalendarContainerFactory.create = function (elem, cctx, viewType, date, startupData) {
        cctx.canUserCreateItem = false;
        calendarCreate(elem, cctx, viewType, date, startupData);
    }
}
</script>
Improve this answer
1

Easier way can be set user permisions to this calendar, to "View items" only, then add button will disapear for users

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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