How to change size of event element in FullCalendar DayGrid View?

In my FullCalendar rendering I use the dayGrid view to create a schedule. When populating this calendar view (schedule) with events, every event is the same height, regardless of the duration of the event. I would like to make the events bigger or smaller based on their duration, similar to what the FullCalendar demo shows for other calendar views. Is this possible to achieve using the dayGrid View?

My Calendar:

FullCalendar Desired Styling:

I ended up finding a way to accomplish my goal. The CSS styling for the calendar rendering can be modified right in the html page using:

<style>
   .fc-day-grid-event > .fc-content {
       white-space: normal;
   }
</style>

This allows the text of the event title to wrap onto multiple lines. Without modifying this styling the event text (title) just cuts off anything longer than the width of the event box. Once this styling is in place, I can just insert newline characters ('\n') into my html in order to expand the size of the box. Because I am controlling my events from a database, it is easy to simply add newline characters into the title string corresponding to the desired size of the event.

Here is what my calendar looked like before:

And here are some sample events to recreate the image:

events: [
            {
            id: 'event1',
            title: 'Event 1- 5h',
            start: '2020-06-16',
            displayEventTime: false,
            editable: true,
            allDay: true
            },

            {
              id: 'event2',
              title: 'Event 2- 2h',
              start: '2020-06-16',
              displayEventTime: false,
              editable: true,
              allDay: true
            },

            {
                id: 'event3',
                title: 'Event 3- 1h',
                start: '2020-06-16',
                displayEventTime: false,
                editable: true,
                allDay: true
            }
]

Here is what the calendar looks like using my solution:

And the simple modification to the events needed for this solution:

events: [
            {
            id: 'event1',
            title: 'Event 1- 5h' + '\n\n\n\n\n',
            start: '2020-06-16',
            displayEventTime: false,
            editable: true,
            allDay: true
            },

            {
              id: 'event2',
              title: 'Event 2- 2h' + '\n\n',
              start: '2020-06-16',
              displayEventTime: false,
              editable: true,
              allDay: true
            },

            {
                id: 'event3',
                title: 'Event 3- 1h',
                start: '2020-06-16',
                displayEventTime: false,
                editable: true,
                allDay: true
            }
]