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 [email protected].
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)
- jQuery to the Rescue: Requesting a review only once per user
- jQuery to the Rescue: Displaying/Hiding Content based on User Permissions or "When Edit Items permissions don't work..."
- jQuery to the Rescue: Labeled Sections on Default Forms
on
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
Thank you Jim for providing such a great solution to hide the “Recurrence ,All Day Events ,Workspace”.
but would you please , provide me more details on how did you hide the End Time and set up a work flow to copy the Start Time into the End Time on create .
I have the same question as deepak. Could you kindly respond?
Deepak and Beth,
Turns out that wasn’t as easy as I made it sound. Sorry about that. I have some deadlines approaching that will keep me from spending any time on this for a bit, but if you post your request in the the Stump the Panel forum, someone there should be able to help you accomplish your goal.
Blessings,
Jim Bob
The jquery code to check the all day event works great but when you check the all day event it causes a postback which the cause the script to rerun and check the all day event. Does anyone have a solution which will will check the all day event but also allow you to uncheck the all day event. It would be very much appreciated.
Steve,
Sorry it’s taken me so long to get back to you on this. I just saw your comment again after having answered that same question on STP. Here’s the solution I came up with:
http://www.endusersharepoint.com/STP/viewtopic.php?p=6542#p6542
Hope that helps.
Blessings,
Jim Bob
Is it possible to hide the Start Time and End time fields on the display form? I have a calculated field that displays just the date can I hide it? What’s the field id?
Dear Stefanie,
Here is an easy way to hide fields on DispForm.aspx with jQuery is:
$(”a[name$='StaticName']“).closest(’tr’).hide();
…where ‘StaticName’ is the internal name of your column.
On NewForm.aspx, use:
$(”nobr:contains(’Label Text’)”).closest(’tr’).hide();
…where ‘Label Text’ is the text that is shown in the left-hand column of your form.
Let me know how that works for you.
Blessings,
Jim Bob
Thanks so much – but that didn’t work for me :(
This is my code:
$(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();
$(”a[name$='FilterStartYear']“).closest(’tr’).hide();
});
Here is the View Source:
FilterStartYear
1/1/2010
Stefanie,
Let’s take this over to STP ( http://www.endusersharepoint.com/STP ), where you can wrap your code in tags that will let it come through.
Blessings,
Jim Bob
Also – someone else suggested this, which also does not work for me:
$(function() {
//hide all of the check-boxes I don’t need
$(’#FilterStartYear, #FilterEndYear , #FilterStartWeek , #FilterEndWeek, #CurrentYear , #OutOfTheOffice ‘).hide();
});
Thanks for the excellent post, I am looking something similar to above, but in my case if “All Day Event” is not selected then in the dispform.aspx page it shows blank value, can we force to show “No”
Hi Ram,
This worked for me:
<script src=”/js/jquery-1.4.2.min.js” type=”text/javascript”></script>
<script type=”text/javascript” language=”javascript”>
$(document).ready(function() {
var obADE = $(”td#SPFieldAllDayEvent”)
var newHTML = $(obADE).html().replace(”>&”,”>No&”);
$(obADE).html(newHTML);
});
</script>
If the HTML contains a > and & together, it’s because that section is empty except for the comment and the non-breaking space:
<!– blah blah blah –>
If they’re not together, it’s because there’s a ‘Yes’ there:
<!– blah blah blah –>Yes
So, if it finds them together, it will replace those two characters (’>&’) with four (’>No&’):
<!– blah blah blah –>No
Hope that helps.
Blessings,
Jim Bob
Yahooo, It is working like a charm, thank you Jim Bob, you are Awesome.
but how can we apply the same functionality to a view. I have created view for this calendar and using on the home page, the view shows start time, end time and All Day Event.The below is the source code and the FieldType=”AllDayEvent”.
All Day Event
Hi Ram,
I don’t quite understand what you’re asking here.
Are you saying you have a view (like AllItems.aspx) that has a column for All Day Event? If so, take a look at the following. I tested it out and it worked for me with All Day Event as the last column in the list:
<script src=”/js/jquery-1.4.2.min.js” type=”text/javascript”></script>
<script type=”text/javascript” language=”javascript”>
$(document).ready(function() {
$(”tr.ms-viewheadertr”).siblings().each( function() {
var tdADE = $(”td:not(:has(’td’))”, this).get(8);
alert($(tdADE).html());
if ($(tdADE).text() == “”) $(tdADE).html(”No”)
});
});
</script>
It effectively looks for the sibling rows of the header row. Then for each row, it grabs the eighth TD that doesn’t also contain a TD (because the Title field will have a table inside it with TDs lower down). If that TD (mine is the 8th column; adjust yours based on where the ADE column falls in your view) is empty, I put “No” in it.
Blessings,
Jim Bob
Hi Ram,
Here’s what I did. Working from AllItems.aspx, with All Day Event in the eighth (last) column:
<script src=”/js/jquery-1.4.2.min.js” type=”text/javascript”></script>
<script type=”text/javascript” language=”javascript”>
$(document).ready(function() {
$(”tr.ms-viewheadertr”).siblings().each( function() {
var tdADE = $(”td:not(:has(’td’))”, this).get(8);
if ($(tdADE).text() == “”) $(tdADE).html(”No”)
});
});
</script>
This basically looks for the header row (class=ms-viewheadertr) and cycles through all of its sibling rows. For each row, I look at the eighth (modify depending on where your column is in the view) TD. If it’s empty, I put “No” in it.
When looking for the TD, I make sure I’m only counting TDs that are one level down from the main row TR. Some controls build sub-tables (Title, for example, builds a context-menu in a table inside the top-level TD) with their own TDs, so I don’t want to count those.
Hope the helps.
Blessings,
Jim Bob
Thank you Jim Bob, it works very good.
You’re welcome, Ram.
Blessings,
Jim Bob