FullCalendar and visibleRange

Question

我需要一个日历，但对于固定月份，我只需要八月，我正试图用属性visibleRange来实现这一点，但没有成功
这是我的代码。日历可以工作，但它一直显示当前月份。

<script src="{{asset('fullcalendar/packages/core/main.js')}}"></script>
<script src="{{asset('fullcalendar/packages/daygrid/main.js')}}"></script>
<script src="{{asset('fullcalendar/packages/timegrid/main.js')}}"></script>
<script src="{{asset('fullcalendar/packages/list/main.js')}}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid', 'timeGrid', 'list'],
defaultView: 'dayGridMonth',
visibleRange: {
start: '2020-08-01',
end: '2020-08-31'
},
locale: {
code: "es",
week: {
dow: 1,
doy: 4 
},
allDayHtml: "Todo<br/>el día",
eventLimitText: "más",
noEventsMessage: "No hay eventos para mostrar"
},
header: {
left: 'prev, next',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth',
},
weekNumbers: false,
eventLimit: true, // allow "more" link when too many events
events: []
});
calendar.render();
});
</script>

Answer 1

实例化后可以调用方法gotoDate

var calendar = new FullCalendar.Calendar(calendarEl, {
// your options
});
calendar.render();
calendar.gotoDate('2020-08-01')

Answer 2

您需要使用timeGrid而不是dayGridMonth作为默认视图

defaultView: 'timeGrid',
visibleRange: {
start: '2020-08-10',
end: '2020-08-12'
},