Hide Times in Calendar View of List

2011-06-29

Question

_{Wednesday, June 29, 2011 5:36 PM}

I like to show my items in a list by date in a month-view. This is useful for my list.

However, Each event says it starts at 12:00am and I would like to hide the time in the calendar view. Is there a way to do this? I try with SharePoint Designer and modifying list properties, but I can't seem to be able to do it.

Thank you.

All replies (23)

_{Wednesday, June 29, 2011 6:00 PM ✅Answered | 2 votes}

Just add a little CSS to the page:

.ms-acal-time{display:none;}

-James
MCPD: SharePoint Developer 2010
Posting is provided "AS IS" with no warranties, and confers no rights.

_{Wednesday, June 29, 2011 6:44 PM ✅Answered | 1 vote}

The ones that do NOT sho the time are in <div class="ms-acal-time">

The ones that DO show the time (more than 2 per date) Have the date in <div class="ms-acal-sdiv"> i.e., there is no ms-acal-time divs for those days with 2 or more items.

Screenshot for clarification:

_{Wednesday, June 29, 2011 6:32 PM | 1 vote}

Just add a little CSS to the page:

.ms-acal-time{display:none;}

-James
MCPD: SharePoint Developer 2010
Posting is provided "AS IS" with no warranties, and confers no rights.

I add this as a web part content editor, but it only remove about half of the times. Some of the entries still say 12:00am

I found out the reason: If there are more than two items on any one day, it will show the date. Why is this?

_{Wednesday, June 29, 2011 6:37 PM | 1 vote}

That is strange. Try F12 in IE with the page up then CTRL-B, click on a time that is still visible and see if it has a different class.-James
MCPD: SharePoint Developer 2010
Posting is provided "AS IS" with no warranties, and confers no rights.

_{Tuesday, August 30, 2011 4:08 PM}

ooh - I feel your pain! I am trying to do the exact same thing - remove the crazy 12:00 time displays on the calendar view of our task list. And I had the exact same results as you with the CSS suggestion.

CEWP with: [style].ms-acal-time{display:none;}[/style]

It worked fine as long as there was just one item displayed on the date.

[div class=ms-acal-item]
   [div class=ms-acal-sdiv]
      [div class=ms-acal-time]12:00 am - 12:00 am[/div]
           [div class=ms-acal-title][a onclick="..." href="..."]task title[/a][/div]
   [/div]
[/div]

But as soon as there was more than one, the HTML was different, so the style did not work.

[div class=ms-acal-item]
[div class=ms-acal-sdiv]12:00 am[a onclick="..." href="..."]task 1 title[/a][/div]
[/div]
[div class=ms-acal-item]
[div class=ms-acal-sdiv]12:00 am[a onclick="..." href="..."]task 2 title[/a][/div]
[/div]

So ... anyone else with other CSS options?

I'm thinking this may be a job for jQuery. However, jQuery does not seem to be executing the same in Office 365 as what I was used to in MOSS 2007. It seems to be executing before the calendar is actually populated with the data from the task list. So, in essence, it has no effect since the HTML generated by the data population is not there yet when the script executes. Or I'm just doing something wrong :P probably the latter ....

Betty

20110913 - edit - by the way, I tried my code on SPF 2010 also, and had the same result. Just wanted to point out this is not an Office365 specific issue, it's a SP2010 issue.

_{Tuesday, September 13, 2011 7:02 PM}

Thanks to Marc Anderson for the setTimeout() suggestion in my jQuery based solution!

This did the trick to remove time display when there is just one item on a date.

see picture of result: http://www.flickr.com/photos/17549214@N03/6144846972/

I will work on a more comprehensive script to also address removintg the time display when there are multiple items on a date ....

Betty

Betty Stolwyk

_{Thursday, September 22, 2011 8:43 PM}

Hi:

Any headway on the multiple item script?

_{Thursday, September 22, 2011 9:09 PM}

here ya go. this script does 4 things:

removes "12:00 am - 12:00 am" time display on single item monthly calendar days
removes "12:00 am" time display from multi item calendar days
removes "12:00 am - 12:00 am" in tool tip when you hover
optional. (You may not care about this one. I just did it because of a user request.) Change item links to go to Edit form instead of Display form, then return back to calendar page.

HOWEVER .... DISCLAIMER! This only works on the monthly view of the calendar. And only on the initial rendering of the page, or an a refresh. Once you do ANY switching of views, it is of no use. Switching of views on a calendar means this:

Will NOT work when you:

switch between month-week-day views
use previous/next arrows for scrolling
click the "more" link on days when there are more items than what fit on the day

That's my NEXT research project ;)

But in the meantime .....

<script language="javascript" type="text/javascript">
$(document).ready(function() {
   window.setTimeout(doModifyCal, 150);
});
function doModifyCal() {
  var str="x";
  var urlString = urlencode(location.href);  // only needed for Display to Edit form link option
  // get the 2nd div of class "ms-acal-rootdiv"
  var CalData = $('div.ms-acal-rootdiv:eq(1)');
  // remove all "12:00 am - 12:00 am" from single item days
  $("div.ms-acal-time", CalData).remove();
  // remove all "12:00 am" from multi-item days
  $('div.ms-acal-sdiv', CalData).each(function() {
    if($('div', this).length == 0) {
      str=$(this).html();
      str=str.replace("12:00 am","");
      $(this).html(str);
    };
  });
 // get rid of "12:00 am - 12:00 am" in tool tip when you hover 
 $('div[title]', CalData).each(function() {         
    str=$(this).attr("title");
    str=str.replace("12:00 am - 12:00 am ","");
    $(this).attr("title",str);
  });
  // optional - change item links to go to Edit form instead of Display form
  var Links = $("a", CalData);  
  Links.each(function() {
    str=$(this).attr("href");
    str=str.replace("DispForm","EditForm");
    str=str + '&Source=' + urlString;
    $(this).attr("href",str).removeAttr("onclick");
  });
};
// only needed for Display to Edit form link option
function urlencode(link) {
  link = encodeURI(link);
  link = link.replace('+', '%2B');
  link = link.replace('%20', '+');
  link = link.replace('*', '%2A');
  link = link.replace('/', '%2F');
  link = link.replace('@', '%40');
  return link;
}
</script>

Betty

Betty Stolwyk

_{Friday, October 7, 2011 2:00 AM | 1 vote}

I have a final resolution that takes care of removing the time through all calendar view changes that can happen - day-week-month navigation; previous/next scrolling; more/collapse links.

It changes these HTML markups:

<DIV style="POSITION: absolute; WIDTH: 119px; HEIGHT: 37px; TOP: 77px; LEFT: 760px" class=ms-acal-item title="12:00 am - 12:00 am bls task tres" _index="0,3">


<DIV class=ms-acal-sdiv>
  <DIV class=ms-acal-time>12:00 am - 12:00 am </DIV>
  <DIV class=ms-acal-title>
       <A onclick="EditLink2(this,'WPQ2');return false;" href="/{site}/Lists/Task/DispForm.aspx?ID=74">bls task uno</A>
  </DIV>


<DIV class=ms-acal-sdiv>12:00 am 
  <A onclick="EditLink2(this,'WPQ2');return false;" href="/{site}/Lists/Task/DispForm.aspx?ID=75">bls task dos</A>
</DIV>

to these

<DIV style="POSITION: absolute; WIDTH: 119px; HEIGHT: 37px; TOP: 77px; LEFT: 760px" class=ms-acal-item title="bls task tres" _index="0,3">


<DIV class=ms-acal-sdiv> 
  <DIV class=ms-acal-title>
       <A  href="/{site}/Lists/Task/EditForm.aspx
   ?ID=83&Source=https%3A%2F%2F{site}%2FSitePages%2FBettyTest3.aspx">
       bls task uno
  </DIV>


<DIV class=ms-acal-sdiv> 
  <A href="/{site}/Lists/Task/DispForm.aspx?ID=75&Source=https%3A%2F%2F{site}%2FSitePages%2FBettyTest3.aspx">bls task dos</A>
</DIV>

So in case this could help anyone else, here is the code:

// Calendar view of a list modification for SharePoint 2010
// -Remove all 12:00 time displays.  They are incorrect.
// -Remove the 12:00 text from tool tip also.
// -Change item links to go to Edit form instead of Display form

// the "populateCalendarEventLinkIntercept" technique came from Mike Smith:
// http://techtrainingnotes.blogspot.com/2010/06/sharepoint-2010-color-coded-calendars.html
// this technique handled all calendar view changes (day-week-month; previous/next) 
// except the "n more Items" and "collapse" links when more than 3 items are on a month day.
//
// the setTimeout technique was suggested by Marc Anderson.
// it handles the more/collapse scenario

// load our function to the delayed load list
_spBodyOnLoadFunctionNames.push('populateCalendarEventLinkIntercept');

// hook into the existing SharePoint calendar load function
function populateCalendarEventLinkIntercept()
{

  if (SP.UI.ApplicationPages.CalendarNotify.$4a)                             // 20111006 pre-SP1 - Office 365
  {
    var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4a;
    SP.UI.ApplicationPages.CalendarNotify.$4a = function () 
      {
        OldCalendarNotify();
        doModifyCal();
      }
  }
  if (SP.UI.ApplicationPages.CalendarNotify.$4b)                            // SP2010 SP1
  {
    var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4b;
    SP.UI.ApplicationPages.CalendarNotify.$4b = function () 
      {
        OldCalendarNotify();
        doModifyCal();
      }
  }
  // future service pack change may go here!
  // if (SP.UI.ApplicationPages.CalendarNotify.???)

}


function doModifyCal() {

  // if there is a more/collapse control (which happens when there are more than three items on month date)
  // set its click event to execute this doModifyCal function.
  // include a pause to allow for latent data population from separate asynchronous thread

  if ($("a.ms-cal-nav").eq(0).length) {
     $("div.ms-acal-ctrlitem").eq(0).click(function() {
          window.setTimeout(doModifyCal, 0);
     });
  } 

  // if there is at least one "12:00" display, clean it up   
  
  var y=$('div.ms-acal-rootdiv:eq(1) div[title^="12:00 am"]').filter(":first");
  if(y.length) {
     var urlString = urlencode(location.href);
     var CalData = $('div.ms-acal-rootdiv').eq(1);
     $("div.ms-acal-time", CalData).remove();
     $('div.ms-acal-sdiv', CalData).each(function() {
       if($('div', this).length == 0) {
         str=$(this).html();
         str=str.replace("12:00 am","");
         $(this).html(str);
       };
     });
     $('div[title]', CalData).each(function() {
       str=$(this).attr("title");
       str=str.replace("12:00 am - 12:00 am ","");
       $(this).attr("title",str);
     });

     // additionally, change item links to go to non-modal Editform
     // instead of modal Dispform

     var Links = $("a", CalData);  
     Links.each(function() {
       str=$(this).attr("href");
       str=str.replace("DispForm","EditForm");
       str=str + '&Source=' + urlString;
       $(this).attr("href",str).removeAttr("onclick");
     });
   }
   
};
function urlencode(link) {
  link = encodeURI(link);
  link = link.replace('+', '%2B');
  link = link.replace('%20', '+');
  link = link.replace('*', '%2A');
  link = link.replace('/', '%2F');
  link = link.replace('@', '%40');
  return link;
}

ps: before and after screenshot of month view:
http://www.flickr.com/photos/17549214@N03/6153683845/in/photostream/

Betty Stolwyk

_{Thursday, January 19, 2012 3:09 AM}

Hi Betty B: Nice work! This works really well for a single calendar, but I'm not able to get it to work when using calendar overlays in SharePoint 2010. Any ideas how to modify it so it will work? Thanks.

_{Thursday, January 19, 2012 3:50 AM}

Got it! :-) I looked at your code more closely, and realized that you were looking for div title's that started with "12:00 am". Then I looked at the page from IE Toolbar, and noticed that when using overlays, SharePoint was prefixing the title with the name of the calendar view added as an overlay. For example, I had a calendar view named Open Tickets, so the title was "Open Tickets 12:00 am...", therefore your code ignored it. So I created another version of your code that looked for the view name, and it worked! Interestingly enough, I only had to specify one of the view names, even though I had multiple overlay calendars added in, and it took care of them all.

Anyway, hope this helps someone else, and thanks so much Betty for coming up with the solution--much appreciated!

_{Thursday, January 19, 2012 2:11 PM}

Cool! Thrilled it was of help! thanks so much for the helpful addendum regarding overlays!Betty Stolwyk

_{Wednesday, January 25, 2012 9:10 PM}

I'm new to the world of SharePoint coding, since all of my solutions have been out of the box or someone else's codes that I can just plug in using the designer. I have been using a coloring code from the following website to color code events on a calendar:

http://techtrainingnotes.blogspot.com/2010/06/sharepoint-2010-color-coded-calendars.html

But when I add the calendar as an overlay to a parent site I am not able to have the coloring transpire onto the parent site. I only see the full calculated code with the event title. Can you assist in providing the code or where to modify the code so a child calendar that is overlaid onto a parent site will display the color? Thank you in advance for any additional assistance that you can provide.

James

_{Tuesday, April 10, 2012 11:47 AM}

Hi,

I am also using calendar overlays in sharepoint 2010. Can u please help me by explaining step by step how you did it.

I need to remove or hide the time fields from the events in a calendar list which is having calendar overlays.

_{Tuesday, June 12, 2012 3:53 PM}

Can you please post your code to show how this is done?

_{Wednesday, January 14, 2015 12:48 AM}

Lakshmi,

You probably got it figured out already, but there were a couple of things that were left out of the explanations above for use with an overlay calendar.

Remember that the code she provided is using a jquery library, so you have to download that and add it to your style library in SP. You can google guides to do this.

next, start a Content Editor Web Part and edit the html in it.

link to the JQuery lib:

Now you can copy her script below that line (make sure to start it with <script language="javascript" type="text/javascript"> and end it with </script>

then look for the portion of her code where she searches for 12:00am and replace it with the title of your overlay:

var y=$('div.ms-acal-rootdiv:eq(1) div[title^="12:00"]').filter(":first");

in this you would change 12:00 to your title of your overlay. Remember you can add alerts to your script to test and make sure it is firing.

Hope this helps someone.

_{Monday, May 15, 2017 8:24 PM}

I tried this script in SharePoint 2013, it does not work and doesn't hide 12:00 am. Any specific settings we need to change?

Thanks

Shri

_{Wednesday, May 17, 2017 6:57 PM}

did you follow Nolan Raney's instructions for the content editor web part?

download jquery (http://jquery.com/download/) then link to the JQuery lib: 

<script src="/Style%20Library/Scripts/jquery-3.2.1.min.js" type="text/javascript"></script>

Now you can copy her script below that line (make sure to start it with <script language="javascript" type="text/javascript"> and end it with </script>

I entered the latest release of jquery 3.2.1 instead of the 1.11.12 version.

If you believe you have populated the Content Webpart correctly , then could you send some screenshots of the F12 view of the calendar, making sure that the screen shots includes the HTML code around the 12:00 time display. You can see an example in one of the above posts.

To get the screenshot, open the page in IE then hit F12. Ensure the DOM highlighter is turned ON. Then click on the part(s) of the calendar with the 12:00 display. That should take you to the corresponding HTML.

Betty Stolwyk

_{Thursday, June 1, 2017 11:36 PM}

Thanks Betty for the response. I have exactly added the scripts how you have indicated. This still shows and it doesn't hide "12:00 am" I also tried referencing Jquery-1.11.2.js as indicated in the original thread.

None of this worked in SP 2013 with Dec 2016 CU applied scenario.

Any other thoughts? I know it looked simple but since it doesn't add any class or div tag when there are multiple events lead to issue. Something like we have to take the full value of the div and string parsing to eliminate the values.

Any thought?

Thanks

Shri

_{Thursday, June 1, 2017 11:47 PM}

This is exactly happening. Any other thoughts on this? I currently have this issue and cannot remove the just "12:00 am" value at all. I also added the Jquery functions, references but not working

_{Friday, June 2, 2017 7:55 PM}

The first test is to make sure jQuery is loaded correctly on the page.

Copy the code below. Replace the src value with the path and filename where you downloaded and saved the jQuery library.

Paste the code into a content editor webpart on a new page. Save the page. You may need to refresh the page. Two alert boxes should pop up. If not, something is wrong already at this point. The most common problem is the jQuery library is not correctly referenced.

<script src="/Style%20Library/Scripts/jquery-3.2.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
//
// Hello world. A quick script to make sure javascript and jQuery are working ok.
// A successful test of each will result in a popup window. Click the OK button to continue
// with the next test.
//
  alert ("js on.");
  $(document).ready(function() {
    alert ('jQuery on.');
  });
</script>

Betty Stolwyk

_{Thursday, August 8, 2019 9:54 PM}

The popup dialog appears correctly. That means the Jquery reference is fine. Can you consolidate the complete code and paste year? All I need is hide from the event page webpart box "12:00 AM".

Many thanks,

Shri

_{Monday, February 24, 2020 1:44 PM}

I'm on SharePoint 2019 and I can't get this to work. Anyone able to get this done?

Thank you,

Share via

Hide Times in Calendar View of List

Question

All replies (23)

Additional resources