Есть ли скрипт очень лёгкого календаря для выбора даты?

Question

[sokira]

Подскажите, пожалуйста, существует ли какой-то готовый скрипт календаря который будет решать очень простую задачу:

- выбирать дату :)

На странице нужно вывести календарь, некоторые даты в котором будут ссылками на другие страницы сайта.

Требования:

- максимально лёгкий и простой, чтобы можно было использовать для amp-страниц (никакие навороты не нужны, но хочется использовать bootstrap).
- на экране нужно показывать 1 или 2 месяца (текущий и предыдущий).

Можно ли сэкономить на загрузке если на сервере средствами php сгенерить календарь, например, только на один конкретный месяц?

Если пользователю понадобится выбрать другой, то только после клика по кнопкам выбора месяца подгружать нужные данные.

----

Какие ещё можете предложить идеи чтобы получить очень лёгкий календарь для выбора даты и максимально сократить размер подгружаемых данных.

Comments

[JhaoDa]

Чо так мало тэгов?

[Сергей delphinpro]

Можно ли сэкономить на загрузке если на сервере средствами php сгенерить календарь, например, только на один конкретный месяц?

Зачем? Любой месяц генерится на клиенте, джаваскриптом.

очень лёгкого календаря

Можно и свой скрипт накидать, строк на 100-200.

Вот например, из недавнего. Там всплывающие подсказки, их можно урезать.

Говнокалендарик, зато легкий =)

//==
//== Calendar
//== ======================================= ==//

(function () {
    const baseClass = 'calendar';
    const directions = {
        prev: { cls: 'prev', icon: 'arrow-left' },
        next: { cls: 'next', icon: 'arrow-right' },
    };

    const weekDays = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];

    const months = [
        'Январь',
        'Февраль',
        'Март',
        'Апрель',
        'Май',
        'Июнь',
        'Июль',
        'Август',
        'Сентябрь',
        'Октябрь',
        'Ноябрь',
        'Декабрь',
    ];

    class Calendar {
        /**
         * @param {HTMLElement} el
         * @param {Array} events
         */
        constructor(el, events) {
            this.data = {
                monthName: 'default',
            };

            this.events = events;

            /** @var {HTMLElement} */
            this.el = el;
            /** @var {HTMLElement} */
            this.elDays = null;

            /** @var {Date} */
            this.today = new Date();
            this.updateStartDate(this.today.getFullYear(), this.today.getMonth());

            this.el.appendChild(this.makeHeader());
            this.el.appendChild(this.makeWeekDays());
            this.el.appendChild(this.makeMonthDays());

            this.displayYear = this.today.getFullYear();
            this.displayMonthIndex = this.today.getMonth();
            this.displayMonth = months[this.displayMonthIndex] + ' ' + this.displayYear;

            this.el.addEventListener('mouseover', event => {
                let handler = event.target.closest('.events');
                if (handler) {
                    let content = handler.querySelector('.popper');
                    if (content) {
                        tippy(handler, {
                            content: `<div class="popper">${content.innerHTML}</div>`,
                            arrow: true,
                            arrowType: 'round', // sharp, round
                            interactive: true,
                            // trigger:'click'
                        });
                    }
                }
            });
        }

        updateStartDate(fullYear, monthIndex){
            this.firstDayDate = new Date(fullYear, monthIndex, 1);
            this.firstDayOfMonth = this.firstDayDate.getDay();
            if (!this.firstDayOfMonth) this.firstDayOfMonth = 7;
            this.startDate = new Date(
                this.firstDayDate.getFullYear(),
                this.firstDayDate.getMonth(),
                this.firstDayDate.getDate() - this.firstDayOfMonth + 1,
            );
        }

        get displayMonth() { return this.data.monthName; }

        set displayMonth(val) {
            this.data.monthName = val;
            this.elTitle.innerHTML = val;
        }

        makeHeader() {
            const el = document.createElement('div');
            const btnPrev = this.makeNavButton('prev');
            const btnNext = this.makeNavButton('next');
            el.classList.add(`${baseClass}__header`);
            el.appendChild(btnPrev);
            el.appendChild(this.makeMonthTitle());
            el.appendChild(btnNext);

            btnPrev.addEventListener('click', event => {
                if (this.displayMonthIndex - 1 >= 0) {
                    this.displayMonthIndex--;
                } else {
                    this.displayMonthIndex = 11;
                    this.displayYear--;
                }
                // console.log(this.displayMonthIndex, this.displayYear);
                this.displayMonth = months[this.displayMonthIndex] + ' ' + this.displayYear;
                this.updateStartDate(this.displayYear, this.displayMonthIndex);
                this.updateMonthDays();
            });

            btnNext.addEventListener('click', event => {
                if (this.displayMonthIndex + 1 <= 11) {
                    this.displayMonthIndex++;
                } else {
                    this.displayMonthIndex = 0;
                    this.displayYear++;
                }
                console.log(this.displayMonthIndex, this.displayYear);
                this.displayMonth = months[this.displayMonthIndex] + ' ' + this.displayYear;
                this.updateStartDate(this.displayYear, this.displayMonthIndex);
                this.updateMonthDays();
            });

            return el;
        }

        makeMonthTitle() {
            this.elTitle = document.createElement('div');
            this.elTitle.classList.add(`${baseClass}__month-title`);
            this.elTitle.innerHTML = this.displayMonth;
            return this.elTitle;
        }

        makeNavButton(direction) {
            if (!directions.hasOwnProperty(direction)) {
                throw new Error('Неверный параметр (prev/next)');
            }

            const el = document.createElement('button');
            el.classList.add(`${baseClass}__button`);
            el.classList.add(`${baseClass}__button_${directions[direction].cls}`);
            el.innerHTML = App.makeSvgIcon(directions[direction].icon, `${baseClass}__btn-icon`);
            return el;
        }

        makeWeekDays() {
            const el = document.createElement('div');
            el.classList.add(`${baseClass}__weekdays`);
            el.innerHTML = weekDays.reduce((acc, cur) => acc + `<div class="${baseClass}__weekday">${cur}</div>`, '');
            return el;
        }

        updateMonthDays(){
            let html = '';
            let counter = 0;
            let isMuted = this.startDate.getDate() !== 1;

            let idCounter = 1;
            while (counter < 7 * 6) {
                let start = this.startDate.getDate();
                let mutedClass = isMuted ? ` ${baseClass}__day_muted` : '';
                let events = this.events.find(item => {
                    let d1 = this.startDate.getFullYear().toString()
                        + this.startDate.getMonth().toString()
                        + this.startDate.getDate().toString();
                    let _T = new Date(item.date);
                    let d2 = _T.getFullYear().toString()
                        + _T.getMonth().toString()
                        + _T.getDate().toString();
                    return d1 === d2;
                });

                let pastEvent = false;

                if (events) {
                    let eventDate = new Date(events.date);
                    if (eventDate < this.today) {
                        pastEvent = true;
                    }
                }

                let innerHtml = `<span>${start}</span>`;

                if (events && events.events && events.events.length > 0) {
                    let eventsHtml = events.events.reduce((p, i) => `${p}<a href="${i.link}">${i.title}</a>`, '');
                    innerHtml = `<span class="events ${pastEvent
                        ? 'past'
                        : ''}">${start}<span class="popper" id="iddpr${idCounter++}" hidden>${eventsHtml}</span></span>`;
                }

                html += `<div class="${baseClass}__day${mutedClass}">${innerHtml}</div>`;
                counter++;
                this.startDate.setDate(this.startDate.getDate() + 1);
                if (this.startDate.getDate() === 1) { isMuted = !isMuted; }
            }

            this.elDays.innerHTML = html;
        }

        makeMonthDays() {
            this.elDays = document.createElement('div');
            this.elDays.classList.add(`${baseClass}__days`);
            this.updateMonthDays();
            return this.elDays;
        }
    }

    App.calendar = function (el, data) {
        if (!el) return;

        return new Calendar(el, data);
    };

})();

[alex-1917]

я видел на Фрилансим задание - тоже нужен простой плагин календаря, а дальше автор задания на Фрилансим собирается продавать это как плагин на WP.
Простота хуже воровства.

Answer 1

[Johny Smith]

t1m0n.name/air-datepicker/docs