在 FullCalendar 中隐藏开始时间答案

【问题标题】：Hide start time in FullCalendar在 FullCalendar 中隐藏开始时间
【发布时间】：2010-04-28 18:23:24
【问题描述】：

在 FullCalendar 的月视图中，是否可以隐藏事件的开始时间？

【问题讨论】：

【解决方案1】：

只需添加到日历选项

displayEventTime: false

【讨论】：

此选项从 v2.4.0 开始可用，请参阅 fullcalendar.io/docs/text/displayEventTime - 您需要将其设置为 fullCalendar 的选项，它会影响所有事件。或者使用 CSS .fc-time{ display : none; }。但是，我需要以不同的方式设置每个事件时间的可见性，这似乎是不可能的。

【解决方案2】：

将以下样式添加到您的 CSS 中

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

或在版本 2+ 中：

.fc-time{
   display : none;
}

【讨论】：

或 fc-time 如下建议的最新版本，我自己注意到了。

【解决方案3】：

试试这个，它对我有用：

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

这应该隐藏标题事件中的开始时间。

【讨论】：

应该是正确答案。其他答案只是试图隐藏问题，而在这里我们使用正确的参数创建对象
嗨 @GangaiJohann 很高兴听到这个消息，我很高兴可以帮助某人:)

【解决方案4】：

要将它们全部隐藏，以下应该可以工作

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

但是，如果您（像我一样）试图隐藏特定事件的时间，我找到了非常干净的方法。

只需创建以下 CSS 类并在事件属性“className”中引用它：

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

您的活动应该如下所示：

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

【讨论】：

【解决方案5】：

以下仅在月视图中隐藏日期：

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

【讨论】：

【解决方案6】：

另一种方法是添加一个 eventRender 函数。通过这种方式，您可以选择不呈现时间，并执行其他操作，例如将一些数据附加到事件中。

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

【讨论】：

这在我将类名更新为 .fc-title 和 .fc-time 后工作

【解决方案7】：

提醒CSS类名已更改为

.fc-time {
    display:none;
}

【讨论】：

【解决方案8】：

如果您完全想删除开始时间，可以使用以下代码

$('#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】：

我知道你问这个问题已经三个月了。但是，如果您和我都在尝试做同样的事情，那么其他人可能正在寻找答案。

在 fullcalendar.js 文件中，注释第 1603 行：

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

这不是修复，充其量只是一个 hack，但它确实有效。

【讨论】：

【解决方案10】：

根据http://fullcalendar.io/docs/text/timeFormat/，你只需要在fullCalendar设置中设置时间格式：

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

【讨论】：

【解决方案11】：

尽管@Riz 在发布时是正确的，但 css 在最近的版本中发生了变化，现在您需要以下内容。

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

以上代码将在所有视图中更正它。

下面的代码有一个在事件大视图中显示时间的流程

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

请在 css 中使用此代码仅对事件隐藏时间。

只使用

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

也会隐藏左侧网格的时间。

【讨论】：

【解决方案13】：

只需从您的 fullCalendar 函数中删除 allDay: false,

【讨论】：

设置 allDay:false 会产生问题。当事件产生多天时，事件显示错误