在 Toast ui 日历中未正确显示类别时间的安排

Question

我希望你能帮助我，我正在尝试使用 toast ui calendar 的周视图，代码如下：

$(document).ready(function () {

        var calendar = new tui.Calendar('#calendarInstructor', {
            defaultView: 'week',
            taskView: false,
            useCreationPopup: false,
            useDetailPopup: false,
            week: {
                daynames: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
                narrowWeekend: false,
                startDayOfWeek: 1
            },
        });

        calendar.createSchedules([
            {
                id: '1',
                calendarId: '1',
                title: 'my schedule',
                body: 'body',
                category: 'time',
                dueDateClass: '',
                start: new Date('2021-05-19T09:00:00'),
                end: new Date('2021-05-19T11:00:00'),
                isReadOnly: true    // schedule is read-only
            },
            {
                id: '2',
                calendarId: '1',
                title: 'second schedule',
                body: 'body',
                category: 'time',
                dueDateClass: '',
                start: new Date('2021-05-20T13:00:00'),
                end: new Date('2021-05-20T14:00:00'),
                isReadOnly: true    // schedule is read-only
            }
        ]);

问题是时间表没有按正确的时间放置，高度错误，总是放在顶部，而且标题不显示。

这是它的样子：

我做错了什么？我还可以使用不同的时间格式，例如字符串：'2021-05-20 15:30'?

Answer 1

经过大量测试，问题是因为 tui-calendar div 被放置在 bootstrap 4 选项卡窗格中，我猜是因为选项卡窗格最初是隐藏的 tui -日历无法计算隐藏选项卡的日程安排位置。

我这样做解决了它：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                    if (e.target) {
                        if (e.target.id == 'my-tab-id') {
                            calendar.render();
                        }
                    }
                })

选择选项卡时使用此选项，呈现带有先前添加的 createSchedules 列表的日历。

在 Toast ui 日历中未正确显示类别时间的安排

Schedule with category time not displayed correctly in toast ui calendar

jquery

calendar