Events Calendar

export class EventsCalendar {
    constructor(container) {

        this.today = new Date();

        this.currentDay = this.today.getDate();
        this.currentMonth = this.today.getMonth();
        this.currentYear = this.today.getFullYear();
        this.selectedDay = null;
        this.selectedMonth = null;
        this.selectedYear = null;
        this.container = container;
        this.monthAndYear = container.querySelector('.calendar-events__title');
        this.eventsListingHolder = container.querySelector('.event-cards__holder');
        const toggleBtn = container.querySelector('.calendar-events__toggle');

        this.next = container.querySelector('.calendar-events__btn-next');
        this.previous = container.querySelector('.calendar-events__btn-prev');

        this.showCalendar();

        this.next.addEventListener('click', () => {
            this.currentYear = (this.currentMonth === 11) ? this.currentYear + 1 : this.currentYear;
            this.currentMonth = (this.currentMonth + 1) % 12;
            this.eventsListingHolder.innerHTML = '';
            this.showCalendar();
        });

        this.previous.addEventListener('click', () => {
            this.currentYear = (this.currentMonth === 0) ? this.currentYear - 1 : this.currentYear;
            this.currentMonth = (this.currentMonth === 0) ? 11 : this.currentMonth - 1;
            this.eventsListingHolder.innerHTML = '';
            this.showCalendar();
        });

        toggleBtn.addEventListener('click', () => {
            container.classList.toggle('collapsed');

            if (container.classList.contains('collapsed')) {
                toggleBtn.innerHTML = '+';
                this.showCalendar();
            } else {
                toggleBtn.innerHTML = '-';
            }
        });
    }

    showCalendar() {
        const month = this.currentMonth;
        const year = this.currentYear;
        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        const firstDay = (new Date(year, month)).getDay();
        const daysInMonth = 32 - new Date(year, month, 32).getDate();

        const tbl = document.querySelector('.calendar-body'); // body of the calendar

        // clearing all previous cells
        tbl.innerHTML = '';

        // filing data about month and in the page via DOM.
        this.monthAndYear.innerHTML = `${months[month]} ${year}`;
        if (month === 11) {
            this.next.innerHTML = `See ${months[0]} ${year + 1}`;
            this.previous.innerHTML = `See ${months[month - 1]} ${year}`;
        } else if (month === 0) {
            this.next.innerHTML = `See ${months[month + 1]} ${year}`;
            this.previous.innerHTML = `See ${months[11]} ${year - 1}`;
        } else {
            this.next.innerHTML = `See ${months[month + 1]} ${year}`;
            this.previous.innerHTML = `See ${months[month - 1]} ${year}`;
        }

        if (this.currentMonth === this.today.getMonth() && this.currentYear === this.today.getFullYear()) {
            this.previous.setAttribute('style', 'display:none;');
        } else if (this.currentMonth > this.today.getMonth() && this.currentYear >= this.today.getFullYear()) {
            this.previous.setAttribute('style', 'display:inline-none;');
        }

        // creating all cells
        let date = 1;
        for (let i = 0; i < 6; i++) {
            // creates a table row
            const row = document.createElement('div');
            row.classList.add('calendar-events__calendar-row');
            const daysOfTheWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

            // creating individual cells, filing them up with data.
            for (let j = 0; j < 7; j++) {
                if (i === 0 && j < firstDay) {

                    const cellHolder = document.createElement('div');
                    cellHolder.classList.add('calendar-item-holder');

                    const cell = document.createElement('div');
                    cell.classList.add('calendar-events__calendar-item');
                    cell.classList.add('calendar-events__calendar-item--empty');

                    const dayOfWeek = document.createElement('div');
                    dayOfWeek.classList.add('calendar-weekday');
                    dayOfWeek.innerHTML = daysOfTheWeek[j];
                    cell.appendChild(dayOfWeek);

                    const cellText = document.createTextNode('');
                    cell.appendChild(cellText);
                    cellHolder.appendChild(cell);
                    row.appendChild(cellHolder);
                } else if (date > daysInMonth) {
                    break;
                } else {
                    const cellHolder = document.createElement('div');
                    cellHolder.classList.add('calendar-item-holder');

                    const cell = document.createElement('div');
                    cell.classList.add('calendar-events__calendar-item');
                    const cellText = document.createTextNode(date);
                    if (date === this.today.getDate() && year === this.today.getFullYear() && month === this.today.getMonth()) {
                        // highlight today's date
                        cell.classList.add('calendar-events__calendar-item--today');
                    }

                    if (date === this.currentDay && year === this.currentYear && month === this.currentMonth) {
                        row.classList.add('current-row');
                    }

                    if (date === this.selectedDay && year === this.selectedYear && month === this.selectedMonth) {
                        cell.classList.add('calendar-events__calendar-item--active');
                    }

                    const dayOfWeek = document.createElement('div');
                    dayOfWeek.classList.add('calendar-weekday');
                    dayOfWeek.innerHTML = daysOfTheWeek[j];
                    cell.appendChild(dayOfWeek);
                    cell.appendChild(cellText);
                    cellHolder.appendChild(cell);
                    row.appendChild(cellHolder);

                    const selectedMonth = this.currentMonth + 1;
                    const selectedYear = this.currentYear;
                    const dataAttr = `${selectedYear}-${selectedMonth}-${date}`;

                    cell.dataset.date = dataAttr;

                    date++;
                }
            }

            tbl.appendChild(row); // appending each row into calendar body.
        }

        this.loadEventDays();

        const cellItem = document.querySelectorAll('.calendar-events__calendar-item');

        cellItem.forEach((e) => {
            e.addEventListener('click', () => {

                document.querySelectorAll('.calendar-events__calendar-item').forEach((crnt) => {
                    crnt.classList.remove('calendar-events__calendar-item--active');
                });

                e.classList.add('calendar-events__calendar-item--active');
                this.eventsListingHolder.innerHTML = '';
                const clickedEventDate = e.dataset.date;
                const selectedDate = new Date(clickedEventDate);
                this.selectedMonth = selectedDate.getMonth();
                this.selectedYear = selectedDate.getFullYear();
                this.selectedDay = selectedDate.getDate();
                this.loadEvents(clickedEventDate);
            });
        });
    }

    loadEventDays() {
        const queryStringPrefix = this.container.dataset.eventDaysEndpoint.includes('?') ? '&' : '?';
        const fetchDataUrl = `${this.container.dataset.eventDaysEndpoint}${queryStringPrefix}month=${this.currentMonth + 1}&year=${this.currentYear}`;
        fetch(fetchDataUrl, { credentials: 'same-origin' })
            .then((resolve) => {
                if (resolve.ok) {
                    return resolve.text();
                }

                throw new Error(resolve.status);
            })
            .then((res) => {
                const dates = JSON.parse(res);
                dates.forEach((date) => {
                    const calendarItem = this.container.querySelector(`.calendar-events__calendar-item[data-date='${date}']`);
                    if (calendarItem) {
                        calendarItem.classList.add('calendar-events__calendar-item--has-event');
                    }
                });
            })
            .catch((reject) => {
                console.error('error', reject);
            });
    }

    loadEvents(eventDate) {
        let fetchDataUrl = this.container.dataset.endpoint;
        fetchDataUrl += fetchDataUrl.includes('?') ? '&' : '?';
        fetchDataUrl += `eventDate=${eventDate}`;

        fetch(fetchDataUrl, { credentials: 'same-origin' })
            .then((resolve) => {
                if (resolve.ok) {
                    return resolve.text();
                }

                throw new Error(resolve.status);
            })
            .then((res) => {
                const newGrid = new DOMParser().parseFromString(res, 'text/html');
                const gridList = newGrid.querySelectorAll('.api-events');

                gridList.forEach((grid) => {
                    this.eventsListingHolder.innerHTML = grid.innerHTML;
                });

                const alsoHappeningLinks = this.container.querySelectorAll('.event-card__repeated-date');
                alsoHappeningLinks.forEach((alsoHappeningLink) => {
                    alsoHappeningLink.addEventListener('click', (e) => {
                        e.preventDefault();
                        const date = alsoHappeningLink.dataset.eventDate;
                        const alsoHappeningDate = new Date(date);
                        this.selectedMonth = alsoHappeningDate.getMonth();
                        this.selectedYear = alsoHappeningDate.getFullYear();
                        this.selectedDay = alsoHappeningDate.getDate();
                        this.showCalendar();
                        this.loadEvents(date);
                    });
                });
            })
            .catch((reject) => {
                console.error('error', reject);
            });
    }
}

export default (module) => new EventsCalendar(module);