Open SharePoint 2013 Calendar Event in Modal Dialog

How to Open SharePoint 2013 Calendar Event in Modal Dialog


Step 1: Create a SharePoint Calendar list and Add an event there as below.




Step 2: Edit list, add Script Editor Web Part to it and paste the below code.



Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        setInterval(function () {
            $("a[href*='DispForm.aspx']").each(function () {
                $(this).attr("onclick", "openDialog('" + $(this).text() + "','" + $(this).attr("href") + "')");
                $(this).attr("href", "javascript:void(0)");
                $(this).removeAttr("target");
            });
        }, 900);
    });

    function openDialog(title, url) {
        var options = {
            title: "Calendar - " + title,     
            height: 400,
            width: 400,  
            autoSize:true,        
            url: url
        };
        SP.UI.ModalDialog.showModalDialog(options);
    }
</script>



Comments

Popular posts from this blog

How to Customize exported excel's cell background color in Datatables

Customizing SharePoint list and implementing Quick search using jQuery

Populate dropdown using jquery ajax in SharePoint