如何解除FullCalendar对事件内输入元素的交互限制？

问题原因 #

FullCalendar的事件容器默认会拦截点击事件并处理自身交互逻辑（如拖拽、弹窗触发等），导致内部输入框的原生焦点行为被干扰。eventInteractive: true仅控制事件是否可拖拽、调整大小，和输入框焦点问题无关。

精准解决方案 #

通过阻止输入框点击事件冒泡到FullCalendar父容器，让输入框的原生交互不受干扰，有两种实现方式：

方式1：直接在HTML中添加事件阻止 #

修改getEventHtml()返回的输入框代码，添加onclick="event.stopPropagation()"：

<div class="d-grid align-items-center justify-content-center text-center text-dark">
    <span class="inc-room-count btn btn-sm btn-secondary" data-date="2024-02-26">+</span>
    <span>
        <input onclick="event.stopPropagation()" class="form-control form-control-sm w-md-55px text-center numbers" value="1" data-date="2024-02-26">
    </span>
    <span class="dec-room-count btn btn-sm btn-secondary" data-date="2024-02-26">-</span>
    <span class="mt-2 lowest-fill-level">0 / 1</span>
</div>

方式2：通过FullCalendar的eventDidMount事件绑定 #

在Calendar配置中添加eventDidMount，给每个事件内的输入框绑定阻止冒泡的事件（还可同时处理加减按钮的交互）：

let calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    initialDate: '2024-02-26',
    locale: 'en',
    height: 'auto',
    eventColor: 'transparent',
    eventInteractive: true,
    fixedWeekCount: false,
    eventContent: function(arg) {
        let event = arg.event.extendedProps;
        return {html: getEventHtml(event)};
    },
    eventDidMount: function(arg) {
        // 处理输入框
        const input = arg.el.querySelector('.numbers');
        if (input) {
            input.addEventListener('click', (e) => {
                e.stopPropagation();
            });
        }
        // 可选：处理加减按钮，避免触发日历点击事件
        const btns = arg.el.querySelectorAll('.inc-room-count, .dec-room-count');
        btns.forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
            });
        });
    },
    eventSources: [
        {
            url: "https://www.example.com/source",
            method: "POST",
        },
    ],
});
calendar.render();

效果说明 #

两种方式都能让输入框直接获取原生焦点，无需依赖eventClick手动触发focus，交互体验和原生输入框完全一致。

内容的提问来源于stack exchange，提问作者Muhammet Akay