Pages

Jun 10, 2011

Sharepoint 2010 jQuery - Hiding unnecessary columns in Calendar

I was working on a Training calendar project where i want to hide some predefined hidden field in Calendar list, i have done this in SharePoint 2007 but when i use the same java script in 2010 it doesn't work. So the following code snippet will be helpful for you guys.
  1. Enter edit mode on NewForm.aspx, by adding ?PageView=Shared&ToolPaneView=2 to your URL
  2. Add the Content Editor Web Part and move it to the bottom of the page
  3. Click on Source and enter the following text
01<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"type="text/javascript">script>
02<script type="text/javascript">
03$(function() {
04  $('td.ms-dttimeinput').hide(); //hides the times on Start Time
05  $('span[title=All Day Event] > input').attr("checked","checked"); // checks All Day Event
06  //hide all of the check-boxes I don�t need
07  $('tr:has(span[title=Recurrence])').not('tr:has(tr)').hide();
08  $('tr:has(span[title=All Day Event])').not('tr:has(tr)').hide();
09  $('tr:has(span[title=Workspace])').not('tr:has(tr)').hide();
10});
11script>
You�ll need to do something similar to your EditForm.aspx:
  1. 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)
  2. Add the Content Editor Web Part and move it to the bottom of the page
  3. 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:
  1. Enter edit mode the same way you did for EditForm.aspx
  2. Add the Content Editor Web part and move it to the bottom of the page
  3. Add the following code to the Source
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"type="text/javascript">script>
2<script type="text/javascript">
3$(function() {
4  //hide all of the check-boxes I don�t need
5  $('tr:has(td[id=SPFieldAllDayEvent])').not('tr:has(tr)').hide();
6  $('tr:has(td[id=SPFieldRecurrence])').not('tr:has(tr)').hide();
7  $('tr:has(td[id=SPFieldCrossProjectLink])').not('tr:has(tr)').hide();
8});
9script>

4 comments:

MannyHanna said...

this is great, But when I put it in, it doesn't remove the Time fields when I click New from the calendar

MannyHanna said...

what i mean is that after i paste the code in everything looks great... but when i return back to the calendar and click new the time fields show up again.

It doesn't matter what i put in them it will always change to the all day event selection (12Am to 11:59PM)

Can I hide the time fields?

Unknown said...

Hi,

Put the same code in newform.aspx so the fields will not be visible in when you open new form.

Thanks,
Pravyn

Travis Cotton said...

Great post. I modified the JQuery slightly to hide based on the name attribute in the href tag.

http://sharepointing.drupalgardens.com/content/how-hide-rows-dispform-using-jquery