, ,

Recently I spent some time on developing a resource booking calendar. Use quite lot of JQuery to color the screen, change the feel.

One key find is in the JavaScript you need to be careful about the time for the script to run.

For example, one of the challenges I have is when user double click the calendar, a new event window pop up. but because I have allowed all resources showing. All resources are in the right select box.


so the script I need is to move them to the left select.

Below is the script I am using

<script type="text/javascript">
* Hide form fields in SharePoint 
$(document).ready(function() { 




function MoveResources(){
 $("select[title='Resources selected values'] option").appendTo($("select[title='Resources possible values']"));
 $("select[title='Resources selected values'] option:selected").click();
 $('button:contains("Remove")').attr("disabled", "disabled"); 


You can see from the script, I am using $(document).ready(function() to hide unrequired fields, but you will have to put the code in Page Load Add function.

In most cases SharePoint pages are based on a master page that contains the “body” element. These content pages can’t directly add a function to the body’s onload event. In order to work around this limitation, SharePoint provides the “_spBodyOnLoadFunctionNames” array. When the body is loaded, the onload event handler executes each function whose name is contained in this array. We added “FunctionName” to the array so that it would run when the body’s onload event fires.

<script language="javascript">  
    function FunctionName()  
        // Code