I’m using fullCalendar to display events weekly using html and php.

This is the code inside the $(document).ready function:

            $.get("includes/get_office_opening_closing_maxRange.php")
            .done(function(data) {
                slotTime = JSON.parse(data);
                var calendarEl = document.getElementById('calendar');
                // if calendar already exists, destroy it
                if (calendar != null) {
                    calendar.destroy();
                }
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    expandRows: true,
                    initialView: 'timeGridWeek',
                    slotMinTime: slotTime.min,
                    slotMaxTime: slotTime.max,
                    navLinks: false, // can click day/week names to navigate views
                    editable: false,
                    selectable: false,
                    nowIndicator: true,
                    dayMaxEvents: true, // allow "more" link when too many events
                    eventSources: [
                        {
                            url: 'includes/get_visits_events.php',
                            method: 'POST',
                            failure: function() {
                                alert('there was an error while fetching events!');
                            },
                            extraParams: {
                                medic: $("#slc_medic").val(),
                            },
                            // color: 'yellow',   // a non-ajax option
                            // textColor: 'black' // a non-ajax option
                        }
                    ],
                    eventClick: function(info) {
                        
                        $.post("includes/ajax_pat_detailcheck.php", {
                            idpatient: info.event.groupId
                        })
                        .done(function(data) {
                            if (data == 0) {
                                post_on_click("visdet.php", "visit_id", info.event.id);
                            } else {
                                $("#patientdetails #btn_mod_pat_details").attr('data-idtomod', info.event.groupId);
                                $("#patientdetails").modal('show');
                            }
                        });
                    },

                    firstDay: 1,
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        // right: 'dayGridMonth,dayGridWeek,dayGridDay'
                        right: ''
                    },
                    // initialDate: '2024-05-24',
                });
                calendar.setOption('locale', 'it');
                calendar.render();
            });
        }

The project is about a medical office and its appointments.
This code check the office opening and closing time over all week to set the start hour and stop hour. Then create the calendar retriving all the events from php api. The view id setted only in week view.
This is what I get:

As you can see, in some of the events the title is not displayed at all or just partially.
The html code is:

                                <div class="card border-0 card-body h-fit-content" style="padding-top:0.5rem;padding-bottom:0;margin-bottom:0.5rem;">
                                    <div id='calendar'></div>
                                </div>

Moreover when I hover on an event the mouse pointer become a “move pointer” even if I disabled editable and I would like to keep the normal pointer or a pointer that indicates that the event is clickable, because it is.
I would add an image, but when I make a screenshot it remove the pointer