FullCalendar 和 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

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

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

Answer 2

你可以在实例化后调用方法gotoDate

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

FullCalendar 和 visibleRange

FullCalendar and visibleRange

fullcalendar