Hide start time in FullCalendar

问题

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

回答1:

Just add to calendar options

displayEventTime: false

回答2:

add the following style to your css

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

or in version 2+:

.fc-time{
   display : none;
}

回答3:

Try this, it works for me:

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

That should hide the start time in the title event.

回答4:

The following hides the date on the month view only:

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

回答5:

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

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

回答7:

remind that the CSS class name has changed to

.fc-time {
    display:none;
}

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

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

回答10:

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

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

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

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

回答13:

Just remove allDay: false, from your fullCalendar function

来源：https://stackoverflow.com/questions/2732132/hide-start-time-in-fullcalendar

标签

jquery

fullcalendar