Using Javascript to change the view on a calendar web part

Question

I found a very simple snippet that I can add to a CEWP that changes the view in a calendar web part from Day, Week and Month. This is for an external facing SharePoint site and the ribbon will not be available.

<div style="float:right">
<div style="float:left; padding-right:10px;">
 <a onclick="javascript:MoveView(&#39;day&#39;);" href="#">Day View</a> 
</div>
<div style="float:left; padding-right:10px;">
 <a onclick="javascript:MoveView(&#39;week&#39;);" href="#">Week View</a> 
</div>
<div style="float:left; padding-right:10px;">
 <a onclick="javascript:MoveView(&#39;month&#39;);" href="#">Month View</a> 
</div>
</div>

This works great until I add more calendars on my page. My snippet only works for the first calendar that was added and not the other calendar web parts.

After some searching, I figured out how to reference the specific calendar web part I wanted to change by using .getElementById using javascript. I tested by using the following funtion to hide the web part, this ensured that I was able to reference a specific web part.

<script language='javascript' type='text/javascript'> 
function myFunction()
{
document.getElementById("MSOZoneCell_WebPartWPQ6").style.display='none';
}
</script>

<input type="button" onclick="myFunction()" value="Show alert box" />

Again this worked just fine, however I am at a loss on how to combine the two to make everything work together.

I plan to use two or maybe more different calendar web parts, each with it's own CEWP above it that will contain the javascript to change the view.

Any help will be greatly appreciated.

Answer 1

This question was answered HERE by Huxly.

---

The MoveView function that you are calling is defined like this inside core.js-

function MoveView(viewtype)
{ULSsa6:;
    _MoveToViewDate(null , viewtype);
}

As you can see above, it calls the function "_MoveToViewDate" shown below -

function _MoveToViewDate(strdate, view_type, ctxid)
{ULSsa6:;
    if (FV4UI() && typeof(_fV4Calendar) !="undefined" && _fV4Calendar)
    {
        var fn=function(){ULSsa6:;
            var ctrl;
            if (ctxid)
                ctrl=SP.UI.ApplicationPages.CalendarInstanceRepository.lookupInstance(ctxid);
            else
                ctrl=SP.UI.ApplicationPages.CalendarInstanceRepository.firstInstance();
            if (ctrl){
                if (view_type !=null)
                    ctrl.moveToViewType(view_type);
                else
                    ctrl.moveToDate(strdate);
            }
        };
        AjaxCalendarCall(fn);
    }
    else
    {
        MoveToViewDatePostBack(strdate, view_type);
    }
}

As you can see that since ctxid is null, the above function automatically works on the first instance of calendar on the page.

To overcome this, call the following function directly -

 _MoveToViewDate(strdate, view_type, ctxid)

For ex - In your case for day view, use - _MoveToViewDate(null, 'day', ctxid) instead of MoveView('day')

Now coming to the ctxid - You can easily find it by searching for ctxid inside the html source of that page for that particular calendar that you wish to modify. You can also fetch it through jquery easily.

Narahari