完整日历未呈现某些标题

Question

我正在使用 fullCalendar 使用 html 和 php 每周显示事件。

这是 $(document).ready 函数内的代码：

            $.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();
            });
        }

该项目是关于医疗办公室及其预约。 此代码检查整个星期的办公室开放和关闭时间，以设置开始时间和停止时间。然后创建日历，从 php api 检索所有事件。仅在周视图中设置的视图 ID。 这就是我得到的：

如您所见，在某些事件中，标题根本不显示或仅部分显示。 html代码是：

                                <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>

此外，当我将鼠标悬停在事件上时，即使我禁用了可编辑，鼠标指针也会变成“移动指针”，并且我想保留正常指针或指示事件可单击的指针，因为它是可单击的。 我会添加图像，但是当我制作屏幕截图时，它会删除指针

Answer 1

抱歉耽搁了，这周我遇到了一些麻烦。 顺便说一句，这是悬停时指针问题的照片。

此外，我尝试制作一个片段来向您展示我做了什么，但我无法使其发挥作用。简而言之，如果我设置一个大的高度和一个eventMinHeight，标题都显示出来，但问题是2： 1-我不能使用固定高度和固定 eventMinHeight，因为它取决于一天有多少个事件以及名称有多长 2-如果我找到第一个问题的解决方案，正如您在照片中看到的那样，事件会相互溢出并且没有任何内容可读

请帮帮我:(

    $(document).ready(function() {

                    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: "08:00",
                        slotMaxTime: "21:00",
                        initialDate: '2024-06-12',
                        eventMinHeight : '80',
                        contentHeight: '80',
                        height: '400px',
                        navLinks: false, // can click day/week names to navigate views
                        // editable: false,
                        // selectable: true,
                        nowIndicator: true,
                        dayMaxEvents: true, // allow "more" link when too many events
                        events: [
                            {
                                title: 'event1',
                                start: '2024-06-12T10:00:00',
                                end: '2024-06-12T12:00:00',
                                backgroundColor: 'red',
                                borderColor: 'red',
                                textColor: 'white',
                                editable: false
                            },
                            {
                                title: 'event2',
                                start: '2024-06-12T13:00:00',
                                end: '2024-06-12T15:00:00',
                                backgroundColor: 'green',
                                borderColor: 'green',
                                textColor: 'white',
                                editable: false
                            }
                        ],
                        firstDay: 1,
                        headerToolbar: {
                            left: 'prev,next today',
                            center: 'title',
                            // right: 'dayGridMonth,dayGridWeek,dayGridDay'
                            right: ''
                        },
                        // initialDate: '2024-05-24',
                    });
                    calendar.setOption('locale', 'it');
                    calendar.render();
                    calendar.updateSize()

    });

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


    <div id="main-wrapper">
        <div class="content-body m-0 ">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-body p-0">
                                <div class=" p-3 col-lg-12 row" style="overflow: inherit;">
                                    <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' style="display: none;" ></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>