'Hide start time in FullCalendar

On FullCalendar, in the month view, is there a way to hide an event's start time?

jqueryfullcalendar


Solution 1:[1]

Just add to calendar options

displayEventTime: false

Solution 2:[2]

add the following style to your css

.fc-event-time{
   display : none;
}

or in version 2+:

.fc-time{
   display : none;
}

Solution 3:[3]

Try this, it works for me:

$('#calendar').fullCalendar({
     displayEventTime : false
});

That should hide the start time in the title event.

Solution 4:[4]

To hide them all, the following should work

$('#calendar').fullCalendar({
 displayEventTime : false
});

But if you (like me) were trying to hide the time of a specific event, I found pretty clean way.

Just create the following CSS class and refer to it in the event property "className":

.hideCalendarTime > div > span.fc-time{
    display:none;
}

And your event should look something like this:

var newEvent = new Object();
newEvent.title = "Something";
newEvent.start = new Date();
newEvent.allDay = false;
newEvent.className = "hideCalendarTime";

Solution 5:[5]

The following hides the date on the month view only:

.fc-view-month .fc-event-time{
    display : none;
}

Solution 6:[6]

Another way is to add an eventRender function. This way you can choose to not render the time, and do something else like append some data to the event.

eventRender: function(event, element) { 
    element.find('.fc-event-title').append("<br/>" + event.location); 
    element.find('.fc-event-time').hide();
}

Solution 7:[7]

remind that the CSS class name has changed to

.fc-time {
    display:none;
}

Solution 8:[8]

In case you completely want to remove the Start time, you can use the below code

$('#calendar-canvas').fullCalendar({
    header: {
        left: 'today prev,next title',
        right: 'agendaDay,agendaWeek,month'
    },
    firstDay: 1,
    eventRender: function(event, element) {
        $(element).find(".fc-event-time").remove();
    }
});

Solution 9:[9]

I know it has been three months since you asked the question. But, if you and I are trying to do the same thing than someone else may be looking for the answer.

In the fullcalendar.js file, comment line 1603:

htmlEscape(formatDates(event.start, event.end, view.option('timeFormat'), options)) +

This is not a fix, at best it is a hack, but it works.

Solution 10:[10]

According to http://fullcalendar.io/docs/text/timeFormat/ , you just need to set time format in fullCalendar settings:

$('#calendar').fullCalendar({
    events: [              
    ],
    timeFormat: ' '
});

Solution 11:[11]

Although @Riz was correct at the time of posting, the css has changed in recent versions and now you'd need the following.

.fc-day-grid-event .fc-time{
    display:none;
}

Solution 12:[12]

.fc-time-grid-event.fc-short .fc-time,.fc-time-grid-event .fc-time{
        display: none !important;
    }

Above code will correct it in all views.

code below has a flow that shows time in large view of event

 .fc-time-grid-event.fc-short .fc-time{
            display: none !important;
        }

please use this code in css to hide the time only from event.

using just

.fc-time{
        display: none !important;
    }

will also hide the time at left grid.

Solution 13:[13]

Just remove allDay: false, from your fullCalendar function

Solution 14:[14]

displayEventTime: false but you need to add allDay=false in event data resources { "title": "e", "start": "2022-04-17T16:02:21", "allDay": false }

Related Questions