英文:
Overriding FullCalendar calendar.prev and calendar.next behaviour
问题
我有一个日历,其中一个视图是为了显示2个月。当点击“上一个”和“下一个”按钮时,该视图的默认行为是向前跳转两个月或向后跳转两个月。我想要实现的是,例如,如果我点击“下一个”按钮,并且我正在查看三月/四月,希望将显示更改为四月/五月,而不是五月/六月。这是否可行?
英文:
I have a calendar where one of the views is for 2 months. When clicking the Prev and Next buttons the default behaviour for this view is to skip back two months or skip forward two months. What I want to achieve, if I click the next button for example, and I'm viewing March/April,is to change the display to April/May and not May/June.
Is this possible?
答案1
得分: 1
我已成功解决问题,方法如下。我正在使用FullCalendar Scheduler和以下视图 -
views: {
resourceTimelineDay: {
buttonText: 'Day',
type: 'resourceTimeline',
slotDuration: '00:05:00',
slotLabelInterval: '00:30:00',
slotLabelFormat: [{year: 'numeric', month: 'long', day: 'numeric', weekday: 'long'}, {hour: '2-digit', minute: '2-digit', omitZeroMinute: false, meridiem: 'short'}]
},
resourceTimelineWeek: {
buttonText: 'Week',
type: 'resourceTimeline',
slotDuration: '01:00:00',
slotLabelInterval: '2:00:00',
slotLabelFormat: [{year: 'numeric', month: 'long', day: 'numeric', weekday: 'short'}, {hour: '2-digit', minute: '2-digit', omitZeroMinute: false, meridiem: 'short'}]
},
resourceTimelineMonth: {
buttonText: 'Month',
type: 'resourceTimeline',
slotDuration: '02:00:00',
slotLabelInterval: '24:00:00',
slotLabelFormat: [{year: 'numeric', month: 'long'}, {day: 'numeric', weekday: 'short'}]
},
resourceTimelineTwoMonths: {
buttonText: '2 Months',
type: 'resourceTimeline',
duration: { months: 2 },
slotDuration: '02:00:00',
slotLabelInterval: '24:00:00',
slotLabelFormat: [{month: 'long'}, {day: 'numeric'}]
}
}
我创建了一对自定义按钮来选择前一个和后一个周期。 view3
取决于点击的视图按钮 -
periodPrev: {
text: 'Prev', icon: 'chevron-left', click: function(){
if(view3 == '2 months')
{
let currentStart = new Date(periodStart);
let updatedStart = new Date(currentStart.setMonth(currentStart.getMonth()-1));
periodStart = moment(updatedStart).format('YYYY-MM-DD');
calendar.gotoDate(periodStart);
calendar.render();
}
else
{
calendar.prev();
}
}
}
和
periodNext: {
text: 'Next', icon: 'chevron-right', click: function(){
if(view3 == '2 months')
{
let currentStart = new Date(periodStart);
let updatedStart = new Date(currentStart.setMonth(currentStart.getMonth()+1));
periodStart = moment(updatedStart).format('YYYY-MM-DD');
calendar.gotoDate(periodStart);
calendar.render();
}
else
{
calendar.next();
}
}
}
如果视图不是'2个月',则调用标准的calendar.prev
和calendar.next
。否则,日期会被操控,导致2个月视图增减一个月。
英文:
I have actually managed to solve the problem as follows. I am using FullCalendar Scheduler with the following views -
views: {
resourceTimelineDay: {
buttonText: 'Day',
type: 'resourceTimeline',
slotDuration: '00:05:00',
slotLabelInterval: '00:30:00',
slotLabelFormat: [{year: 'numeric', month: 'long', day: 'numeric', weekday: 'long'}, {hour: '2-digit', minute: '2-digit', omitZeroMinute: false, meridiem: 'short'}]
},
resourceTimelineWeek: {
buttonText: 'Week',
type: 'resourceTimeline',
slotDuration: '01:00:00',
slotLabelInterval: '2:00:00',
slotLabelFormat: [{year: 'numeric', month: 'long', day: 'numeric', weekday: 'short'}, {hour: '2-digit', minute: '2-digit', omitZeroMinute: false, meridiem: 'short'}]
},
resourceTimelineMonth: {
buttonText: 'Month',
type: 'resourceTimeline',
slotDuration: '02:00:00',
slotLabelInterval: '24:00:00',
slotLabelFormat: [{year: 'numeric',month: 'long'},{day: 'numeric', weekday: 'short'}]
},
resourceTimelineTwoMonths: {
buttonText: '2 Months',
type: 'resourceTimeline',
duration: { months: 2},
slotDuration: '02:00:00',
slotLabelInterval: '24:00:00',
slotLabelFormat: [{month: 'long'},{day: 'numeric'}]
}
},
I have created a couple of custom buttons to select prev and next periods. view3 is set depending which view button is clicked -
periodPrev: {
text: 'Prev', icon: 'chevron-left', click: function(){
if(view3 == '2 months')
{
let currentStart = new Date(periodStart);
let updatedStart = new Date(currentStart.setMonth(currentStart.getMonth()-1));
periodStart = moment(updatedStart).format('YYYY-MM-DD');
calendar.gotoDate(periodStart);
calendar.render();
}
else
{
calendar.prev();
}
and
periodNext: {
text: 'Next', icon: 'chevron-right', click: function(){
if(view3 == '2 months')
{
let currentStart = new Date(periodStart);
let updatedStart = new Date(currentStart.setMonth(currentStart.getMonth()+1));
periodStart = moment(updatedStart).format('YYYY-MM-DD');
calendar.gotoDate(periodStart);
calendar.render();
}
else
{
calendar.next();
}
The standard calendar.prev and calendar.next is called if the view isn't '2 months'. Otherwise the date is manipulated and results in the 2 month view incrementing or decrementing by one month.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论