Guest Author: Ryan Wheeler
www.pentalogic.net

Tristan asked in another post: “When a calendar event is being created, I want the end date/time to automatically populate to 1.5 hours after the start date/time.  Seems simple, but haven’t found a formula for this yet.“

Sounds like a pretty reasonable suggestion and the Calendar lists NewForm.asx already sets the Start time to the current time – shouldn’t be too hard, right?…

Using the Default Value setting

You can use formula like (1/24th of a day or 1 hour to the rest of us  is 0.04167!)

=[Created]+0.04167

But we can’t use the Created/Modified field in the formula for a new record because it doesn’t exist yet.

OK, so what if  we try and use this in the Default Value column as

=Today+0.04167

This will always be ‘Today at 1AM’ rather than ‘Today in exactly 1 hour’ as Today uses 12:00 AM as the time offset. Unfortunately there is no [Now] function in SharePoint.

Its a moot point though as we can’t edit the default value of the Start and End times in a Calendar list anyway.

FAIL! On to Attempt #2…

Editing NewForm.aspx

When adding a new record to the Calendar SharePoint uses NewForm.aspx so what about modifying that?

We could use SharePoint Designer to customize NewForm.aspx but its quite complex, lots of people don’t like using it and its fraught with potential problems. Sure it gives us much more power but for our purposes its overkill so we are going to get a little hacky. As it turns out its not the cheerleader who’s going to save the World -  its jQuery!

• Click “New” in your Calendar to open up NewForm.asxp

• Add &ToolPaneView=2 onto the end of the URL to use a neat workaround to open up the list form in edit mode.

• Add a Content Editor Web Part to the page

• Click Open the toolpane or Edit > Modify Share Web Part

• Click Source Editor and paste in the following JavaScript :-

(Tip – if you want to put instructions on your form this is an ideal way to do it – select Rich Text Editor)

    <script type="text/javascript"   src="<A href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js</A>">
    </script>
    <script type="text/javascript"> 

    // Set the hours to add - can be over 24
    var hoursToAdd = 1;
    // Mins must be 0 or div by 5, e.g. 0, 5, 10, 15 ...
    var minutesToAdd = 30; 

    // JavaScript assumes dates in US format (MM/DD/YYYY)
    // Set to true to use dates in format DD/MM/YYYY
    var bUseDDMMYYYYformat = false; 

    $(function() { 

    // Find the start and end time/minutes dropdowns by first finding the
    // labels then using the for attribute to find the id's
    // NOTE - You will have to change this if your form uses non-standard
    // labels and/or non-english language packs
    var cboStartHours = $("#" + $("label:contains('Start Time Hours')").attr("for"));
    var cboEndHours = $("#" + $("label:contains('End Time Hours')").attr("for"));
    var cboEndMinutes = $("#" + $("label:contains('End Time Minutes')").attr("for")); 

    // Set Hour
    var endHour = cboStartHours.attr("selectedIndex") + hoursToAdd;
    cboEndHours.attr("selectedIndex",endHour % 24); 

    // If we have gone over the end of a day then change date
    if ((endHour / 24)>=1)
    {
    var txtEndDate = $("input[title='End Time']");
    var dtEndDate = dtParseDate(txtEndDate.val());
    if (!isNaN(dtEndDate))
    {
    dtEndDate.setDate( dtEndDate.getDate() + (endHour / 24));
    txtEndDate.val(formatDate(dtEndDate));
    }
    } 

    // Setting minutes is easy!
    cboEndMinutes.val(minutesToAdd); 

    }); 

    // Some utility functions for parsing and formatting - could use a library
    // such as www.datejs.com instead of this
    function dtParseDate(sDate)
    {
    if (bUseDDMMYYYYformat)
    {
    var A = sDate.split(/[\\\/]/);
    A = [A[1],A[0],A[2]];
    return new Date(A.join('/'));
    }
    else
    return new Date(sDate);
    } 

    function formatDate(dtDate)
    {
    if (bUseDDMMYYYYformat)
    return dtDate.getDate() + "/" + dtDate.getMonth()+1 + "/" + dtDate.getFullYear();
    else
    return dtDate.getMonth()+1 + "/" + dtDate.getDate() + "/" + dtDate.getFullYear();
    } 

    </script>

A few notes

• You set the number of hours and minutes to add at the top of the script
• You can add more than 24 hours and if you go over a day boundary it will set the end date appropriately.
• This will only work with US MM/DD/YYYY style dates or DD/MM/YYYY (be sure to set bUseDDMMYYYYformat) appropriately – if your site regional settings uses something different then you are going to have to look at a JavaScript date function library such as Matt’s or Datejs.
• If you are doing a lot of this type of thing you may want to check out these two CodePlex projects spjQueryField and SPFF
• If you are going to re-use this script in different areas you should consider placing it in a document library and referencing it using the CEWP “Content Link” as Joels post shows
• This has only been tested on WSS3 & MOSS 2007

Ryan Wheeler worked as an as a developer for an IT consultancy in London, England, for a number of years before leaving his "real job" to set up Pentalogic Technology in 2005. Ryan had experimented with early versions of SharePoint in his consultancy work, and saw the potential for creating add-ons and web parts to enhance SharePoint