jQuery to the Rescue – Automate All Day Event
Contributing Author: Jim Bob Howard
Jim Bob Howard is a web designer / web master in the healthcare industry. He has been working with SharePoint only since March 2009 and enjoys sharing what he has learned. You can email him at jimbobhoward@gmail.com.
I was working on a mileage reimbursement project that required a user to associate travel mileage with a specific date. To make things easy for the user, I wanted to use a Calendar list so they could easily choose a travel date. That would also give me built-in date validation and makes things easier all around.
But, there were some things I didn’t need: Recurrence, Workspace, End Time, or times in general. I wanted the functionality of an All Day Event so that specific times were not necessary. And I only wanted one date associated with the mileage entry.
So, I hid the End Time and set up a workflow to copy the Start Time into the End Time on create. Since it defaults to [Today], its “requiredness” is satisfied by default.
I also wanted Recurrence and Workspace hidden, as well as the time portion of Start Time. And I needed the All Day Event to be checked automatically, and then hidden so it couldn’t be unchecked.
jQuery to the rescue again.
- Enter edit mode on NewForm.aspx, by adding ?PageView=Shared&ToolPaneView=2 to your URL
- Add the Content Editor Web Part and move it to the bottom of the page
- Click on Source and enter the following text
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('td.ms-dttimeinput').hide(); //hides the times on Start Time
$('span[title=All Day Event] > input').attr("checked","checked"); // checks All Day Event
//hide all of the check-boxes I don’t need
$('tr:has(span[title=Recurrence])').not('tr:has(tr)').hide();
$('tr:has(span[title=All Day Event])').not('tr:has(tr)').hide();
$('tr:has(span[title=Workspace])').not('tr:has(tr)').hide();
});
</script>
You’ll need to do something similar to your EditForm.aspx:
- Enter edit mode the same way was above, leaving the ID=x and changing the ‘?’ before PageView to an ‘&’ (i.e. ../EditForm.aspx?ID=1&PageView=Shared&ToolPaneView=2)
- Add the Content Editor Web Part and move it to the bottom of the page
- Add the same jQuery code from above, but delete the first two lines in the function (since it’s already an All Day Event, there’s no need to set it, and the times will already be hidden)
DispForm.aspx will be slightly different because the HTML is different:
- Enter edit mode the same way you did for EditForm.aspx
- Add the Content Editor Web part and move it to the bottom of the page
- Add the following code to the Source
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//hide all of the check-boxes I don’t need
$('tr:has(td[id=SPFieldAllDayEvent])').not('tr:has(tr)').hide();
$('tr:has(td[id=SPFieldRecurrence])').not('tr:has(tr)').hide();
$('tr:has(td[id=SPFieldCrossProjectLink])').not('tr:has(tr)').hide();
});
</script>
This solution does leave 12:00 AM on the Start Time (on DispForm only) so I’d love to see a solution for removing that as well.
- jQuery to the Rescue - Automate All Day Event
- jQuery to the Rescue - Default Text Based on Radio Button Click
- jQuery to the Rescue: Writing a Survey ID to a List on Response Creation (w/o Workflow)
Great trick. I can definitely see the benefit of simplifying the form for non tradition uses like what yours.
Got any others you are willing to share?
When I do, be assured I will submit them to Mark for posting. ;)
Glad you found it useful.
Blessings,
Jim Bob
Your article looks something like I wanted to do.
I just want to copy a calculated field into the calendars “end time” field.
Any ideas?
Hi,
I am just starting to look at JQuery as a potential solution to a number of customizations I am hoping to implement on a list.
As a background the list has a number of types of entries and depending on the type I need to hide particular fields (On the edit and view forms) and potentially set different defaults including defaults of hidden fields.
From this article I am getting the impression that JQuery could be my saviour. I believe I can potentially implement what I need to do using a workflow approach but not sure if I wish to go that route.
Your feedback would be appreciated.
Jim Bob Howard,
You said in the script above:
“So, I hid the End Time and set up a workflow to copy the Start Time into the End Time on create. Since it defaults to [Today], its “requiredness” is satisfied by default”.
Can you share how the workflow is set up to copy the start time into the End Time? I want to something similar – copy a calculated field into the end time via a work flow.
Any hepl would be greatly appreciated, Jim Bob.
Hi Jim Bob,
You can hide a number of the columns permanently by editing the list settings, advanced settings, and changing allow management of content types to yes. Return to your list settings and then click on the content type (event, item, etc..), from there you will be able to edit properties such as required, optional, and hidden. That recurrance and workspace hiding code is a godsend though because for the life of me I can’t get those columns hidden!
@Tom – not sure if this will help you but I’ve used a similar technique (JavaScript in CEWP) to set he default duration (EndTime = StartTime + 1.5 hours)
http://blog.pentalogic.net/2009/09/setting-default-duration-for-new-calender-events/
Ryan, this looks like what I’ve been struggling to find. I’ll give it a try. However, when I last tried to change the End Time to a new calculated time the workflow did not see in its menu areas the End Time. I’ll look again.
Wow! This is my first exposure to jquery… and… Wow!
Does it support regular expression work? This might be a way to segregate the time portion on the display form and kills it.
Jim,
This is great. However, the requirement is to have the All Day Event appear on the newform.aspx with the All Day Event box checked as this jquery will assist with. How can we modify so the user can deselect if need be? Right now it stay’s checked and you can unselect the check box.
Any assistance appreciated.
Hey Paul,
Just remove the line that hides it.
`$(’tr:has(span[title=All Day Event])’).not(’tr:has(tr)’).hide();`
That should allow the user to uncheck it.
Blessings,
Jim Bob
This is the first thing I tried. From what I can see once I deselect it will do so but the Jquery script will run again immediately after and it will populate the box with a check box. Wouldn’t the line above just control whether the All Day Event Appears? What about behavior of the check attribute?
Everything works great on DispForm.aspx and NewForm.aspx, but I’m having a problem with the Page Editing Toolbar persisting when I modify EditForm.aspx using the &PageView=Shared&ToolPaneView=2 method.
The only other reference I’ve seen to this issue is here: http://social.msdn.microsoft.com/Forums/en-CA/sharepointcustomization/thread/e10ad027-c28a-43ab-8b48-bb02dc3ca782
Any help would be greatly appreciated. I’ve spent quite a few hours researching this issue and it’s a bit frustrating b/c it works so beautifully on NewForm.aspx and DispForm.aspx.
Cheers,
AJ
Hello J.B.
I’m needing to set the default on “All Day Event” to checked/yes. Unfortunately, the script included in this post is not included (lost in EUSP transition?). I’m looking to default All Day event to checked/yes, keep Recurrence and hide WorkSpace.
Can you help me out with the scripting?
Thank You
Dave M
David – Should be available now. — Mark
Thanks, Mark!
David, let me know if you need any further assistance.
Blessings,
Jim Bob