我需要使用Fullcalendar
单击"年度单元"视图时重定向到月视图。我在下面解释我的代码。
<div class="calender" id='calendar'></div>
<script>
function getCalendar() {
var todayDate = new Date().toISOString().slice(0, 10);
// var evStartDate = new Date(inputdate)
//console.log('date',evStartDate);
//addClassByDate(evStartDate);
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next',
center: 'title',
right: 'year,month,agendaWeek,agendaDay'
},
///////// edit
dayClick: function(date, jsEvent, view) {
//alert('day click');
},
eventClick: function(event, jsEvent) {
//alert('event clicked');
$('#eventpopup').modal({
backdrop: 'static'
});
},
eventRender: function(event, element, view) {
var evStart = moment(view.intervalStart).subtract(1, 'days');
var evEnd = moment(view.intervalEnd).subtract(1, 'days');
if (!event.start.isAfter(evStart) ||
event.start.isAfter(evEnd)) {
return false;
}
if (event.title.length > 10) {
var eventShortTitle = event.title.substring(0, 10) + '...';
element.qtip({
content: event.title,
position: {
at: 'bottom left', // at the bottom right of...
}
});
element.find('.fc-title').text(eventShortTitle);
}
},
///////////
defaultDate: todayDate,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [{
title: 'jQuery is a fast and concise JavaScript Library',
start: '2017-12-01'
}, {
title: 'hello',
start: '2017-12-02'
}, {
id: 999,
title: 'hii',
start: '2017-11-02'
}]
});
}
</script>
在这里,我也有"年度"视图,因为我的要求是一年的视图,并且我使用的是旧版本的Fullcalendar
。在这里我需要在用户单击一个月单元时,各个月将从一个月视图显示。
您可以尝试一下
dayClick: function(date, jsEvent, view) {
$('#calendar').fullCalendar('gotoDate',date);
$('#calendar').fullCalendar('changeView','month'); //This would take you to the respective month
},
eventClick: function(calEvent, event, jsEvent) {
var dt = calEvent.start;
$('#calendar').fullCalendar('gotoDate',dt);
$('#calendar').fullCalendar('changeView','month');
}
实际上您可以在ChangeView方法上设置日期。
立即切换到其他视图。
.fullcalendar('ChangeView',viewName,dateorrange)
例如:
$('#calendar').fullCalendar('changeView', 'agendaDay', '2017-06-01');