OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How can I debug this javascript calendar? [closed]

  • Thread starter Thread starter Daniel
  • Start date Start date
D

Daniel

Guest
I'm having some trouble implementing a simple javascript calendar that shows days off.

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

Actual page: https://patisserieun.com/calendar/

As you can see the calendar partially generates, but without the date data.

Any help would be appreciated...

ps. the laytheme 'newpageshown' documention is here: https://laytheme.com/documentation/custom-javascript.html

Javascript:

Code:
<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>

There are no console errors. I've tested the code on a default theme/another site... issue persists.

I've also test fullcalendar.js ... same issue.

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

Actual page: https://patisserieun.com/calendar-2/

<p>I'm having some trouble implementing a simple javascript calendar that shows days off.</p>
<p>Codepen: <a href="https://codepen.io/cestdani/pen/wvbmvLm" rel="nofollow noreferrer">https://codepen.io/cestdani/pen/wvbmvLm</a></p>
<p>Actual page: <a href="https://patisserieun.com/calendar/" rel="nofollow noreferrer">https://patisserieun.com/calendar/</a></p>
<p>As you can see the calendar partially generates, but without the date data.</p>
<p>Any help would be appreciated...</p>
<p>ps. the laytheme 'newpageshown' documention is here:
<a href="https://laytheme.com/documentation/custom-javascript.html" rel="nofollow noreferrer">https://laytheme.com/documentation/custom-javascript.html</a></p>
<p>Javascript:</p>
<pre><code><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>
</code></pre>
<p>There are no console errors.
I've tested the code on a default theme/another site... issue persists.</p>
<p>I've also test fullcalendar.js ... same issue.</p>
<p>Codepen: <a href="https://codepen.io/cestdani/pen/abrrojy" rel="nofollow noreferrer">https://codepen.io/cestdani/pen/abrrojy</a></p>
<p>Actual page: <a href="https://patisserieun.com/calendar-2/" rel="nofollow noreferrer">https://patisserieun.com/calendar-2/</a></p>
 
Top