FullCalendar daygrid 在底部呈现事件

Question

我正在尝试熟悉 FullCalendar。我使用的是纯 Javascript，我的问题是在 daygrid-weekgrid 视图中，所有事件都放在底部，即使我调整了行高。目前我使用默认的 FullCalendar 模板。下面是相应的文件和一张我糟糕日历的屏幕截图:)

extends layout2
block content
    div(id='calendar')
        script.
            document.addEventListener('DOMContentLoaded', function () {
                var calendarEl = document.getElementById('calendar');
                var initdate = new Date();
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    initialDate: initdate,
                    height: '100%',
                    handleWindowResize:true,
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay'
                    },
                    events: [
                        {
                            title: 'All Day Event',
                            start: '2021-04-01'
                        },
                        {
                            title: 'Long Event',
                            start: '2021-04-07',
                            end: '2021-04-10'
                        },
                        {
                            groupId: '999',
                            title: 'Repeating Event',
                            start: '2021-04-09T16:00:00'
                        },
                        {
                            groupId: '999',
                            title: 'Repeating Event',
                            start: '2021-04-16T16:00:00'
                        },
                        {
                            title: 'Conference',
                            start: '2021-04-16T19:00:00',
                            end: '2021-04-20'
                        },
                        {
                            title: 'Meeting',
                            start: '2021-04-12T10:30:00',
                            end: '2021-04-12T12:30:00'
                        },
                        {
                            title: 'Lunch',
                            start: '2021-04-12T12:00:00'
                        },
                        {
                            title: 'Meeting',
                            start: '2021-04-12T14:30:00'
                        },
                        {
                            title: 'Birthday Party',
                            start: '2021-04-13T07:00:00'
                        },
                        {
                            title: 'Click for Google',
                            url: 'http://google.com/',
                            start: '2021-04-28'
                        }
                    ]
                });
                calendar.updateSize();
                calendar.render();
            });

布局2

doctype html
html(lang='en')
    head
        title= title
        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1')
        script(src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.3.0/main.min.js")
        link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css", integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z", crossorigin="anonymous")
        script(src="https://code.jquery.com/jquery-3.5.1.slim.min.js", integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj", crossorigin="anonymous")
        script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js", integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV", crossorigin="anonymous")
        link(rel='stylesheet', href='/stylesheets/centeredforms.css')
    body
        div(class='container-fluid')
            div(class='row')
                div(class='col-sm-2')
                    block sidebar
                        ul(class='sidebar-nav')
                            li
                                a(href='/catalog') Home
                            li
                                a(href='/catalog/resources') All Resources
                            li
                                a(href='/catalog/books/create') Make a booking
                            li
                                a(href='/catalog/bookings') My Bookings

                    if(role=="admin")

                        block sidebar
                            ul(class='sidebar-nav')
                                li
                                    hr
                                li
                                    a(href='/catalog/resources/create') Create new Resource
                                li
                                    a(href='/catalog/users') Get all users
                                li

                div(class='col-sm-10')
                    block content

CSS风格

.sidebar-nav {
    margin-top: 20px;
    padding: 0;
    list-style: none;
}
#calendar {
    margin: 40px auto;
}
tr{
    height: auto;
}

li{
    list-style-type: none;
}
table {
    background-color: white;
    width: 100%;
}


tr:nth-child(even) {
    background-color: #d7d7d7;
}


tr:hover{
    color: #6bbaef;
}

form{
    text-align:center ;
}
button{
    align-self: center;
}
img{
    width: 250px;
    height: 250px;
}

Answer 1

所以问题出在 link(rel='stylesheet', href='/stylesheets/centeredforms.css') 的 layout2 文件中，这是我自定义的样式表，所以我的日历使用这个而不是这个 link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.6.0/main.min.css") 总之，替换 cdn 样式表，您将拥有一个不错的功能日历。此外，如果您包括 bootstrap 样式，那么它会更好

FullCalendar daygrid 在底部呈现事件

FullCalendar daygrid renders events on bottom

html

css

fullcalendar