在 DateClick 上为 FullCalendar 4 打开模式

Question

我正在使用 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 打开。

Answer 1

instances[0].open();

这两行 select 包含 class 为 modal 的所有元素，并初始化它们：

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

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

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

在 DateClick 上为 FullCalendar 4 打开模式

Opening a modal on dateclick for FullCalendar 4

javascript

modal-dialog

fullcalendar

materialize