Hide start time in FullCalendar

Question

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

score 74 · Answer 1 · answered Oct 18 '15 at 17:52

74

Just add to calendar options

displayEventTime: false

answered Oct 18 '15 at 17:52

andrey

1,136
9
19

This option is available from v2.4.0 see http://fullcalendar.io/docs/text/displayEventTime - You need to set it as option of fullCalendar and it affects all events. Or use CSS `.fc-time{ display : none; }`. However, I need to set the visibility of each event time differently and it seems that this is not possible. – Avatar Dec 16 '15 at 12:30

score 33 · Answer 2 · edited Jan 29 '16 at 18:17

33

add the following style to your css

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

or in version 2+:

.fc-time{
   display : none;
}

edited Jan 29 '16 at 18:17

biesior

55,576
10
125
182

answered May 14 '12 at 09:45

Riz

1,055
11
18

7

or `fc-time` as suggested below for the latest version as I noticed for myself. – Recct Jan 05 '15 at 16:42

score 23 · Answer 3 · answered Oct 10 '16 at 16:00

23

Try this, it works for me:

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

That should hide the start time in the title event.

answered Oct 10 '16 at 16:00

Raymond

1,309
14
10

Should be the correct answer. Other answers are just trying to *hide* the issue while here we create the object with correct parameters – Gangai Johann Dec 11 '17 at 13:48
Hi @GangaiJohann wow glad to hear that, I'm happy can help someone :) – Raymond Feb 01 '18 at 10:40

score 15 · Answer 4 · answered Jan 04 '18 at 01:39

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";

score 11 · Answer 5 · edited Sep 24 '12 at 19:18

11

The following hides the date on the month view only:

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

edited Sep 24 '12 at 19:18

the Tin Man

158,662
42
215
303

answered Sep 06 '12 at 11:06

Jayanti Gopaloodoo

111
1
2

score 8 · Answer 6 · answered Mar 13 '13 at 04:12

8

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();
}

answered Mar 13 '13 at 04:12

Catfish

18,876
54
209
353

2

This worked after I updated the class names to `.fc-title` and `.fc-time` – Paulo Oliveira May 22 '15 at 17:16

score 5 · Answer 7 · answered Dec 29 '14 at 02:13

5

remind that the CSS class name has changed to

.fc-time {
    display:none;
}

answered Dec 29 '14 at 02:13

AJ H

687
6
8

score 3 · Answer 8 · edited Sep 11 '14 at 10:02

3

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();
    }
});

edited Sep 11 '14 at 10:02

Stijn Bernards

1,091
11
29

answered Sep 11 '14 at 09:43

Gouli Mahesh

31
1

score 2 · Answer 9 · answered May 19 '15 at 14:37

2

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

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

answered May 19 '15 at 14:37

Artem Pogorelov

21
1

Bill · Answer 10 · 2010-07-22T18:14:31.273

2

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.

edited Jul 22 '10 at 18:14

answered Jul 22 '10 at 14:56

Bill

21
3

score 0 · Answer 11 · answered Dec 03 '14 at 13:24

0

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;
}

answered Dec 03 '14 at 13:24

Chris Traverse

113
1
10

Ravi S. Singh · Answer 12 · 2015-12-18T11:44:51.080

.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.

score 0 · Answer 13 · answered Apr 02 '17 at 12:36

0

Just remove allDay: false, from your fullCalendar function

answered Apr 02 '17 at 12:36

Elyor

5,396
8
48
76

Setting allDay:false creates a problem. Events are shown wrong when event spawns multi-day – Himanshu Jan 03 '18 at 11:21

score 0 · Answer 14 · answered Apr 18 '22 at 14:32

0

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

answered Apr 18 '22 at 14:32

elmahdi bouzouggar

46
1
3

Hide start time in FullCalendar

14 Answers14

Linked