safekat/httpdocs/assets/js/safekat/components/SafekatCalendar.js

import Ajax from '../components/ajax.js'
import { alertSuccess, alertError } from '../components/alerts/sweetAlert.js'
// Render calendar
class SafekatCalendar {
    constructor(idElement) {
        this.locale = $('meta[name=locale]').attr('content') ?? 'es';
        this.calendarEl = document.getElementById(idElement);
        this.calendar = null;
    }
    actionLoader(status = true) {
        if (status) {
            Notiflix.Block.circle('.section-block');
        } else {
            Notiflix.Block.remove('.section-block');
        }
    }
    init() {
        if (this.calendarEl) {

            this.calendar = new FullCalendar.Calendar(this.calendarEl, {
                locale: this.locale,
                initialView: 'multiMonthYear',
                multiMonthMaxColumns: 4,
                contentHeight: '100vh',
                editable: true,
                dragScroll: true,
                dayMaxEvents: 2,
                dateClick: this.clickEvent.bind(this),
                eventResizableFromStart: true,
                customButtons: {
                    sidebarToggle: {
                        text: 'Sidebar'
                    }
                },

            });
            this.calendar.render();
            this.calendar.setOption('aspectRatio', 1.8);

        }
    }
    renderFestivos() {
        this.setEventFestivos()
    }
    async setEventFestivos() {
        try {


            let response = await this.getFestivos();
            this.actionLoader(false)
            if (response.data) {
                let festivosEvent = response.data.map(this.parseToFullCalendarEvent)
                this.addEvents(festivosEvent)
            }
        } catch (error) {
            console.error(error)
        } finally {
            this.actionLoader(false)

        }
    }
    removeEvents() {
        this.calendar.getEvents().forEach(event => event.remove());
    }
    async clickEvent(info) {
        try {
            let response = await this.storeFestivo({ date: info.dateStr })
            alertSuccess(response.message).fire()
            this.renderFestivos()
        } catch (error) {
            console.error(error)

        } finally {
            this.actionLoader(false)

        }
    }
    addEvents(events) {
        events.forEach(event => {
            this.calendar.addEvent(event)
        });
    }
    parseToFullCalendarEvent(festivoEntity) {
        let date = festivoEntity.date.split('-').reverse().join('/')
        return {
            id: festivoEntity.id,
            title: '',
            start: festivoEntity.date,
            display: 'background',
            color: 'red',
            textColor: 'white'
        }
    }

    getFestivos() {
        this.actionLoader(true)
        this.removeEvents()
        return new Promise((resolve, reject) => {
            let ajax = new Ajax('/configuracion/festivos/all', null, null, resolve, reject)
            ajax.get()
        })
    }
    storeFestivo(event) {
        this.actionLoader(true)
        return new Promise((resolve, reject) => {
            let ajax = new Ajax('/configuracion/festivos', event, null, resolve, reject)
            ajax.post()
        })
    }
    deleteFestivo(id) {
        return new Promise((resolve, reject) => {
            let ajax = new Ajax('/configuracion/festivos/' + id, null, null, resolve, reject)
            ajax.delete()
        })
    }

}

export default SafekatCalendar