javascript - 如何自定义完整日历中的时间段？

Question

我正在使用来自fullcalendar.io的完整日历，并且在自定义其时间段时遇到了一些麻烦。

我想添加早餐、午餐、晚餐等时间段，用户也可以添加他/她自己的时间段。如何根据槽数设置固定高度？另外，我想为早餐、午餐等设置插槽列文本，而不是上午 12 点、上午 6 点。这是我到目前为止所做的：

var today = moment();
$('#calendar').fullCalendar({
                    droppable: true,
                    defaultView: 'Week',
                    header: false,
                    defaultDate: today,
                    navLinks: false, // can click day/week names to navigate views
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
                    /*events: [

                        {
                            title  : 'event1',
                            start  : today,
                            imageurl:'assets/images/recipe/salad.jpg'
                        }

                    ],*/
                    /*views: {
                        agendaWeek: {
                            agendaEventMinHeight: 150,
                            allDaySlot: false,
                            slotLabelInterval: { hours: 6},
                            slotDuration: { hours: 1},
                            duration: { days: 7}
                        }
                    },*/
                    eventRender: function (event, element) {
                        element.find(".fc-event-title").remove();
                        element.find(".fc-event-time").remove();
                        var new_description = '#';
                        element.append(new_description);

                    },
                    now: today,
                    /*header: {
                        left: 'promptResource',
                        center: '',
                        right: ''

                    },*/
                    footer: {
                        left:   'promptResource',
                        center: '',
                        right:  ''
                    },
                    customButtons: {
                        promptResource: {
                            text: '+ add course',
                            click: function() {
                                var title = prompt('Course name');
                                if (title) {
                                    $('#calendar').fullCalendar(
                                        'addResource',
                                        { title: title },
                                        true // scroll to the new resource?
                                    );
                                }
                            }
                        }
                    },
                    views: {
                        Week: {
                            type: 'timeline',
                            duration: { Days: '7' },
                            slotLabelInterval: { hours: 24},
                            slotDuration: { hours: 24},
                        }
                    },
                    resourceLabelText: 'Meal',
                    resourceRender: function(resource, cellEls) {
                        cellEls.on('click', function() {
                            if (confirm('Are you sure you want to delete ' + resource.title + '?')) {
                                $('#calendar').fullCalendar('removeResource', resource);
                            }
                        });
                    },
                    resources: [
                        { id: 'a', title: 'Breakfast' , eventColor: 'red'},
                        { id: 'b', title: 'Lunch', eventColor: 'green' },
                        { id: 'c', title: 'Dinner', eventColor: 'orange' },
                        { id: 'd', title: 'Other', eventColor: 'grey'},
                        ],

                    events: [
                        { id: '1', resourceId: 'b', start: today, end: today, title: 'event 1' },
                        { id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
                        { id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
                        { id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
                        { id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
                    ]

                });

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" data-print="true" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.css" />
<div id="calendar"></div>

任何帮助将非常感激。

编辑： 这是我真正想要实现的。 在设计中，您可以看到一天中的时间并不重要。我希望用户每天尽可能多地添加餐点。我只是想要添加餐点标题（事件）的选项。并删除左侧的时隙。

更新： 我已经设法在一定程度上解决了这个问题。现在看起来是这样的： 但是，仍然存在一些问题，例如如何更改 columnHeader 中的日期格式以及如何为行和列提供固定大小？

标签： javascripttwitter-bootstrapfullcalendarmomentjs