提问人:Luigi Battaglioli 提问时间:11/3/2023 最后编辑:Luigi Battaglioli 更新时间:11/3/2023 访问量:25
更改月份时出现重复的日期编号
Duplicated day numbers when changing the month
问:
我的网站上有一个 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">
答: 暂无答案
评论