FullCalendar daygrid renders events on bottom - html

Question

Iam trying to get familiar with FullCalendar. Iam using pure Javascript and my problem is that in daygrid-weekgrid view all events are placed in the bottom, even if i resize the row height. Currently i use the default FullCalendar template. Below there are the respective files and one screenshot of my awful calendar:)
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();
});
layout2
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 style
.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

So the problem was in layout2 file at link(rel='stylesheet', href='/stylesheets/centeredforms.css'), this is my customized stylesheet so, my calendar used this instead of this link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.6.0/main.min.css")
In conclusion replace the cdn stylesheet and you will have a nice functional calendar. Also if you include bootstrap styles then it will be nicer