首页 > 解决方案 > 如何在事件 FullCalendar 中添加选择框

问题描述

如何在事件中添加选择框?我使用 eventRender,但渲染后字段为空,我无法更改值。

    eventRender: function(info) {
        var content = info.el.children[0];
        var eventProps = info.event.extendedProps;
        if(info.event.allDay){
            content.innerHTML = eventProps.name+'<br>'+eventProps.phone;
        }else{
            let apartment = eventProps.apartment == 0 || eventProps.apartment == null ? '' : eventProps.apartment;
            content.children[1].remove();
            var districtDiv = document.createElement('div');
            districtDiv.style.float = 'right';
            districtDiv.innerHTML = eventProps.district;
            content.insertBefore(districtDiv, content.firstChild);
            var newDiv = document.createElement('div');
            var html = `<div>
                            <div>${eventProps.street}</div>
                            <div>
                                <select class="select">
                                    <option value="" disabled selected>Type</option>
                                    <option>Type 1</option>
                                    <option>Type 2</option>
                                </select>
                                Ap: ${apartment}
                            </div>
                        </div>`;
            newDiv.innerHTML = html;
            content.appendChild(newDiv);
        }
    },
     eventClick: function(info) {
        if(info.jsEvent.target.className == 'select') return false;
    }

结果:

在此处输入图像描述

标签: javascripthtmlfullcalendarfullcalendar-4

解决方案


推荐阅读