I'm using SharePoint Online/Office 365/SharePoint Designer 2013.

This is for a custom list with calendar view.

The [dark teal] calendar is a custom list app and the [brown] is a calendar app. On the [dark teal] calendar, is there a way to hide the start and end time for ALL DAY events similar how [Independence Day] looks? The time is only hidden when it spans more than 1 day.

I found a way to remove the time using the class "ms-acal-time" but not all time are wrapped with this class.

My other option is to remove any time with below code I found and modified, seems to work when tested in JSBin but doesn't work on SharePoint. After I publish, the calendar removes everything inside the class.

enter image description here

2 Answers 2


I got it to work using javascript, just need to figure out how to keep it. It displays the time again after clicking [more items] on the calendar :(

   $('.ms-acal-sdiv').each(function() {
     var $this = $(this);
        $this.html($this.text().replace(/.+ [ap]m/gm, ''));

I found this code and just modified it to above but did not include the css portion.


When I need to display just the day portion of the time and date for a calendar item, I create a calculated web part and call it "Start". Set the calc to = "Start Date"; set the display to Date Only. Avoids custom code and attaches to the list rather than the page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.