Remove click events and disable anchor tags in a SP2010 calendar view

I got a request from Larry Pfaff:

…Can all the links be disabled on a calendar view and allow navigation between months for sp 2010?

A bit back and forth between Larry and me produced this code:

<!-- refer jQuery -->
<script type="text/javascript">
 
$(".ms-acal-rootdiv").bind("click dblclick",function(){
            return false;
});
 
setInterval(function(){           
            $(".ms-acal-item [bricked!='1']").each(function(){    
                        $(this).attr("bricked","1").bind("click dblclick",function(){              
                                    return false;
                        });
            });
            // Single day events
            $(".ms-acal-sdiv a").each(function(){
                        var text = $(this).text();
                        $(this).before(text);
                        $(this).remove();
                       
            });
            // Events spanning multiple days
            $(".ms-acal-mdiv a").each(function(){
                        var text = $(this).text();
                        $(this).before(text);
                        $(this).remove();
                       
            });
 
},500);
</script>

Put it in a HTML Form web part – or link it from a CEWP placed below the calendar view.

This code is tested in SP 2010 only.

Alexander

9 Comments on “Remove click events and disable anchor tags in a SP2010 calendar view”

  1. Hi Alex, Thanks, it works perfect! Can I request you to add more features on it. If the user has only RO (view only) access, it blocks the links. If the user has RW (control) or full control, it won’t block the link. Many thanks

  2. Pingback: Remove click events and disable anchor tags in a SP2010 calendar view | SharePoint 2013 Development

  3. Hey Mate,
    Strange, I am still able to click on each of the link even I used your jquery. I put it insider of HTML Form web part.

    I am using calendar overlay and I want to remove all link so can you please help??

    Thanks in advance

    1. Hi,
      Calendar views can be a bit tricky because they are dynamic, and updated may change the HTML so that a solution does not work anymore.

      Unfortunately I’m quite busy and cannot dig into it reight now. My best tip is to use the developer tools (hit F12) to inspect the element and try to read the code example above to figure it out.

      Alexander

  5. Hi man,
    worked like charm…but you used setinterval so that the script’ll run after the page load..instead you can use window.load function..so always the script will run after page load completion.

  7. When I debugged the code, the text was keep on getting updated or the Method keep on running due to SetInterval.

    So I set a variable for Unbricked link count. When It’s Zero then I invoke clearInterval method. So the method won’t run forever.

    var tmrUpdateLinks = setInterval(function(){

    $(“.ms-acal-item [bricked!=’1′]”).each(function(){
    intNoOfLinksNotUpdated++;
    $(this).attr(“bricked”,”1″).bind(“click dblclick”,function(){
    return false;
    });
    });
    // Single day events
    $(“.ms-acal-sdiv a”).each(function(){
    var text = $(this).text();
    $(this).before(text);
    $(this).remove();

    });
    // Events spanning multiple days
    $(“.ms-acal-mdiv a”).each(function(){
    var text = $(this).text();
    $(this).before(text);
    $(this).remove();

    });

    if(intNoOfLinksNotUpdated == 0)
    {
    clearInterval(tmrUpdateLinks);
    }

    },500);

    Thanks for code.
    Regards,
    Venkatesh R

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.