FullCalendar and visibleRange

Posted 2023-01-10

我需要一个日历，但是对于一个固定的月份，我只需要8月，而我正在尝试使用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>

答案

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

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

另一答案

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

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