时间戳

首页 > 解决方案 > FullCalendar 和 visibleRange

fullcalendar - FullCalendar 和 visibleRange

问题描述

我需要一个日历，但对于一个固定月份，我只需要 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>

标签： fullcalendar

解决方案

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

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

推荐阅读