Wrap Titles in FullCalendar v5

user_1061836 0
Viewed 661

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:

enter image description here

(Top day is with whitespace adjust, bottom is default)

What I'm looking for is:

enter image description here

Which has the title inline with the time, and wrapping under the time.

What voodoo should I do to achieve this?

fullcalendar-5 fullcalendar css html
2 Answers
user_59470430

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;
}
user_107063950
Related