4

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?

Trees4theForest
  • 1,267
  • 2
  • 18
  • 48

2 Answers2

4

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

ADyson
  • 57,178
  • 14
  • 51
  • 63
  • 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` – Trees4theForest Jul 28 '21 at 14:11
  • 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! – ADyson Jul 28 '21 at 14:13
  • 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. – Trees4theForest Jul 28 '21 at 14:16
  • 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. – Trees4theForest Jul 28 '21 at 14:18
  • 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. – ADyson Jul 28 '21 at 14:24
  • I guess you could fix the length of the time box if you wanted to, though, that might help. – ADyson Jul 28 '21 at 14:25
  • 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! – Trees4theForest Jul 28 '21 at 14:40
  • 1
    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. – ADyson Jul 28 '21 at 14:52
3

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;
}
Amal nandan
  • 932
  • 6
  • 17