simple-calendar-widget/dist/index.js

A super simple calendar widget written in TypeScript and SCSS

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.renderCalendarWidget = void 0;
    var doc = document;
    var defaultDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var defaultMonths = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'Septemer',
        'October',
        'November',
        'December'
    ];
    var selectors = {
        body: '#ts-calendar__body',
        year: '#ts-calendar__year',
        month: '#ts-calendar__month'
    };
    var today = new Date();
    var defaultStartYear = today.getFullYear();
    var defaultStartMonth = today.getMonth();
    var defaultStartDay = today.getDate();
    var get = function (selector) { return doc.querySelector(selector); };
    var add = function (type) { return doc.createElement(type); };
    // prettier-ignore
    var onClick = function (selector, callback) { var _a; return (_a = get(selector)) === null || _a === void 0 ? void 0 : _a.addEventListener('click', callback); };
    var renderCaption = function (translations) { return "\n<caption>\n    <button id=\"ts-calendar__prev\" title=\"".concat(translations.prevMonthTitle, "\">").concat(translations.prevMonth, "</button>\n    <span id=\"ts-calendar__month\"></span>\n    <span id=\"ts-calendar__year\"></span>\n    <button id=\"ts-calendar__next\" title=\"").concat(translations.nextMonthTitle, "\">").concat(translations.nextMonth, "</button>\n</caption>\n"); };
    var renderDays = function (days) { return days.map(function (day) { return "<th>".concat(day, "</th>"); }).join(''); };
    var renderHeader = function (translations) { return "\n<thead>\n    <tr>\n        ".concat(renderDays(translations.days), "\n    </tr>\n</thead>\n"); };
    var renderTable = function (translations) { return "\n<table class=\"simple-calendar-widget\">\n    ".concat(renderCaption(translations), "\n    ").concat(renderHeader(translations), "\n    <tbody id=\"ts-calendar__body\"></tbody>\n</table>\n"); };
    var renderCalendar = function (year, month, selectorsList, translations) {
        var bodyEl = get(selectorsList.body);
        var yearEl = get(selectorsList.year);
        var monthEl = get(selectorsList.month);
        var firstDay = new Date(year, month).getDay();
        var allDays = 32 - new Date(year, month, 32).getDate();
        var day = 1;
        if (bodyEl) {
            bodyEl.innerHTML = '';
        }
        if (yearEl) {
            yearEl.innerHTML = year.toString();
        }
        if (monthEl) {
            monthEl.innerHTML = translations.months[month];
        }
        for (var i = 0; i < 6; i++) {
            var tr = add('tr');
            for (var j = 0; j < 7; j++) {
                var td = add('td');
                if (i === 0 && j < firstDay) {
                    td.classList.add('is--empty');
                }
                else if (day > allDays) {
                    break;
                }
                else {
                    td.innerHTML = day.toString();
                    if (year === defaultStartYear && month === defaultStartMonth && day === defaultStartDay) {
                        td.classList.add('is--today');
                    }
                    day++;
                }
                tr.append(td);
            }
            bodyEl === null || bodyEl === void 0 ? void 0 : bodyEl.append(tr);
        }
    };
    var addListeners = function (startYear, startMonth, translations) {
        onClick('#ts-calendar__prev', function (event) {
            event.preventDefault();
            var isFirstMonth = startMonth === 0;
            startMonth = isFirstMonth ? 11 : startMonth - 1;
            startYear = isFirstMonth ? startYear - 1 : startYear;
            renderCalendar(startYear, startMonth, selectors, translations);
        });
        onClick('#ts-calendar__next', function (event) {
            event.preventDefault();
            var isLastMonth = startMonth === 11;
            startMonth = isLastMonth ? 0 : startMonth + 1;
            startYear = isLastMonth ? startYear + 1 : startYear;
            renderCalendar(startYear, startMonth, selectors, translations);
        });
    };
    var defaultTranslations = {
        days: defaultDays,
        months: defaultMonths,
        prevMonth: '&larr;',
        nextMonth: '&rarr;',
        prevMonthTitle: 'Previous month',
        nextMonthTitle: 'Next month'
    };
    var renderCalendarWidget = function (_a) {
        var _b = _a.startYear, startYear = _b === void 0 ? defaultStartYear : _b, _c = _a.startMonth, startMonth = _c === void 0 ? defaultStartMonth : _c, _d = _a.container, container = _d === void 0 ? 'body' : _d, _e = _a.translations, translations = _e === void 0 ? defaultTranslations : _e;
        var el = get(container);
        if (el) {
            el.innerHTML = renderTable(translations);
        }
        renderCalendar(startYear, startMonth, selectors, translations);
        addListeners(startYear, startMonth, translations);
    };
    exports.renderCalendarWidget = renderCalendarWidget;
});
//# sourceMappingURL=index.js.map