FullCalendar and visibleRange

user_7788937 0
Viewed 759

I need a calendar but for a fix month, i need the month of August ONLY and I'm trying to do that with the property visibleRange without success.
This is my code. Calendar works, but it keeps showing me the current month. 

<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
2 Answers

You can call after instantiation the method gotoDate

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

You need to use the timeGrid instead of dayGridMonth as defaultview

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