重写FullCalendar的calendar.prev和calendar.next行为

huangapple go评论75阅读模式
英文:

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.prevcalendar.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.

huangapple
  • 本文由 发表于 2023年3月7日 00:38:59
  • 转载请务必保留本文链接:https://go.coder-hub.com/75653473.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定