更改 fullCalendar resourceTimeGridDay 视图行高

问题描述

我在我的 React 项目中集成了 fullcalendar，如果我更改 slotMinTime 和 slotMaxTime 属性，则行会更改其高度。如果我减少显示每个插槽的小时数会变大，我无法将其恢复到实际大小。我使用了 contentHeight 和 aspectRatio 但它们似乎也不起作用。请帮忙。

<FullCalendar
        schedulerLicenseKey="CC-Attribution-NonCommercial-NoDerivatives"
        ref={calendarRef}
        plugins={[
            momentTimezonePlugin,Scrollgridplugin,resourceTimelinePlugin,resourceTimeGridplugin,googleCalendarPlugin,interactionPlugin
        ]}
        timeZone="America/New_York"
        height="100%"
        // aspectRatio={5}
        droppable={true}
        headerToolbar={{
            left : '',center : '',right : ''
        }}
        dayMinWidth={250}
        NowIndicator={true}
        slotEventOverlap={false}
        slotDuration="00:15:00"
        slotMinTime="07:00:00"
        slotMaxTime="19:00:00"
        slotLabelInterval="00:15"
        slotLabelFormat={{
            hour : 'numeric',minute : '2-digit',hour12 : true
        }}
        initialView="resourceTimeGridDay"
        editable={true}
        eventResourceEditable={true}
        allDaySlot={false}
        selectable={true}
        selectMirror={true}
        dayMaxEvents={true}
        resources={resources}
        events={appointments}
        slotLabelContent={SlotComp}
        resourceLabelContent={data => RenderResourceContent(data,setActiveProviderView)
        }
        resourceOrder="title"
        weekends={true}
        eventContent={data => (
            <EventComp
                data={data}
                appointments={appointments}
                apiLoading={apiLoading}
                addAppointmentToUpdate={addAppointmentToUpdate}
                addAppointmentToDuplicate={addAppointmentToDuplicate}
                addBreakAppointment={addBreakAppointment}
                updateAppointmentStatus={updateAppointmentStatus}
                showRecurringLoadingNotification={
                    showRecurringLoadingNotification
                }
                appointmentDetailsToggle={appointmentDetailsToggle}
                getPatientDetails={getPatientDetails}
            />
        )}
        selectConstraint="businessHours"
        eventConstraint="businessHours"
        select={newEventSelected}
        eventDrop={eventDropped}
        eventResize={eventResizeStopped}
        eventChange={eventChanged}
    />

如果我不指定最小和最大时间，这就是它的样子 https://drive.google.com/file/d/1R58BdUJAt11G2vZ0bbsvOJaPYpKPj33p/view?usp=sharing

在我指定之后 https://drive.google.com/file/d/1l6opSZClV0sz3kgVEQV6ioIyor-YIKZt/view?usp=sharing

行高达到 80 像素，否则只有 40 像素

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）