如何调试这个 javascript 日历？

Question

我在实现一个显示休息日的简单 JavaScript 日历时遇到了一些麻烦。

Codepen：https://codepen.io/cestdani/pen/wvbmvLm

实际页面：https://patisserieun.com/calendar/

如您所见，日历部分生成，但没有日期数据。

如有任何帮助，我们将不胜感激...

ps。外行主题“newpageshown”文档在这里： https://laytheme.com/documentation/custom-javascript.html

Javascript：

<script>
    
  window.laytheme.on("newpageshown", function(){ 

///
const daysOff = [
  '2024-06-21',
  '2024-06-23',
  '2024-06-25'
];


// JavaScript for the calendar widget
        "use strict";
        const doc = document;
        const defaultDays = ['日','月','火','水','木','金','土'];
        const defaultMonths = [
            '1月', '2月', '3月', '4月', '5月', '6月',
            '7月', '8月', '9月', '10月', '11月', '12月'
        ];
        const selectors = {
            body: '#calendar-container #ts-calendar__body',
            year: '#calendar-container #ts-calendar__year',
            month: '#calendar-container #ts-calendar__month'
        };
        const today = new Date();
        let defaultStartYear = today.getFullYear();
        let defaultStartMonth = today.getMonth();
        let defaultStartDay = today.getDate();
        const get = (selector) => doc.querySelector(selector);
        const add = (type) => doc.createElement(type);

        const onClick = (selector, callback) => get(selector).addEventListener('click', callback);

        const renderCaption = (translations) => `
        <caption>
            <button id="ts-calendar__prev" title="${translations.prevMonthTitle}">${translations.prevMonth}</button>
            <span id="ts-calendar__month"></span>
            <span id="ts-calendar__year"></span>
            <button id="ts-calendar__next" title="${translations.nextMonthTitle}">${translations.nextMonth}</button>
        </caption>
        `;

        const renderDays = (days) => days.map((day) => `<th>${day}</th>`).join('');

        const renderHeader = (translations) => `
        <thead>
            <tr>
                ${renderDays(translations.days)}
            </tr>
        </thead>
        `;

        const renderTable = (translations) => `
        <table>
            ${renderCaption(translations)}
            ${renderHeader(translations)}
            <tbody id="ts-calendar__body"></tbody>
        </table>
        `;

        const renderCalendar = (year, month, selectors, translations) => {
            const bodyEl = get(selectors.body);
            const yearEl = get(selectors.year);
            const monthEl = get(selectors.month);
            const firstDay = new Date(year, month).getDay();
            const allDays = 32 - new Date(year, month, 32).getDate();
            let day = 1;
            bodyEl.innerHTML = '';
            yearEl.innerHTML = year.toString();
            monthEl.innerHTML = translations.months[month];

            for (let i = 0; i < 6; i++) {
                const tr = add('tr');
                for (let j = 0; j < 7; j++) {
                    const 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');
                        }
                        const currentDate = new Date(year, month, day);
                        const dateString = currentDate.toISOString().split('T')[0];
                        if (daysOff.includes(dateString)) {
                            td.classList.add('is--day-off');
                        }
                        day++;
                    }
                    tr.append(td);
                }
                bodyEl.append(tr);
            }
        };

        const addListeners = (startYear, startMonth, translations) => {
            onClick('#ts-calendar__prev', (event) => {
                event.preventDefault();
                const isFirstMonth = startMonth === 0;
                startMonth = isFirstMonth ? 11 : startMonth - 1;
                startYear = isFirstMonth ? startYear - 1 : startYear;
                renderCalendar(startYear, startMonth, selectors, translations);
            });

            onClick('#ts-calendar__next', (event) => {
                event.preventDefault();
                const isLastMonth = startMonth === 11;
                startMonth = isLastMonth ? 0 : startMonth + 1;
                startYear = isLastMonth ? startYear + 1 : startYear;
                renderCalendar(startYear, startMonth, selectors, translations);
            });
        };

        const defaultTranslations = {
            days: defaultDays,
            months: defaultMonths,
            prevMonth: '&larr;',
            nextMonth: '&rarr;',
            prevMonthTitle: 'Previous month',
            nextMonthTitle: 'Next month'
        };

        const renderCalendarWidget = (startYear = defaultStartYear, startMonth = defaultStartMonth, container = '#calendar-container', translations = defaultTranslations) => {
            get(container).innerHTML = renderTable(translations);
            renderCalendar(startYear, startMonth, selectors, translations);
            addListeners(startYear, startMonth, translations);
        };

        // Initialize the calendar widget
        renderCalendarWidget();





///
});
    
</script>

没有控制台错误。 我已经在默认主题/另一个站点上测试了代码...问题仍然存在。

我也测试了 fullcalendar.js ...同样的问题。

Codepen：https://codepen.io/cestdani/pen/abrrojy

实际页面：https://patisserieun.com/calendar-2/

Answer 1

虽然您提供的所有代码和信息都很完美，但缺少的是您的样式。查看实际页面，您有一个 CSS 规则，将

row

类 (

.row { font-size: 0; }

) 的字体大小设置为 0。将其设置为非零值将显示您的日历。