Wrap Titles in FullCalendar v5

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?

Nutritionist

Can u provide working code so that can try it out @trees4theforest – Kyd

Adyson set up a codepen below. Thanks! – Nutritionist

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

Cowpea

This aligns the two levels, but doesn't left-justify the second line under the time per my example. (Which I was able to do in v3 of fullcal with just white-space: normal – Nutritionist

The time and the title are in two different divs so this is probably the best you're going to get. IMO it looks a lot neater anyway! – Cowpea

Yeah, you may be right. The issue is if you have a super-long title with additional info that runs several lines, then it's a LOT of wasted space under that time div. – Nutritionist

And the fact that the time div is not fixed, but adjusts base on the length of the time, means the titles aren't aligned in the same box... which also looks a little sloppy. – Nutritionist

If you have a super-long title, consider making a snappier title and then putting then rest of it in a description which appears in a pop-over... the month view in particular just doesn't suit great big long waffly titles. – Cowpea

I guess you could fix the length of the time box if you wanted to, though, that might help. – Cowpea

Yeah, unfortunately the "you're doing it wrong" argument doesn't fly well with my client ;-) But it is what it is. Thanks for the help! – Nutritionist

It never does :-). But I guess at least if you were to provide them with the description & popover option, there's a chance they might at least try it. If you don't, they can't. – Cowpea

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/[email protected]/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>

If u wana hide the overflowing text

.fc-daygrid-day{
  overflow:hidden;
}

Kyd

Close, but I don't want anything overunning the day grid, I want to keep the title contained within the day grid block. – Nutritionist

u mean overflowing text? – Kyd

I have added css to hide the overflowing text inside day grid .Plz check is that what you mean? @Nutritionist – Kyd

Not hidden, but wrapped so it shows all of the title without overflowing the day grid, or being cut off. That's close though! – Nutritionist

u need the word also to be cut accoding to width?I think this is the close we can reach with css.. Addition to this we can make that in differnt line in smaller screen with media query – Kyd