none
How to refence a specific web part on a page using Javascript

    Question

  • hello everyone,

    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 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.

    Can someone help me modify my snippet so that it can point and change the view of a specific web part.

    Thanks in advance.

    Here is my current snippet:

    <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;month&#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>


    • Edited by Huxly Tuesday, August 13, 2013 6:14 PM
    Tuesday, August 13, 2013 6:14 PM

Answers

  • Hi,

    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, &#39;day&#39;, ctxid) instead of MoveView(&#39;day&#39;)

    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

    ******If a post answers/helps your question, please click "Mark As Answer" on that post and/or "Vote as Helpful*******


    • Marked as answer by Huxly Thursday, August 15, 2013 5:20 PM
    Tuesday, August 13, 2013 10:57 PM

All replies

  • I got a little bit further, I was able to figure out what the id of the web part is. I tested this by hiding the calendar web part using a Javascript function successfully. The funtion is shown below.

    However, I'm at a loss on how to use my function to change the view of the calendar web part.

    Javascript Function:

    <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" />

    I replaced the part of the function where it says: .style.display='none';

    I replaced it with the following: .MoveView='week';

    This is not giving me any errors on the page, however the view is not changing.

    Can anyone help?

    Thanks again!

    Tuesday, August 13, 2013 8:17 PM
  • Hi,

    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, &#39;day&#39;, ctxid) instead of MoveView(&#39;day&#39;)

    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

    ******If a post answers/helps your question, please click "Mark As Answer" on that post and/or "Vote as Helpful*******


    • Marked as answer by Huxly Thursday, August 15, 2013 5:20 PM
    Tuesday, August 13, 2013 10:57 PM
  • thanks a lot, this worked perfectly and was exactly what i needed!

    Thursday, August 15, 2013 5:21 PM