更改月份时出现重复的日期编号

Duplicated day numbers when changing the month

提问人:Luigi Battaglioli 提问时间:11/3/2023 最后编辑:Luigi Battaglioli 更新时间:11/3/2023 访问量:25

问:

我的网站上有一个 FullCalendar 实例,当我使用上一个和下一个按钮导航到另一个月份时,一些天数是重复的。例如,我从 11 月开始导航到 12 月,当我切换到 12 月时,我会看到 2929、3030、3131 等日期数字,而 12 月将从 11、22、33、44 等开始。请参阅随附的照片以了解我的意思!

下面是我用来实例化 FullCalendar 实例的 JavaScript:

// FullCalendar Datepicker
    $(function () {
        let el = document.getElementById('datepicker');

        if (!el) {
            return;
        }

        let dateRange = parseInt(el.dataset.range);
        const today = new Date();
        const max = new Date();
        max.setDate(today.getDate() + dateRange);

        function selectDate(date, dayElement) {
            $('#moveInDate').val(date.toISOString().split('T')[0]);
            clearSelectedDates();
            if (dayElement) dayElement.classList.add('selected');
        }

        function clearSelectedDates() {
            document.querySelectorAll('.fc-day.selected').forEach(selected => {
                selected.classList.remove('selected');
            });
        }

        let calendar = new Calendar(el, {
            plugins: [dayGridPlugin, interactionPlugin],
            initialView: 'dayGridMonth',
            height: 650,
            titleFormat: { month: 'long' },
            datesSet: function(dateInfo) {
                console.log("datesSet", dateInfo);
                let newTitle = dateInfo.view.title;
                $('.fc-toolbar-title').text(newTitle);
            },
            headerToolbar: {
                left: 'prev',
                center: 'title',
                right: 'next'
            },
            validRange: {
                start: today,
                end: max
            },
            dateClick: function (info) {
                selectDate(info.date, info.dayEl);
            },
        });

        calendar.render();

        // Select today's date both in the input and visually in the calendar
        selectDate(today);
        document.querySelector('.fc-day-today').classList.add('selected');
    });

我也有一些CSS来改变日历的样式,以使这个项目更加符合品牌,但我无法想象这会导致这种情况发生?如果需要,很乐意分享,只是不想用不必要的代码使帖子膨胀。

我的 HTML 很简单,我只有一个日历,以及一个隐藏的输入,每当用户选择新日期时,我都会更新:div

<div class="my-8 max-w-[700px] mx-auto" id="datepicker" data-range="<?= $tenant->get_location()->get('moveOutDateRange') ?>"></div>

<input type="hidden" id="moveInDate" name="moveInDate">
JavaScript HTML 完整日历

评论

0赞 Barmar 11/3/2023
这听起来像是一个应该报告给开发人员的错误。
0赞 ADyson 11/4/2023
哪个版本的fullcalendar?

答: 暂无答案