${this._event.description}
`;\n this._content += description;\n }\n }\n\n _setTime() {\n const time = `\n \n ${eventTimePeriod(this._event, this._formats)}
`;\n this._content += time;\n }\n\n _initTooltip() {\n Manipulator.setDataAttribute(this._element, 'toggle', 'tooltip');\n Manipulator.setDataAttribute(this._element, 'offset', [0, 10]);\n Manipulator.setDataAttribute(this._element, 'html', true);\n this._element.setAttribute('title', this._content);\n }\n}\n\nexport default Tooltip;\n","import moment from 'moment';\nimport { getUID, element, typeCheckConfig, getjQuery, onDOMContentLoaded } from './mdb/util/index';\nimport Data from './mdb/dom/data';\nimport EventHandler from './mdb/dom/event-handler';\nimport Manipulator from './mdb/dom/manipulator';\nimport SelectorEngine from './mdb/dom/selector-engine';\n\nimport Tooltip from './utils/tooltips';\nimport { addModalTemplate, editModalTemplate } from './utils/templates';\nimport { eventType, eventTimePeriod } from './utils/utils';\n\n/**\n * ------------------------------------------------------------------------\n * Constants\n * ------------------------------------------------------------------------\n */\n\nconst NAME = 'calendar';\nconst DATA_KEY = 'mdb.calendar';\nconst CLASSNAME_CALENDAR = 'calendar';\nconst CLASSNAME_DAY_FIELD = 'day-field';\nconst CLASSNAME_CALENDAR_TOOLS = 'calendar-tools';\nconst CLASSNAME_CALENDAR_HEADING = 'calendar-heading';\nconst CLASSNAME_ALL_DAY_ROW = 'long-event-row';\nconst CLASSNAME_EVENTS_WRAPPER = 'events-wrapper';\nconst CLASSNAME_ACTIVE = 'active';\n\nconst SELECTOR_ACTIVE_CELL = `td.${CLASSNAME_ACTIVE}`;\nconst SELECTOR_CALENDAR_SUMMARY_INPUT = '.calendar-summary-input';\nconst SELECTOR_CALENDAR_LONG_EVENTS_CHECKBOX = '.calendar-long-events-checkbox';\n\nconst OPTIONS_TYPE = {\n weekdays: '(array|string)',\n months: '(array|string)',\n monthsShort: '(array|string)',\n mondayFirst: 'boolean',\n defaultView: 'string',\n twelveHour: 'boolean',\n defaultDate: '(object|string)',\n readonly: 'boolean',\n todayCaption: 'string',\n monthCaption: 'string',\n weekCaption: 'string',\n listCaption: 'string',\n allDayCaption: 'string',\n noEventsCaption: 'string',\n summaryCaption: 'string',\n descriptionCaption: 'string',\n startCaption: 'string',\n endCaption: 'string',\n addCaption: 'string',\n deleteCaption: 'string',\n editCaption: 'string',\n closeCaption: 'string',\n addEventModalCaption: 'string',\n editEventModalCaption: 'string',\n events: 'array',\n};\n\nconst DEFAULT_OPTIONS = {\n weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n months: [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ],\n monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n mondayFirst: false,\n defaultView: 'month',\n twelveHour: false,\n defaultDate: moment().format('DD/MM/YYYY'),\n readonly: false,\n todayCaption: 'today',\n monthCaption: 'month',\n weekCaption: 'week',\n allDayCaption: 'All day event',\n listCaption: 'list',\n noEventsCaption: 'No events',\n summaryCaption: 'Summary',\n descriptionCaption: 'Description',\n startCaption: 'Start',\n endCaption: 'End',\n addCaption: 'Add',\n deleteCaption: 'Remove',\n editCaption: 'Edit',\n closeCaption: 'Close',\n addEventModalCaption: 'Add an event',\n editEventModalCaption: 'Edit an event',\n events: [],\n};\n\n/**\n * ------------------------------------------------------------------------\n * Class Definition\n * ------------------------------------------------------------------------\n */\n\nclass Calendar {\n constructor(element, options = {}) {\n this._element = element;\n this._options = options;\n\n this.formats = {\n date: 'DD/MM/YYYY',\n dateTime: this.options.twelveHour ? 'DD/MM/YYYY hh:mm A' : 'DD/MM/YYYY HH:mm',\n time: this.options.twelveHour ? 'hh:mm A' : 'HH:mm',\n };\n this.view = this.options.defaultView;\n this.weekdays = [...this.options.weekdays];\n this.activeMoment = moment(this.options.defaultDate, this.formats.date);\n this.events = this._formatEvents();\n this._newEvent = {};\n this._activeEvent = {};\n\n this._addModalId = getUID('addModal');\n this._editModalId = getUID('editModal');\n this._table = null;\n this._tHead = null;\n this._tBody = null;\n this._addEventModal = null;\n this._editEventModal = null;\n this._tools = null;\n this._arrowLeft = null;\n this._arrowRight = null;\n this._pickedStartDate = null;\n\n this._addEventModalInstance = null;\n this._editEventModalInstance = null;\n this._inputInstances = [];\n this._tooltips = [];\n\n if (this._element) {\n Data.setData(element, DATA_KEY, this);\n }\n\n this.init();\n }\n\n // Getters\n get options() {\n const config = {\n ...DEFAULT_OPTIONS,\n ...Manipulator.getDataAttributes(this._element),\n ...this._options,\n };\n\n typeCheckConfig(NAME, config, OPTIONS_TYPE);\n\n if (typeof config.weekdays === 'string') config.weekdays = config.weekdays.split(', ');\n if (typeof config.months === 'string') config.months = config.months.split(', ');\n if (typeof config.monthsShort === 'string') config.monthsShort = config.monthsShort.split(', ');\n\n return config;\n }\n\n get activeMomentCopy() {\n return moment(this.activeMoment);\n }\n\n get activeEventIndex() {\n return this._activeEvent.key - 1;\n }\n\n // Public\n init() {\n this._appendTemplate();\n this._sortEvents();\n this._addEventsKeys();\n this._setEvents();\n this._orderEvents();\n this._setLongEventCaptions();\n this._addListeners();\n this._initTooltips();\n\n if (!this.options.readonly) {\n this._createAddEventModal();\n this._createEditEventModal();\n }\n }\n\n prev() {\n switch (this.view) {\n case 'month':\n this.activeMoment.startOf('month').subtract(1, 'month');\n break;\n case 'week':\n case 'list':\n this.activeMoment.subtract(1, 'week');\n this._setTHeadCaptions();\n break;\n default:\n return;\n }\n\n this._refreshTable();\n this._triggerEvent('prev');\n }\n\n next() {\n switch (this.view) {\n case 'month':\n this.activeMoment.startOf('month').add(1, 'month');\n this._setTBody();\n break;\n case 'week':\n case 'list':\n this.activeMoment.add(1, 'week');\n this._setTHeadCaptions();\n break;\n default:\n return;\n }\n\n this._refreshTable();\n this._triggerEvent('next');\n }\n\n today() {\n this.activeMoment = moment();\n this._setHeading();\n\n switch (this.view) {\n case 'month':\n this._setTBody();\n break;\n case 'week':\n case 'list':\n this._setTHeadCaptions();\n break;\n default:\n return;\n }\n\n this._refreshTable();\n this._triggerEvent('today');\n }\n\n changeView(target) {\n this.view = target;\n this._setTHeadCaptions();\n this._setHeading();\n this._refreshTable();\n this._triggerEvent('viewChange');\n }\n\n refresh() {\n this._clearEvents();\n this._sortEvents();\n this._addEventsKeys();\n this._setTBody();\n this._setEvents();\n this._orderEvents();\n this._setLongEventCaptions();\n this._initTooltips();\n this._triggerEvent('update');\n }\n\n addEvents(events) {\n this.events = this._formatEvents([...this.events, ...events]);\n this.refresh();\n }\n\n removeEvents() {\n this.events = [];\n this.refresh();\n }\n\n dispose() {\n this.removeEvents();\n this._removeListeners();\n this._disposeModals();\n\n Data.removeData(this._element, DATA_KEY);\n this._element.innerHTML = null;\n }\n\n // Private\n _formatEvents(events = this.options.events) {\n return events.map((event) => {\n event = { ...event };\n event.created = event.created && moment(event.created, this.formats.dateTime);\n event.start.date = event.start.date && moment(event.start.date, this.formats.date);\n event.start.dateTime = event.start.dateTime\n ? moment(event.start.dateTime, this.formats.dateTime)\n : moment(event.start.date, this.formats.date);\n event.end.date = event.end.date && moment(event.end.date, this.formats.date);\n event.end.dateTime = event.end.dateTime\n ? moment(event.end.dateTime, this.formats.dateTime)\n : moment(event.end.date, this.formats.date);\n event.color = event.color || {};\n return event;\n });\n }\n\n _appendTemplate() {\n this._appendTools();\n this._appendTable();\n if (this.options.mondayFirst) {\n this.weekdays.push(this.weekdays.shift());\n }\n this._setTHeadCaptions();\n this._setTBody();\n }\n\n _appendTable() {\n this._table = element('table');\n this._element.append(this._table);\n\n this._tHead = element('thead');\n this._table.append(this._tHead);\n\n this._tBody = element('tbody');\n this._table.append(this._tBody);\n\n const tr = element('tr');\n this._tHead.append(tr);\n }\n\n _appendTools() {\n this._tools = element('div');\n const leftTools = element('div');\n const rightTools = element('div');\n this._arrowLeft = element('button');\n this._arrowRight = element('button');\n this._todayBtn = element('button');\n this._heading = element('span');\n this._monthBtn = element('button');\n this._weekBtn = element('button');\n this._listBtn = element('button');\n\n Manipulator.addClass(this._tools, CLASSNAME_CALENDAR_TOOLS);\n Manipulator.addClass(this._heading, CLASSNAME_CALENDAR_HEADING);\n Manipulator.addClass(leftTools, 'btn-group');\n Manipulator.addClass(leftTools, 'btn-group-sm');\n Manipulator.addClass(leftTools, 'shadow-0');\n Manipulator.addClass(rightTools, 'btn-group');\n Manipulator.addClass(rightTools, 'btn-group-sm');\n Manipulator.addClass(rightTools, 'shadow-0');\n [\n this._arrowLeft,\n this._arrowRight,\n this._todayBtn,\n this._monthBtn,\n this._weekBtn,\n this._listBtn,\n ].forEach((btn) => {\n Manipulator.setDataAttribute(btn, 'ripple-color', 'dark');\n });\n\n this._arrowLeft.innerHTML = '';\n this._arrowRight.innerHTML = '';\n this._todayBtn.innerHTML = this.options.todayCaption;\n this._monthBtn.innerHTML = this.options.monthCaption;\n this._weekBtn.innerHTML = this.options.weekCaption;\n this._listBtn.innerHTML = this.options.listCaption;\n\n ['btn', 'btn-outline-primary'].forEach((className) => {\n Manipulator.addClass(this._arrowLeft, className);\n Manipulator.addClass(this._arrowRight, className);\n Manipulator.addClass(this._todayBtn, className);\n Manipulator.addClass(this._monthBtn, className);\n Manipulator.addClass(this._weekBtn, className);\n Manipulator.addClass(this._listBtn, className);\n });\n\n this._setHeading();\n\n leftTools.append(this._arrowLeft);\n leftTools.append(this._arrowRight);\n leftTools.append(this._todayBtn);\n rightTools.append(this._monthBtn);\n rightTools.append(this._weekBtn);\n rightTools.append(this._listBtn);\n this._tools.append(leftTools);\n this._tools.append(this._heading);\n this._tools.append(rightTools);\n this._element.append(this._tools);\n }\n\n _setTHeadCaptions() {\n const headTr = SelectorEngine.findOne('tr', this._tHead);\n headTr.innerHTML = '';\n\n if (this.view === 'month') {\n this.weekdays.forEach((day) => {\n const th = element('th');\n th.innerHTML = day;\n headTr.append(th);\n });\n } else if (this.view === 'week') {\n const th = element('th');\n headTr.append(th);\n\n for (let i = 0; i < 7; i++) {\n const th = element('th');\n\n if (this.options.mondayFirst) {\n th.innerHTML = `${this.weekdays[i]} ${this.activeMomentCopy\n .startOf('week')\n .add(i + 1, 'day')\n .format('DD/MM')}`;\n } else {\n th.innerHTML = `${this.weekdays[i]} ${this.activeMomentCopy\n .startOf('week')\n .add(i, 'day')\n .format('DD/MM')}`;\n }\n\n headTr.append(th);\n }\n }\n }\n\n _setTBody() {\n this._clearTBody();\n Manipulator.addClass(this._table, this.view);\n\n switch (this.view) {\n case 'month':\n this._appendWeekRows();\n this._appendPrevMonthDays();\n this._appendCurrentMonthDays();\n this._appendNextMonthDays();\n break;\n case 'week':\n this._appendLongEventSection();\n this._appendHoursSection();\n break;\n default:\n return;\n }\n }\n\n _appendWeekRows() {\n for (let i = 0; i < 6; i++) {\n const tr = element('tr');\n this._tBody.append(tr);\n }\n }\n\n _appendPrevMonthDays() {\n const firstDayOfActiveMonth = this.activeMomentCopy.startOf('month').day();\n const prevMonthDays = this._getArrayFromNumber(\n this.activeMomentCopy.subtract(1, 'months').daysInMonth()\n );\n\n let splicedPrevMonthDays;\n if (this.options.mondayFirst) {\n if (firstDayOfActiveMonth === 0) {\n splicedPrevMonthDays = prevMonthDays.reverse().splice(0, 6).reverse();\n } else {\n splicedPrevMonthDays = prevMonthDays\n .reverse()\n .splice(0, firstDayOfActiveMonth - 1)\n .reverse();\n }\n } else {\n splicedPrevMonthDays = prevMonthDays.reverse().splice(0, firstDayOfActiveMonth).reverse();\n }\n\n splicedPrevMonthDays.forEach((day) => {\n this._appendPrevMonthDayFields(day);\n });\n }\n\n _appendPrevMonthDayFields(day) {\n const eventsWrapper = element('div');\n const td = element('td');\n const dayField = element('div');\n\n Manipulator.addClass(eventsWrapper, CLASSNAME_EVENTS_WRAPPER);\n Manipulator.addClass(td, 'disabled');\n Manipulator.addClass(dayField, CLASSNAME_DAY_FIELD);\n\n td.append(dayField);\n td.append(eventsWrapper);\n\n const date = `${day + 1}/${\n this.activeMomentCopy.startOf('month').subtract(1, 'month').month() + 1\n }/${this.activeMomentCopy.startOf('month').subtract(1, 'month').year()}`;\n td.dataset.date = date;\n\n dayField.innerHTML = day + 1;\n SelectorEngine.findOne('tr', this._tBody).append(td);\n\n if (!this.options.readonly) {\n this._addDayFieldListeners(td, date);\n }\n }\n\n _addDayFieldListeners(element, date) {\n EventHandler.on(element, 'mousedown', () => this._setStartDate(date));\n EventHandler.on(element, 'mouseenter', () => this._highlightLongEventField(date));\n EventHandler.on(element, 'mouseup', (e) => this._toggleAddEventModal(e, date));\n EventHandler.on(element, 'dragenter', (e) => this._handleDragEnter(e));\n EventHandler.on(element, 'dragover', (e) => this._handleDragOver(e));\n EventHandler.on(element, 'dragleave', (e) => this._handleDragLeave(e));\n EventHandler.on(element, 'drop', (e) => this._handleDrop(e, date));\n }\n\n _setStartDate(date) {\n this._pickedStartDate = date;\n }\n\n _highlightLongEventField(date) {\n if (!this._pickedStartDate) return;\n\n SelectorEngine.find('td', this._tBody).forEach((td) => {\n const startDate = moment(this._pickedStartDate, this.formats.dateTime);\n const selectionDate = moment(date, this.formats.dateTime);\n const tdDate = moment(td.dataset.dateTime || td.dataset.date, this.formats.dateTime);\n\n if (\n (tdDate.isBefore(selectionDate) && tdDate.isAfter(startDate)) ||\n (tdDate.isAfter(selectionDate) && tdDate.isBefore(startDate))\n ) {\n Manipulator.addClass(td, CLASSNAME_ACTIVE);\n } else {\n Manipulator.removeClass(td, CLASSNAME_ACTIVE);\n }\n });\n }\n\n _clearHighlight() {\n SelectorEngine.find(SELECTOR_ACTIVE_CELL, this._tBody).forEach((td) => {\n Manipulator.removeClass(td, CLASSNAME_ACTIVE);\n });\n }\n\n _toggleAddEventModal(e, date) {\n if (e.which === 3) {\n return;\n }\n this._newEvent = {};\n\n const start = {};\n const end = {};\n\n start.date = moment\n .min([moment(this._pickedStartDate, this.formats.date), moment(date, this.formats.date)])\n .startOf('day');\n end.date = moment\n .max([moment(this._pickedStartDate, this.formats.date), moment(date, this.formats.date)])\n .startOf('day');\n\n start.dateTime = moment.min([\n moment(this._pickedStartDate, this.formats.dateTime),\n moment(date, this.formats.dateTime),\n ]);\n end.dateTime = moment.max([\n moment(this._pickedStartDate, this.formats.dateTime),\n moment(date, this.formats.dateTime),\n ]);\n\n if (start.dateTime.format('hh:mm A') !== '12:00 AM') {\n end.dateTime.add(1, 'hour');\n }\n\n this._setNewEvent(start, end);\n this._updateAddEventModalContent();\n if (!this._addEventModalInstance) {\n this._addEventModalInstance = new mdb.Modal(this._addEventModal);\n }\n this._addEventModalInstance.show();\n this._initInputs();\n this._initPickers();\n this._addInputsListeners();\n this._clearSelection();\n\n // wait for modal animation end\n setTimeout(() => {\n const summaryInput = SelectorEngine.findOne(\n SELECTOR_CALENDAR_SUMMARY_INPUT,\n this._addEventModal\n );\n summaryInput.focus();\n }, 500);\n }\n\n _setNewEvent(start, end) {\n this._newEvent = {\n summary: '',\n description: '',\n start: {\n date: start.date,\n dateTime: start.dateTime,\n },\n end: {\n date: end.date,\n dateTime: end.dateTime,\n },\n color: {\n background: '#1266f1',\n foreground: 'white',\n },\n };\n }\n\n _clearSelection() {\n if (window.getSelection) {\n if (window.getSelection().empty) {\n window.getSelection().empty();\n } else if (window.getSelection().removeAllRanges) {\n window.getSelection().removeAllRanges();\n }\n } else if (document.selection) {\n document.selection.empty();\n }\n\n this._pickedStartDate = null;\n this._clearHighlight();\n }\n\n // prettier-ignore\n _initInputs() {\n this._inputInstances = SelectorEngine.find(\n '.form-outline',\n this._addEventModal\n ).map((formOutline) => {\n const instance = new mdb.Input(formOutline);\n instance.init();\n return instance;\n });\n this._inputInstances.push(...SelectorEngine.find(\n '.form-outline',\n this._editEventModal\n ).map((formOutline) => {\n const instance = new mdb.Input(formOutline);\n instance.init();\n return instance;\n }));\n }\n\n _updateInputs() {\n this._inputInstances.forEach((instance) => instance.update());\n }\n\n _initPickers() {\n /* eslint-disable no-new */\n SelectorEngine.find('.datepicker', this._addEventModal).forEach((formOutline) => {\n new mdb.Datepicker(formOutline);\n });\n SelectorEngine.find('.datepicker', this._editEventModal).forEach((formOutline) => {\n new mdb.Datepicker(formOutline);\n });\n SelectorEngine.find('.timepicker', this._addEventModal).forEach((formOutline) => {\n const input = SelectorEngine.findOne('input', formOutline);\n const value = input.value;\n new mdb.Timepicker(formOutline, { defaultTime: value, format24: !this.options.twelveHour });\n });\n SelectorEngine.find('.timepicker', this._editEventModal).forEach((formOutline) => {\n const input = SelectorEngine.findOne('input', formOutline);\n const value = input.value;\n new mdb.Timepicker(formOutline, { defaultTime: value, format24: !this.options.twelveHour });\n });\n }\n\n _addInputsListeners() {\n SelectorEngine.find('input', this._addEventModal).forEach((input) => {\n EventHandler.on(input, 'input', (e) => this._newEventUpdateData(e));\n });\n SelectorEngine.find('input', this._editEventModal).forEach((input) => {\n EventHandler.on(input, 'input', (e) => this._editActiveEventData(e));\n });\n SelectorEngine.find('textarea', this._addEventModal).forEach((textarea) => {\n EventHandler.on(textarea, 'input', (e) => this._newEventUpdateData(e));\n });\n SelectorEngine.find('textarea', this._editEventModal).forEach((textarea) => {\n EventHandler.on(textarea, 'input', (e) => this._editActiveEventData(e));\n });\n SelectorEngine.find('.datepicker', this._addEventModal).forEach((picker) => {\n const fakeEvent = {};\n const pickerToggler = SelectorEngine.findOne('.datepicker-toggle-button', picker);\n fakeEvent.target = SelectorEngine.findOne('input', picker);\n EventHandler.on(picker, 'dateChange.mdb.datepicker', () => {\n this._newEventUpdateData(fakeEvent);\n });\n EventHandler.on(pickerToggler, 'click', (e) => e.preventDefault());\n });\n SelectorEngine.find('.timepicker', this._addEventModal).forEach((picker) => {\n const fakeEvent = {};\n fakeEvent.target = SelectorEngine.findOne('input', picker);\n EventHandler.on(picker, 'input.mdb.timepicker', () => {\n this._newEventUpdateData(fakeEvent);\n });\n });\n SelectorEngine.find('.datepicker', this._editEventModal).forEach((picker) => {\n const fakeEvent = {};\n const pickerToggler = SelectorEngine.findOne('.datepicker-toggle-button', picker);\n fakeEvent.target = SelectorEngine.findOne('input', picker);\n EventHandler.on(picker, 'dateChange.mdb.datepicker', () => {\n this._editActiveEventData(fakeEvent);\n });\n EventHandler.on(pickerToggler, 'click', (e) => e.preventDefault());\n });\n SelectorEngine.find('.timepicker', this._editEventModal).forEach((picker) => {\n const fakeEvent = {};\n fakeEvent.target = SelectorEngine.findOne('input', picker);\n EventHandler.on(picker, 'input.mdb.timepicker', () => {\n this._editActiveEventData(fakeEvent);\n });\n });\n }\n\n _newEventUpdateData(e) {\n switch (e.target.name) {\n case 'summary':\n this._newEvent.summary = e.target.value;\n break;\n case 'description':\n this._newEvent.description = e.target.value;\n break;\n case 'start.date':\n this._newEvent.start.date = moment(e.target.value, this.formats.date);\n this._newEvent.start.dateTime = moment(\n `${e.target.value} ${this._newEvent.start.dateTime.format(this.formats.date)}`,\n this.formats.date\n );\n break;\n case 'end.date':\n this._newEvent.end.date = moment(e.target.value, this.formats.date);\n this._newEvent.end.dateTime = moment(\n `${e.target.value} ${this._newEvent.end.dateTime.format(this.formats.date)}`,\n this.formats.date\n );\n break;\n case 'start.time':\n this._newEvent.start.dateTime = moment(\n `${this._newEvent.start.date.format(this.formats.date)} ${e.target.value}`,\n this.formats.dateTime\n );\n break;\n case 'end.time':\n this._newEvent.end.dateTime = moment(\n `${this._newEvent.end.date.format(this.formats.date)} ${e.target.value}`,\n this.formats.dateTime\n );\n break;\n case 'color.background':\n if (!this._newEvent.color) this._newEvent.color = {};\n this._newEvent.color.background = e.target.value;\n break;\n default:\n return;\n }\n this._clearValidation();\n }\n\n _editActiveEventData(e) {\n switch (e.target.name) {\n case 'summary':\n this._activeEvent.summary = e.target.value;\n break;\n case 'description':\n this._activeEvent.description = e.target.value;\n break;\n case 'start.date':\n this._activeEvent.start.date = moment(e.target.value, this.formats.date);\n this._activeEvent.start.dateTime = moment(\n `${e.target.value} ${this._activeEvent.start.dateTime.format(this.formats.date)}`,\n this.formats.date\n );\n break;\n case 'end.date':\n this._activeEvent.end.date = moment(e.target.value, this.formats.date);\n this._activeEvent.end.dateTime = moment(\n `${e.target.value} ${this._activeEvent.end.dateTime.format(this.formats.date)}`,\n this.formats.date\n );\n break;\n case 'start.time':\n this._activeEvent.start.dateTime = moment(\n `${this._activeEvent.start.date.format(this.formats.date)} ${e.target.value}`,\n this.formats.dateTime\n );\n break;\n case 'end.time':\n this._activeEvent.end.dateTime = moment(\n `${this._activeEvent.end.date.format(this.formats.date)} ${e.target.value}`,\n this.formats.dateTime\n );\n break;\n case 'color.background':\n if (!this._activeEvent.color) this._activeEvent.color = {};\n this._activeEvent.color.background = e.target.value;\n break;\n default:\n return;\n }\n this._clearValidation();\n }\n\n _toggleInfoEventModal(e) {\n e.stopPropagation();\n }\n\n _toggleEditEventModal(e, event) {\n this._clearSelection();\n e.stopPropagation();\n if (e.which === 3) return;\n\n this._setActiveEvent(event);\n this._updateEditEventModalContent();\n if (!this._editEventModalInstance) {\n this._editEventModalInstance = new mdb.Modal(this._editEventModal);\n }\n this._editEventModalInstance.show();\n this._initInputs();\n this._initPickers();\n this._addInputsListeners();\n }\n\n _setActiveEvent(event) {\n this._activeEvent = {\n ...event,\n start: {\n ...event.start,\n },\n end: {\n ...event.end,\n },\n color: {\n ...event.color,\n },\n };\n }\n\n _appendCurrentMonthDays() {\n const firstDayOfActiveMonth = this.activeMomentCopy.startOf('month').day();\n const currentMonthDays = this._getArrayFromNumber(this.activeMomentCopy.daysInMonth());\n\n const arrayOfCurrentMonthDays = [];\n\n if (this.options.mondayFirst) {\n if (firstDayOfActiveMonth === 0) {\n arrayOfCurrentMonthDays.push(currentMonthDays.slice(0, 1));\n arrayOfCurrentMonthDays.push(currentMonthDays.slice(1, 8 - firstDayOfActiveMonth));\n } else {\n arrayOfCurrentMonthDays.push(currentMonthDays.slice(0, 8 - firstDayOfActiveMonth));\n }\n\n for (let i = 7; i <= 35; i += 7) {\n arrayOfCurrentMonthDays.push(\n currentMonthDays.slice(8 - firstDayOfActiveMonth + i - 7, 8 - firstDayOfActiveMonth + i)\n );\n }\n } else {\n arrayOfCurrentMonthDays.push(currentMonthDays.slice(0, 7 - firstDayOfActiveMonth));\n for (let i = 7; i <= 35; i += 7) {\n arrayOfCurrentMonthDays.push(\n currentMonthDays.slice(7 - firstDayOfActiveMonth + i - 7, 7 - firstDayOfActiveMonth + i)\n );\n }\n }\n\n this._createCurrentMonthDayFields(arrayOfCurrentMonthDays);\n }\n\n _createCurrentMonthDayFields(arrayOfCurrentMonthDays) {\n for (let i = 0; i < 6; i++) {\n for (let j = 0; j < arrayOfCurrentMonthDays[i].length; j++) {\n const td = element('td');\n const eventsWrapper = element('div');\n const dayField = element('div');\n\n Manipulator.addClass(eventsWrapper, CLASSNAME_EVENTS_WRAPPER);\n Manipulator.addClass(dayField, CLASSNAME_DAY_FIELD);\n\n const currentDay = arrayOfCurrentMonthDays[i][j] + 1;\n dayField.innerHTML = currentDay;\n const date = `${currentDay}/${this.activeMoment.month() + 1}/${this.activeMoment.year()}`;\n td.dataset.date = date;\n\n if (moment(date, this.formats.date).isSame(moment(), 'day')) {\n Manipulator.addClass(td, 'today');\n }\n\n td.append(dayField);\n td.append(eventsWrapper);\n SelectorEngine.find('tr', this._tBody)[i].append(td);\n\n if (!this.options.readonly) {\n this._addDayFieldListeners(td, date);\n }\n }\n }\n }\n\n _sortEvents() {\n this.events.sort((a, b) => moment(a.start.dateTime).diff(b.start.dateTime));\n }\n\n _addEventsKeys() {\n this.events.forEach((event, key) => (event.key = key + 1));\n }\n\n _setEvents() {\n this.events.forEach((event, key) => {\n this._appendEvent(event, key);\n });\n\n if (this.view === 'list') {\n this._appendEmptyList();\n }\n }\n\n _appendEvent(event) {\n switch (this.view) {\n case 'month':\n this._appendMonthEvent(event);\n break;\n case 'week':\n this._appendWeekEvent(event);\n break;\n case 'list':\n this._appendListEvent(event);\n break;\n default:\n return;\n }\n }\n\n _appendMonthEvent(event) {\n SelectorEngine.find('td', this._tBody).forEach((td) => {\n const tdDate = moment(td.dataset.date, this.formats.date);\n const eventEl = element('div');\n\n if (moment(event.start.date).isSame(tdDate)) {\n this._appendEventFirstDay(eventEl, event, td);\n } else if (\n moment(event.start.dateTime).isBefore(tdDate) &&\n moment(event.end.dateTime).isSameOrAfter(tdDate)\n ) {\n this._appendEventContinuation(eventEl, event, td);\n }\n\n if (this.options.readonly) {\n Manipulator.addClass(eventEl, 'event-readonly');\n } else {\n eventEl.setAttribute('draggable', true);\n this._appendMonthListeners(eventEl, event);\n }\n\n new Tooltip(eventEl, event, this.formats);\n });\n }\n\n _appendEventFirstDay(eventEl, event, td) {\n event.order = SelectorEngine.find('.event', td).length;\n Manipulator.style(eventEl, { order: event.key });\n Manipulator.addClass(eventEl, 'event');\n Manipulator.addClass(eventEl, `event-${event.key}`);\n Manipulator.setDataAttribute(eventEl, 'event-key', event.key);\n Manipulator.setDataAttribute(eventEl, 'event-order', event.order);\n\n if (\n event.start.dateTime.isSame(event.end.dateTime, 'day') &&\n !event.start.dateTime.isSame(event.end.dateTime, 'time')\n ) {\n const circle = element('i');\n ['fas', 'fa-circle', 'pe-1', 'event-circle'].forEach((className) => {\n Manipulator.addClass(circle, className);\n });\n Manipulator.addClass(eventEl, 'event-short');\n Manipulator.style(circle, { color: event.color && event.color.background });\n eventEl.append(circle);\n } else {\n Manipulator.style(eventEl, {\n background: event.color && event.color.background,\n color: event.color && event.color.foreground,\n });\n }\n\n eventEl.append(event.summary);\n SelectorEngine.findOne(`.${CLASSNAME_EVENTS_WRAPPER}`, td).append(eventEl);\n }\n\n _appendEventContinuation(eventEl, event, td) {\n eventEl.innerHTML = ' ';\n Manipulator.style(eventEl, {\n order: event.key,\n background: event.color && event.color.background,\n color: event.color && event.color.foreground,\n });\n\n Manipulator.setDataAttribute(eventEl, 'event-key', event.key);\n Manipulator.setDataAttribute(eventEl, 'event-order', event.order);\n ['event', `event-${event.key}`, 'event-long'].forEach((className) => {\n Manipulator.addClass(eventEl, className);\n });\n\n SelectorEngine.findOne(`.${CLASSNAME_EVENTS_WRAPPER}`, td).append(eventEl);\n }\n\n _appendMonthListeners(eventEl, event) {\n EventHandler.on(eventEl, 'dragstart', (e) => this._handleDragStart(e, event));\n EventHandler.on(eventEl, 'dragend', (e) => this._handleDragEnd(e, event));\n EventHandler.on(eventEl, 'mouseup', (e) => this._toggleEditEventModal(e, event));\n EventHandler.on(eventEl, 'mouseenter', () => this._markEvent(event));\n EventHandler.on(eventEl, 'mouseleave', () => this._unmarkEvent(event));\n }\n\n _markEvent(event) {\n SelectorEngine.find(`.event-${event.key}`, this._tBody).forEach((event) => {\n Manipulator.addClass(event, CLASSNAME_ACTIVE);\n });\n }\n\n _unmarkEvent(event) {\n SelectorEngine.find(`.event-${event.key}`, this._tBody).forEach((event) => {\n Manipulator.removeClass(event, CLASSNAME_ACTIVE);\n });\n }\n\n _handleDragStart(e, event) {\n this._hideTooltip(e);\n this._clearSelection();\n const eventElements = SelectorEngine.find(`.event-${event.key}`, this._tBody);\n eventElements.forEach((eventEl) => {\n Manipulator.addClass(eventEl, 'dragging');\n });\n e.dataTransfer.setData('text/plain', event.key);\n }\n\n _handleDragEnd(e, event) {\n const eventElements = SelectorEngine.find(`.event-${event.key}`, this._tBody);\n eventElements.forEach((eventEl) => {\n Manipulator.removeClass(eventEl, 'dragging');\n });\n }\n\n _handleDragOver(e) {\n if (e.preventDefault) {\n e.preventDefault();\n }\n\n return false;\n }\n\n _handleDragEnter(e) {\n Manipulator.addClass(e.target, 'dragenter');\n }\n\n _handleDragLeave(e) {\n Manipulator.removeClass(e.target, 'dragenter');\n }\n\n _handleDrop(e, date) {\n const eventKey = parseInt(e.dataTransfer.getData('text/plain'), 10);\n const event = this.events[eventKey - 1];\n const eventStartDate = moment(event.start.dateTime, this.formats.dateTime);\n const eventStartTime = moment(event.start.dateTime).format(this.formats.time);\n const eventEndDate = moment(event.end.dateTime, this.formats.dateTime);\n const eventDuration = eventEndDate.diff(eventStartDate);\n\n event.start = {\n date: moment(date, this.formats.date),\n dateTime: moment(`${date} ${eventStartTime}`, this.formats.dateTime),\n };\n\n event.end = {\n date: moment(date, this.formats.date).add(eventDuration),\n dateTime: moment(`${date} ${eventStartTime}`, this.formats.dateTime).add(eventDuration),\n };\n\n this.refresh();\n }\n\n _orderEvents() {\n SelectorEngine.find(`.${CLASSNAME_EVENTS_WRAPPER}`, this._tBody).forEach((eventsWrapper) => {\n const events = SelectorEngine.find('.event', eventsWrapper);\n for (let i = 0; i <= events.length; i++) {\n if (!events[i]) {\n return;\n }\n let isOrderCorrect =\n this._getAllPrevEl(events[i]).length < parseInt(events[i].dataset.mdbEventOrder, 10);\n\n while (isOrderCorrect) {\n const fakeEvent = element('div');\n fakeEvent.innerHTML = ' ';\n Manipulator.style(fakeEvent, { order: events[i].dataset.mdbEventOrder });\n Manipulator.addClass(fakeEvent, 'fake-event');\n eventsWrapper.insertBefore(fakeEvent, events[i]);\n\n SelectorEngine.find('div', eventsWrapper).forEach((event, key) => {\n if (event.dataset.mdbEventOrder < key) {\n SelectorEngine.find(`.event-${event.dataset.mdbEventKey}`, this._tBody).forEach(\n (event) => (event.dataset.mdbEventOrder = key)\n );\n }\n });\n\n isOrderCorrect =\n this._getAllPrevEl(events[i]).length < parseInt(events[i].dataset.mdbEventOrder, 10);\n }\n }\n });\n }\n\n _appendNextMonthDays() {\n const dayRows = SelectorEngine.find('tr', this._tBody);\n const numberOfEmptyFieldsInFifthRow = 7 - SelectorEngine.find('td', dayRows[4]).length;\n const numberOfEmptyFieldsInSixthRow = 7 - SelectorEngine.find('td', dayRows[5]).length;\n\n if (numberOfEmptyFieldsInFifthRow > 0) {\n this._appendEventsInRow(dayRows[4], numberOfEmptyFieldsInFifthRow);\n }\n\n if (numberOfEmptyFieldsInSixthRow > 0) {\n this._appendEventsInRow(\n dayRows[5],\n numberOfEmptyFieldsInSixthRow,\n numberOfEmptyFieldsInFifthRow\n );\n }\n }\n\n _appendEventsInRow(row, sixthRowEmptyFields, fifthRowEmptyFields = 0) {\n for (let i = 0; i < sixthRowEmptyFields; i++) {\n const eventsWrapper = element('div');\n const td = element('td');\n const dayField = element('div');\n\n Manipulator.addClass(eventsWrapper, CLASSNAME_EVENTS_WRAPPER);\n Manipulator.addClass(td, 'disabled');\n Manipulator.addClass(dayField, 'day-field');\n\n dayField.innerHTML = i + 1 + fifthRowEmptyFields;\n\n const date = `${i + 1 + fifthRowEmptyFields}/${\n this.activeMomentCopy.startOf('month').add(1, 'month').month() + 1\n }/${this.activeMomentCopy.startOf('month').add(1, 'month').year()}`;\n td.dataset.date = date;\n\n td.append(dayField);\n td.append(eventsWrapper);\n row.append(td);\n\n if (!this.options.readonly) {\n this._addDayFieldListeners(td, date);\n }\n }\n }\n\n _appendWeekEvent(event) {\n this._appendLongWeekEvent(event);\n this._appendDateTimeWeekEvent(event);\n }\n\n _appendLongWeekEvent(event) {\n SelectorEngine.find('tr.long-event-row td', this._tBody).forEach((td, key) => {\n const tdDate = this.options.mondayFirst\n ? this.activeMomentCopy.startOf('week').add(key, 'day').add(1, 'day')\n : this.activeMomentCopy.startOf('week').add(key, 'day');\n\n const eventEl = element('div');\n\n if (moment(event.start.date).isSame(tdDate)) {\n Manipulator.style(eventEl, {\n order: event.key,\n });\n\n event.order = SelectorEngine.find('.event', td).length;\n\n Manipulator.addClass(eventEl, 'event');\n Manipulator.addClass(eventEl, `event-${event.key}`);\n Manipulator.setDataAttribute(eventEl, 'event-key', event.key);\n Manipulator.setDataAttribute(eventEl, 'event-order', event.order);\n\n if (\n event.start.dateTime.isSame(event.end.dateTime, 'day') &&\n !event.start.dateTime.isSame(event.end.dateTime, 'time')\n ) {\n const circle = element('i');\n ['fas', 'fa-circle', 'pe-1', 'event-circle'].forEach((className) => {\n Manipulator.addClass(circle, className);\n });\n Manipulator.addClass(eventEl, 'event-short');\n Manipulator.style(circle, { color: event.color && event.color.background });\n eventEl.append(circle);\n } else {\n Manipulator.style(eventEl, {\n background: event.color && event.color.background,\n color: event.color && event.color.foreground,\n });\n }\n\n eventEl.append(event.summary);\n\n SelectorEngine.findOne(`.${CLASSNAME_EVENTS_WRAPPER}`, td).append(eventEl);\n\n if (this.options.readonly) {\n Manipulator.addClass(eventEl, 'event-readonly');\n } else {\n eventEl.setAttribute('draggable', true);\n this._appendMonthListeners(eventEl, event);\n }\n }\n\n if (\n moment(event.start.dateTime).isBefore(tdDate) &&\n moment(event.end.dateTime).isSameOrAfter(tdDate)\n ) {\n eventEl.innerHTML = ' ';\n Manipulator.style(eventEl, {\n order: event.key,\n background: event.color && event.color.background,\n color: event.color && event.color.foreground,\n });\n\n Manipulator.setDataAttribute(eventEl, 'event-key', event.key);\n Manipulator.setDataAttribute(eventEl, 'event-order', event.order);\n ['event', `event-${event.key}`, 'event-long'].forEach((className) => {\n Manipulator.addClass(eventEl, className);\n });\n\n SelectorEngine.findOne(`.${CLASSNAME_EVENTS_WRAPPER}`, td).append(eventEl);\n\n if (this.options.readonly) {\n Manipulator.addClass(eventEl, 'event-readonly');\n } else {\n eventEl.setAttribute('draggable', true);\n this._appendMonthListeners(eventEl, event);\n }\n }\n\n new Tooltip(eventEl, event, this.formats);\n });\n }\n\n _appendDateTimeWeekEvent(event) {\n if (\n event.start.dateTime.isSame(event.end.dateTime, 'day') &&\n !event.start.dateTime.isSame(event.end.dateTime, 'time')\n ) {\n SelectorEngine.find('tr:not(.long-event-row) td', this._tBody).forEach((td) => {\n const tdDate = moment(td.dataset.dateTime, this.formats.dateTime);\n if (\n moment(event.start.dateTime, this.formats.dateTime).isSameOrBefore(tdDate) &&\n !moment(event.end.dateTime, this.formats.dateTime).isSameOrBefore(tdDate)\n ) {\n const eventEl = element('div');\n ['event', 'event-short', `event-${event.key}`].forEach((className) => {\n Manipulator.addClass(eventEl, className);\n });\n eventEl.innerHTML = `${event.summary}`;\n\n td.append(eventEl);\n\n if (this.options.readonly) {\n Manipulator.addClass(eventEl, 'event-readonly');\n } else {\n eventEl.setAttribute('draggable', true);\n this._appendMonthListeners(eventEl, event);\n }\n\n new Tooltip(eventEl, event, this.formats);\n }\n });\n }\n }\n\n _appendEmptyList() {\n if (!SelectorEngine.find('td', this._tBody).length) {\n const tr = element('tr');\n const th = element('th');\n\n th.innerHTML = this.options.noEventsCaption;\n tr.append(th);\n this._tBody.append(tr);\n }\n }\n\n _appendListEvent(event) {\n const weekStartDate = this.activeMomentCopy.startOf('week');\n const weekEndDate = this.activeMomentCopy.endOf('week');\n if (this.options.mondayFirst) {\n weekStartDate.add(1, 'day');\n weekEndDate.add(1, 'day');\n }\n\n if (\n moment(event.start.dateTime).isBefore(weekEndDate) &&\n moment(event.end.dateTime).isAfter(weekStartDate)\n ) {\n const headingTr = element('tr');\n const summaryTr = element('tr');\n const headingTh = element('th');\n const summaryTd = element('td');\n\n headingTh.innerHTML = eventTimePeriod(event, this.formats);\n const eventBg = event.color.background || '#1266F1';\n summaryTd.innerHTML = `${event.summary}`;\n\n headingTr.append(headingTh);\n summaryTr.append(summaryTd);\n this._tBody.append(headingTr);\n this._tBody.append(summaryTr);\n\n if (event.description) {\n this._addListEventDescription(summaryTd, event.description);\n }\n\n if (this.options.readonly) {\n Manipulator.addClass(summaryTd, 'td-readonly');\n } else {\n EventHandler.on(summaryTd, 'mouseup', (e) => this._toggleEditEventModal(e, event));\n }\n }\n }\n\n _addListEventDescription(summaryTd, eventDescription) {\n const description = element('p');\n Manipulator.addClass(description, 'mb-0');\n description.innerHTML = `${eventDescription}`;\n summaryTd.append(description);\n }\n\n _appendLongEventSection() {\n const longEventsSection = element('tr');\n Manipulator.addClass(longEventsSection, CLASSNAME_ALL_DAY_ROW);\n const th = element('th');\n longEventsSection.append(th);\n\n for (let i = 0; i < 7; i++) {\n const td = element('td');\n const eventsWrapper = element('div');\n\n Manipulator.addClass(eventsWrapper, CLASSNAME_EVENTS_WRAPPER);\n td.append(eventsWrapper);\n longEventsSection.append(td);\n\n // prettier-ignore\n const date = this.options.mondayFirst\n ? this.activeMomentCopy.startOf('week').add(i + 1, 'day').format(this.formats.date)\n : this.activeMomentCopy.startOf('week').add(i, 'day').format(this.formats.date);\n td.dataset.date = date;\n\n if (moment(date, this.formats.date).isSame(moment(), 'day')) {\n Manipulator.addClass(td, 'today');\n }\n\n if (!this.options.readonly) {\n this._addDayFieldListeners(td, date);\n }\n }\n\n this._tBody.append(longEventsSection);\n }\n\n _appendHoursSection() {\n for (let i = 0; i < 23; i++) {\n const tr = element('tr');\n const th = element('th');\n Manipulator.addClass(th, 'hour-field');\n\n if (this.options.twelveHour) {\n if (i > 11) {\n th.innerHTML = `${i - 11}:00 pm`;\n } else if (i === 11) {\n th.innerHTML = `${i + 1}:00 pm`;\n } else {\n th.innerHTML = `${i + 1}:00 am`;\n }\n } else {\n th.innerHTML = `${i + 1}:00`;\n }\n tr.append(th);\n\n for (let j = 0; j < 7; j++) {\n const td = element('td');\n\n // prettier-ignore\n const date = this.options.mondayFirst\n ? this.activeMomentCopy.startOf('week').add(j + 1, 'day').add(i + 1, 'hour').format(this.formats.dateTime)\n : this.activeMomentCopy.startOf('week').add(j, 'day').add(i + 1, 'hour').format(this.formats.dateTime);\n\n td.dataset.dateTime = date;\n\n tr.append(td);\n\n if (!this.options.readonly) {\n this._addDayFieldListeners(td, date);\n }\n }\n\n this._tBody.append(tr);\n }\n }\n\n _setHeading() {\n this._heading.innerHTML = '';\n switch (this.view) {\n case 'month':\n this._heading.innerHTML = `${\n this.options.months[this.activeMomentCopy.month()]\n } ${this.activeMomentCopy.year()}`;\n break;\n case 'week':\n case 'list':\n this._setWeekAndListHeading();\n break;\n default:\n return;\n }\n }\n\n _setWeekAndListHeading() {\n const start = this.options.mondayFirst\n ? this.activeMomentCopy.startOf('week').add(1, 'day')\n : this.activeMomentCopy.startOf('week');\n\n const end = this.options.mondayFirst\n ? this.activeMomentCopy.endOf('week').add(1, 'day')\n : this.activeMomentCopy.endOf('week');\n\n const startMonth = this.options.monthsShort[start.month()];\n const startDate = start.date();\n\n const endMonth = this.options.monthsShort[end.month()];\n const endDate = end.date();\n\n this._heading.innerHTML = `${startMonth} ${startDate} - ${endMonth} ${endDate}, ${start.year()}`;\n }\n\n _clearTBody() {\n this._tBody.innerHTML = '';\n this._table.className = '';\n }\n\n _addListeners() {\n EventHandler.on(this._arrowLeft, 'click', () => this.prev());\n EventHandler.on(this._arrowRight, 'click', () => this.next());\n EventHandler.on(this._todayBtn, 'click', () => this.today());\n EventHandler.on(this._monthBtn, 'click', () => this.changeView('month'));\n EventHandler.on(this._weekBtn, 'click', () => this.changeView('week'));\n EventHandler.on(this._listBtn, 'click', () => this.changeView('list'));\n EventHandler.on(this._table, 'mouseup', () => this._clearSelection());\n }\n\n _removeListeners() {\n EventHandler.off(this._arrowLeft, 'click', this.prev);\n EventHandler.off(this._arrowRight, 'click', this.next);\n EventHandler.off(this._todayBtn, 'click', this.today);\n EventHandler.off(this._monthBtn, 'click', this.changeView);\n EventHandler.off(this._weekBtn, 'click', this.changeView);\n EventHandler.off(this._listBtn, 'click', this.changeView);\n EventHandler.off(this._table, 'mouseup', this._clearSelection);\n }\n\n _getArrayFromNumber(number) {\n return Array.from(Array(number).keys());\n }\n\n _getAllPrevEl(element) {\n const result = [];\n let child = element.previousElementSibling;\n\n while (child) {\n result.push(element);\n child = child.previousElementSibling;\n }\n return result;\n }\n\n _setLongEventCaptions() {\n if (this.view === 'list') return;\n SelectorEngine.find('tr', this._tBody).forEach((tr) => {\n const firstTd = SelectorEngine.findOne('td', tr);\n SelectorEngine.find('.event', firstTd).forEach((event) => {\n if (event.innerHTML === ' ') {\n event.innerHTML = this.events[parseInt(event.dataset.mdbEventKey, 10) - 1].summary;\n Manipulator.style(event, { paddingLeft: '7px' });\n }\n });\n });\n }\n\n _initTooltips() {\n this._tooltips = [...this._element.querySelectorAll('[data-mdb-toggle=\"tooltip\"]')].map(\n (tooltip) => new mdb.Tooltip(tooltip)\n );\n }\n\n _hideTooltip(e) {\n mdb.Tooltip.getInstance(e.target).hide();\n }\n\n _refreshTable() {\n this._setTBody();\n this._setHeading();\n this._setEvents();\n this._orderEvents();\n this._setLongEventCaptions();\n this._initTooltips();\n }\n\n // MODALS ---------------------------------------------\n _createAddEventModal() {\n this._addEventModal = element('div');\n Manipulator.addClass(this._addEventModal, 'modal');\n Manipulator.addClass(this._addEventModal, 'fade');\n this._addEventModal.setAttribute('tabindex', '-1');\n this._addEventModal.setAttribute('aria-hidden', 'true');\n\n document.body.appendChild(this._addEventModal);\n }\n\n _updateAddEventModalContent() {\n this._addEventModal.innerHTML = addModalTemplate(\n this.options,\n this._newEvent,\n this.formats,\n this._addModalId\n );\n\n const longEventsCheckbox = SelectorEngine.findOne(\n SELECTOR_CALENDAR_LONG_EVENTS_CHECKBOX,\n this._addEventModal\n );\n EventHandler.on(longEventsCheckbox, 'change', (e) => this._toggleLongEventMode(e));\n\n this._editAddModalIfLongEvent(this._newEvent, longEventsCheckbox);\n\n const form = SelectorEngine.findOne('form', this._addEventModal);\n EventHandler.on(form, 'submit', (e) => this._addEvent(e));\n }\n\n _toggleLongEventMode(e) {\n const isLongEventEnabled = e.target.checked;\n const longEventsSections = SelectorEngine.find('.long-event-section', this._addEventModal);\n const dateTimeSections = SelectorEngine.find('.date-time-section', this._addEventModal);\n\n if (isLongEventEnabled) {\n longEventsSections.forEach((section) => (section.style.display = 'block'));\n dateTimeSections.forEach((section) => (section.style.display = 'none'));\n } else {\n longEventsSections.forEach((section) => (section.style.display = 'none'));\n dateTimeSections.forEach((section) => (section.style.display = 'block'));\n }\n\n this._updateInputs();\n }\n\n _toggleLongEventModeInEditModal(e) {\n const isLongEventEnabled = e.target.checked;\n const longEventsSections = SelectorEngine.find('.long-event-section', this._editEventModal);\n const dateTimeSections = SelectorEngine.find('.date-time-section', this._editEventModal);\n\n if (isLongEventEnabled) {\n longEventsSections.forEach((section) => (section.style.display = 'block'));\n dateTimeSections.forEach((section) => {\n SelectorEngine.find('.timepicker-input', section).forEach((input) => {\n input.value = '00:00';\n this._activeEvent.start.dateTime = moment(this._activeEvent.start.dateTime).startOf(\n 'day'\n );\n this._activeEvent.end.dateTime = moment(this._activeEvent.end.dateTime).startOf('day');\n });\n section.style.display = 'none';\n });\n } else {\n longEventsSections.forEach((section) => (section.style.display = 'none'));\n dateTimeSections.forEach((section) => (section.style.display = 'block'));\n }\n\n this._updateInputs();\n }\n\n _createEditEventModal() {\n this._editEventModal = element('div');\n Manipulator.addClass(this._editEventModal, 'modal');\n Manipulator.addClass(this._editEventModal, 'fade');\n this._editEventModal.setAttribute('tabindex', '-1');\n this._editEventModal.setAttribute('aria-hidden', 'true');\n\n document.body.appendChild(this._editEventModal);\n }\n\n _updateEditEventModalContent() {\n this._editEventModal.innerHTML = editModalTemplate(\n this.options,\n this._activeEvent,\n this.formats,\n this._editModalId\n );\n\n const longEventsCheckbox = SelectorEngine.findOne(\n SELECTOR_CALENDAR_LONG_EVENTS_CHECKBOX,\n this._editEventModal\n );\n EventHandler.on(longEventsCheckbox, 'change', (e) => this._toggleLongEventModeInEditModal(e));\n\n this._editModalIfLongEvent(this._activeEvent, longEventsCheckbox);\n\n const activeCheckbox = SelectorEngine.findOne(\n `input[value=\"${this._activeEvent.color.background}\"]`,\n this._editEventModal\n );\n if (activeCheckbox) {\n activeCheckbox.checked = true;\n } else {\n SelectorEngine.findOne('input[type=\"radio\"]', this._editEventModal).checked = true;\n }\n const submitBtn = SelectorEngine.findOne('.btn-edit-event', this._editEventModal);\n const deleteBtn = SelectorEngine.findOne('.btn-delete-event', this._editEventModal);\n EventHandler.on(submitBtn, 'click', () => this._editEvent());\n EventHandler.on(deleteBtn, 'click', () => this._deleteEvent());\n }\n\n _editAddModalIfLongEvent(event, checkbox) {\n if (eventType(event) === 'short-event' || eventType(event) === 'long-event-with-time') {\n checkbox.checked = false;\n const longEventsSections = SelectorEngine.find('.long-event-section', this._addEventModal);\n const dateTimeSections = SelectorEngine.find('.date-time-section', this._addEventModal);\n longEventsSections.forEach((section) => (section.style.display = 'none'));\n dateTimeSections.forEach((section) => (section.style.display = 'block'));\n }\n }\n\n _editModalIfLongEvent(event, checkbox) {\n if (eventType(event) === 'short-event' || eventType(event) === 'long-event-with-time') {\n checkbox.checked = false;\n const longEventsSections = SelectorEngine.find('.long-event-section', this._editEventModal);\n const dateTimeSections = SelectorEngine.find('.date-time-section', this._editEventModal);\n longEventsSections.forEach((section) => (section.style.display = 'none'));\n dateTimeSections.forEach((section) => (section.style.display = 'block'));\n }\n }\n\n _addEvent(e) {\n e.preventDefault();\n if (this._validateEvent(this._newEvent)) {\n this.events.push({\n summary: this._newEvent.summary,\n start: this._newEvent.start,\n end: this._newEvent.end,\n color: this._newEvent.color || {},\n description: this._newEvent.description || '',\n });\n\n EventHandler.trigger(this._element, 'addEvent.mdb.calendar', this._newEvent);\n this.refresh();\n this._addEventModalInstance.hide();\n } else {\n this._setInputsInvalid(this._newEvent);\n }\n }\n\n _validateEvent(event) {\n if (event.start.dateTime.isSameOrBefore(event.end.dateTime) && event.summary) {\n return true;\n }\n return false;\n }\n\n _setInputsInvalid(event) {\n if (event.end.dateTime.isSameOrBefore(event.start.dateTime)) {\n SelectorEngine.find('.calendar-date-input').forEach((input) => {\n Manipulator.addClass(input, 'calendar-invalid-input');\n Manipulator.addClass(input.parentNode.parentNode, 'was-validated');\n });\n }\n if (event.summary === '') {\n SelectorEngine.find('.calendar-summary-input').forEach((input) => {\n Manipulator.addClass(input, 'calendar-invalid-input');\n Manipulator.addClass(input.parentNode.parentNode, 'was-validated');\n });\n }\n }\n\n _clearValidation() {\n SelectorEngine.find('.calendar-date-input').forEach((input) => {\n Manipulator.removeClass(input, 'calendar-invalid-input');\n Manipulator.removeClass(input.parentNode.parentNode, 'was-validated');\n });\n SelectorEngine.find('.calendar-summary-input').forEach((input) => {\n Manipulator.removeClass(input, 'calendar-invalid-input');\n Manipulator.removeClass(input.parentNode.parentNode, 'was-validated');\n });\n }\n\n _editEvent() {\n if (this._validateEvent(this._activeEvent)) {\n this.events[this.activeEventIndex].summary = this._activeEvent.summary;\n this.events[this.activeEventIndex].start.date = this._activeEvent.start.date;\n this.events[this.activeEventIndex].start.dateTime = this._activeEvent.start.dateTime;\n this.events[this.activeEventIndex].end.date = this._activeEvent.end.date;\n this.events[this.activeEventIndex].end.dateTime = this._activeEvent.end.dateTime;\n this.events[this.activeEventIndex].description = this._activeEvent.description;\n this.events[this.activeEventIndex].color.background =\n this._activeEvent.color && this._activeEvent.color.background;\n\n EventHandler.trigger(this._element, 'editEvent.mdb.calendar', this._activeEvent);\n this.refresh();\n this._editEventModalInstance.hide();\n } else {\n this._setInputsInvalid(this._activeEvent);\n }\n }\n\n _deleteEvent() {\n EventHandler.trigger(\n this._element,\n 'deleteEvent.mdb.calendar',\n this.events[this.activeEventIndex]\n );\n this.events.splice(this.activeEventIndex, 1);\n this.refresh();\n this._editEventModalInstance.hide();\n }\n\n _clearEvents() {\n SelectorEngine.find('.event', this._element).forEach((event) => {\n event.remove();\n });\n }\n\n _triggerEvent(event) {\n EventHandler.trigger(this._element, `${event}.calendar`);\n }\n\n _disposeModals() {\n if (this._addEventModalInstance) {\n this._addEventModalInstance.dispose();\n }\n if (this._addEventModal) {\n this._addEventModal.remove();\n }\n if (this._editEventModalInstance) {\n this._editEventModalInstance.dispose();\n }\n if (this._editEventModal) {\n this._editEventModal.remove();\n }\n }\n\n // Static\n static get NAME() {\n return NAME;\n }\n\n static get moment() {\n return moment();\n }\n\n static getInstance(element) {\n return Data.getData(element, DATA_KEY);\n }\n\n static jQueryInterface(config, options) {\n return this.each(function () {\n let data = Data.getData(this, DATA_KEY);\n const _config = typeof config === 'object' && config;\n if (!data && /dispose/.test(config)) {\n return;\n }\n if (!data) {\n data = new Calendar(this, _config);\n }\n if (typeof config === 'string') {\n if (typeof data[config] === 'undefined') {\n throw new TypeError(`No method named \"${config}\"`);\n }\n data[config](options);\n }\n });\n }\n}\n\nonDOMContentLoaded(() => {\n const $ = getjQuery();\n\n if ($) {\n const JQUERY_NO_CONFLICT = $.fn[NAME];\n $.fn[NAME] = Calendar.jQueryInterface;\n $.fn[NAME].Constructor = Calendar;\n $.fn[NAME].noConflict = () => {\n $.fn[NAME] = JQUERY_NO_CONFLICT;\n return Calendar.jQueryInterface;\n };\n }\n});\n\nSelectorEngine.find(`.${CLASSNAME_CALENDAR}`).forEach((el) => new Calendar(el));\n\nexport default Calendar;\n","import moment from 'moment';\n\nexport function addModalTemplate(options, newEvent, formats, id) {\n return `\n