【问题标题】:fullcalendar - display time in dayGridWeekfullcalendar - 在 dayGridWeek 中显示时间
【发布时间】:2019-05-29 12:54:33
【问题描述】:

我使用 fullcalendar 来显示事件,但我遇到了问题。如何在 dayGridWeek 左侧显示时间?

代码js:

var displayDisponibiltyBabySitter = function(){
            var calendarEl = document.getElementById('disponiblity');
            if(calendarEl){
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    defaultView: 'dayGridWeek' ,
                    validRange: function(nowDate){
                        return {start: nowDate}
                    },
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridWeek,timeGridDay'
                    },
                    locale: _mpop.current_lang,
                    timeZone: 'Europe/Paris',
                    eventBackgroundColor : "#444",
                    eventTextColor: '#EEE',
                    slotDuration: '00:60:00',
                    slotLabelFormat: [
                        {
                            hour: '2-digit',
                            minute: '2-digit',
                            hour12: false
                        }
                    ],
                    views: {
                        dayGridWeek: {
                            eventTimeFormat: {
                                hour: 'numeric',
                                minute: '2-digit',
                                omitZeroMinute: true,
                                meridiem: 'narrow'
                            }
                        }
                    },
                    events: Routing.generate('front.babysitter.disponibilities',{'id': $("#dispo-babysitter").data("id")}),
                    plugins: [ 'dayGrid', 'timeGrid', 'list' ]
                });
                calendar.render();
            }

        };

提前致谢

我有这个结果:

但是如何得到这个结果:

【问题讨论】:

    标签: javascript fullcalendar fullcalendar-4


    【解决方案1】:

    您已将 defaultView 设置为“dayGridWeek”

    设置为:

    defaultView: 'timeGridWeek'
    

    你应该没事的......

    【讨论】:

    • @dev109 这应该可以。到底出了什么问题?您是否在控制台中收到错误消息?您的所有插件都正确加载了吗?
    • @ADyson 在控制台中没有错误,但在 dayGridWeek 中不显示小时列表:(
    • 我使用完整日历 v4,现在经过搜索,我找到了完整日历 v2 的示例:jsfiddle.net/e78b944d/1 它在第 2 版中工作,但在第 4 版中不起作用:(
    • @dev109 "hours not display in dayGridWeek" ...是的,这是 dayGrid 的正确行为。要显示几个小时,您必须使用 timeGrid,因为这个答案告诉您。这是一个演示,使用您的代码,但将 dayGrid 替换为 timeGrid。它工作正常:codepen.io/ADyson82/pen/BeOGdV。附:另请参阅fullcalendar.io/docs/daygrid-viewfullcalendar.io/docs/timegrid-view,了解这两种视图之间的区别。 P.S v2 或 v3 中的正确代码无关紧要,它与 v4 完全不同,v4 几乎是对所有内容的完全重写。
    猜你喜欢
    • 2013-06-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-02
    • 2011-02-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多