The Story
If you’ve been working with SharePoint you might have been working with calendar lists already. This is an easy to use way to add events to a web-based calendar. Like Outlook this features a checkbox to mark an event as a full-day event and thus omitting the start and end time (actually that’s not correct, behind the scenes the event starts ad 00:00 and ends at 23:59).
Recently someone asked on how to add a functionality like the full-day feature, but for half-day events. So you could just select wether an event should take place in the morning or in the afternoon.
That sound fairly simple to do.
How it’s done
OK, so I start by creating a new calendar from scratch. Next move to add an new item – and this is where we want to make our modifications to the form to allow selecting half-day events.
Because this view can not be edited directly in the browser you have to tweak SharePoint a little bit by altering the URL by adding toolpaneview=2 to the querystring.
Next you drag a content-editor-webpart below the editform and switch to the HTML source view.
I usually keep a copy of jQuery around, so I just add
<script language="javascript" src="/_layouts/jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>
in the source-view. You might have to adjust the URL pointing to jQuery at this point. If you have no access to the file-system on your SharePoint server you could also just create a document library and place the jQuery library there and put the path in the above reference.
Next we add two buttons (this might not be the most pretty solution, but this is mostly about showing how this could be done!).
<input type=button value="morning" id="btnMorning"> <input type=button value="afternooen" id="btnAfternoon">
So the final step would be to hook to the click-events of the two buttons. Whenever one of the buttons are pressed, we just change the hour-selection for the start end end time of the event.
So the complete source looks like this:
<script language="javascript" src="/_layouts/jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>
<input type=button value="morning" id="btnMorning">
<input type=button value="afternoon" id="btnAfternoon">
<script language="javascript">
var startTime = $("#" + g_strDateTimeControlIDs["SPEventDate"] + "Hours");
var endTime = $("#" + g_strDateTimeControlIDs["SPEndDate"] + "Hours");
$("#btnMorning").click(function() {
startTime.val("08:");
endTime.val("12:");
});
$("#btnAfternoon").click(function() {
startTime.val("12:");
endTime.val("18:");
});
</script>
Neat, if I may say so myself!
