Открытие модального окна по dateclick для FullCalendar 4 - PullRequest
Новая
       40

Открытие модального окна по dateclick для FullCalendar 4

1 голос
/ 28 мая 2020

Я использую Materialize Css Modals (https://materializecss.com/modals.html), и я пытаюсь добавить Modal при нажатии на дату в календаре. 

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

Модальное окно открывается со стандартным HTML, указанным на веб-сайте Materialize, 

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

1 Ответ

2 голосов
/ 28 мая 2020 
instances[0].open();

Эти две строки выбирают все элементы с классом modal и инициализируют их: 

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

instances - это массив, поэтому нам нужно выбрать модальный вроде открывается, в нашем случае он первый (единственный).

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

...