如何解决更新日历用户界面以反映使用“ gotoDate”功能选择的新日期作为显示的第一个日期 精简测试用例错误说明
精简测试用例
https://jsfiddle.net/ryj1023/5epnoguk/5/
HTML:
<button
onclick="updateDaterange()"
>
Click
</button>
<div id='calendar'></div>
JavaScript:
const updateDaterange = () => {
// calendar.gotoDate(new Date('11-04-2020')); // this will change the view because the date passed in the function isn't currently in view
calendar.gotoDate(new Date('10-04-2020')); // this will not update the view with the passed in date as the first date in range because it's already in view
}
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl,{
events: [
{
id: 'a',resourceId: 'a',title: 'All Day Event',start: '2020-09-01',},{
title: 'Long Event',start: '2020-09-07',end: '2020-09-10',],allDaySlot: false,displayEventTime: false,header: false,plugins: [ 'dayGrid','timeGrid','rrule'],defaultview: 'timeGridWeek',resourceOrder: 'sort',defaultDate: new Date('10-01-2020'),schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',views: {
month: {
type: 'dayGridMonth',week: {
type: 'resourceTimeline',slotLabelFormat: [
{
weekday: 'short',day: 'numeric',month: 'short',resourceLabelText: 'Property',duration: {
days: 14,// getDefaultWeekDuration(start,end)
},dateIncrement: {
days: 1,slotDuration: '24:00:00',// eventRender: ({ date,el,view }) => {
// },themeSystem: 'bootstrap',eventOverlap: false,contentHeight: 'auto',resourceAreaWidth: '10%',resources: [{ id: 'a',title: 'Auditorium A' }],});
calendar.render();
错误说明
我正在尝试使用“ gotoDate”功能将日历的UI更新为,以便将传递给该功能的日期反映为所示范围的第一个日期。如果我在函数中传递的日期尚未在视图中显示的范围内,则此功能有效。当我选择一个显示当前范围内的日期而不是第一个日期时,UI不会更改。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。