Opening a modal on dateclick for FullCalendar 4

Question

I'm using MaterializeCss Modals (https://materializecss.com/modals.html), and I'm attempting to add a Modal when clicking on a date in a the calendar.

<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>

The modal opens with the standard HTML given on the Materialize website,

<!-- 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>

But I need to trigger the Modal opening on the dateClick function.

Answer 1

instances[0].open();

These two lines selects all elements with a class of modal, and intialises them:

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

instances is an array, so we need to select the modal we'd like to open, in our case it's the first (only) one.

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