Calendar in modal - code helper

xxxxxxxxxx
 
   [...]
​
  <link rel="stylesheet" href="../../../node_modules/mdb-calendar/css/calendar.min.css" />
​
  <main id="main-content">
        <a class="btn text-white btn-floating btn-lg active" id="calendarButton" data-mdb-button-init
          data-mdb-ripple-init style="background-color: rgb(76, 175, 80);"><i class="fas fa-calendar"></i></a>
  </main>
​
  <div class="modal" id="calendar-modal" tabindex="-1" aria-labelledby="calendarModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="card border border-info modal-content text-center">
            <div class="modal-header bg-info">
                <h5 class="modal-title" id="calendarModalLabel">CALENDARIO</h5>
                <button type="button" class="btn-close" data-mdb-ripple-init data-mdb-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="calendar" id="calendar" data-mdb-calendar-init></div>
            </div>
            <div class="modal-footer d-flex justify-content-center"></div>
        </div>
    </div>
</div>
​
  <script type="module">
    import { calendarManagement } from './js/calendar.js';
​
    document.addEventListener('DOMContentLoaded', function () {
​
      calendarManagement();
    });
  </script>
​
  [...]

​

xxxxxxxxxx
 
// ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
// Management for calendar plugin javascript file
// ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
​
// IMPORTING MDB KIT ES JS PACKAGE 
import { Modal, initMDB } from '../../../../node_modules/mdb-ui-kit/js/mdb.es.min.js';
initMDB({ Modal });
​
import * as mdb from '../../../../node_modules/mdb-ui-kit/js/mdb.umd.min.js'; // lib
import '../../../../node_modules/mdb-calendar/js/calendar.min.js';
​
export function calendarManagement() {
​
    const calendarModal = document.getElementById('calendar-modal');
    const calendarModalInstance = Modal.getOrCreateInstance(calendarModal);
​
    document.getElementById('calendarButton').addEventListener('click', function () {
        const events = [
            {
                summary: 'JS Conference',
                start: {
                    date: Calendar.dayjs().format('DD/MM/YYYY'),
                },
                end: {
                    date: Calendar.dayjs().format('DD/MM/YYYY'),
                },
                color: {
                    background: '#cfe0fc',
                    foreground: '#0a47a9',
                },
            },
            {
                summary: 'Vue Meetup',
                start: {
                    date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
                },
                end: {
                    date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
                },
                color: {
                    background: '#ebcdfe',
                    foreground: '#6e02b1',
                },
            },
            {
                summary: 'Angular Meetup',
                description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
                start: {
                    date: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY'),
                    dateTime: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
                },
                end: {
                    date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
                    dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
                },
                color: {
                    background: '#c7f5d9',
                    foreground: '#0b4121',
                },
            },
            {
                summary: 'React Meetup',
                start: {
                    date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
                },
                end: {
                    date: Calendar.dayjs().add(8, 'day').format('DD/MM/YYYY'),
                },
                color: {
                    background: '#fdd8de',
                    foreground: '#790619',
                },
            },
            {
                summary: 'Meeting',
                start: {
                    date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
                    dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
                },
                end: {
                    date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
                    dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
                },
                color: {
                    background: '#cfe0fc',
                    foreground: '#0a47a9',
                },
            },
            {
                summary: 'Call',
                start: {
                    date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
                    dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
                },
                end: {
                    date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
                    dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
                },
                color: {
                    background: '#292929',
                    foreground: '#f5f5f5',
                },
            }
        ];
​
        const calendarElement = calendarModal.querySelector('#calendar');
​
        calendarElement.setAttribute('data-mdb-addEventModalCaption', 'Aggiungi evento');
        calendarElement.setAttribute('data-mdb-editEventModalCaption', 'Modifica evento');
        
        const calendarInstance = Calendar.getInstance(calendarElement);
        calendarInstance.addEvents(events);
​
        calendarModalInstance.show();
    });
}

Console errors: 0