Hide time for all day events on SP Calendar

Question

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.

Answer 1

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 :(

$(document).ready(function(){
   $('.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.

Answer 2

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.