Wrap Titles in FullCalendar v5 - html

Question

Having trouble wrapping the Title and Time on FullCalendar v5. By changing .fc-daygrid-event to have white-space: normal I can get the title to wrap, but it's not right:
(Top day is with whitespace adjust, bottom is default)
What I'm looking for is:
Which has the title inline with the time, and wrapping under the time.
What voodoo should I do to achieve this?

Answer 1

You can solve it by adjusting the alignment as well:
.fc-daygrid-event {
white-space: normal !important;
align-items: normal !important;
}
Demo: https://codepen.io/ADyson82/pen/poPaMBW

Answer 2

In order to break and make it into two line here is a work around
.fc-daygrid-event{
display: block!important;
padding-left: 15px!important;
}
.fc-daygrid-event {
white-space: normal !important;
align-items: normal !important;
}
.fc-daygrid-event-dot{
display: inline-flex;
position: absolute;
left: 0px;
top: 6px;
}
.fc-event-time,.fc-event-title{
display: inline;
}
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
document.addEventListener("DOMContentLoaded", function () {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
center: "title",
left: "prevYear,prev,next,nextYear"
},
events: [
{
title: "Friday Throwdown",
start: new Date(y, m, 2, 10, 30),
end: new Date(y, m, 2, 11, 30),
allDay: false
},
{
title: "Marketing Meeting",
start: new Date(y, m, 2, 11, 30),
end: new Date(y, m, 2, 12, 30),
allDay: false
},
{
title: "Production Meeting",
start: new Date(y, m, 2, 15, 30),
end: new Date(y, m, 2, 16, 30),
allDay: false
}
]
});
calendar.render();
});
.fc-daygrid-event {
white-space: normal !important;
align-items: normal !important;
}
.fc-daygrid-event{
display: block!important;
padding-left: 15px!important;
}
.fc-daygrid-event-dot{
display: inline-flex;
position: absolute;
left: 0px;
top: 6px;
}
.fc-event-time,.fc-event-title{
display: inline;
}
.fc-daygrid-day{
overflow:hidden;
}
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.8.0/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar#5.8.0/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>
If u wana hide the overflowing text
.fc-daygrid-day{
overflow:hidden;
}