在 FullCalendar 4 的 dateclick 上打开模式答案

【问题标题】：Opening a modal on dateclick for FullCalendar 4在 FullCalendar 4 的 dateclick 上打开模式
【发布时间】：2020-05-28 08:24:44
【问题描述】：

我正在使用 MaterializeCss 模态 (https://materializecss.com/modals.html)，并且在单击日历中的日期时尝试添加模态。

<script>
    document.addEventListener('DOMContentLoaded', function() {

        var elems = document.querySelectorAll('.modal');
        var instances = M.Modal.init(elems);



        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {

            plugins: [ 'dayGrid', 'interaction' ],
            height: 655,
            selectable: true,
            dateClick: function(info) {

                // Not sure what to put here 

            },

        }
    );
        calendar.render();

    });
</script>

使用 Materialise 网站上给出的标准 HTML 打开模式，

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

但是我需要在dateClick函数上触发Modal打开。

【问题讨论】：

标签： javascript modal-dialog fullcalendar materialize

【解决方案1】：

instances[0].open();

这两行选择所有具有modal 类的元素，并将它们初始化：

var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);

instances 是一个数组，所以我们需要选择我们想要打开的模式，在我们的例子中它是第一个（唯一的）一个。

https://materializecss.com/modals.html#methods

【讨论】：