0
233
ViewsFullCalendar dayGrid View does not show view options in header
I am using FullCalendar v5 in JS When I try to use dayGrid View, it is not working.
Expected Output:
Output Received:
I have added a script tag at the top of my PHP file for the dayGrid plugin:
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@5.9.0/"></script>
The following script tag is used to add the buttons on the header:
<script>
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
initialView: 'dayGridWeek',
header: {
left: 'prev,next',
center: 'title',
right: 'dayGridMonth,dayGridDay,dayGridWeek'
},
editable: true,
events: 'https://fullcalendar.io/demo-events.json'
});
});
</script>
1 answers
Answer question0
Looking at the jQuery-based syntax you've used, you appear to be using fullCalendar v3 (or below), not v5. (v4 and above are not implemented as jQuery plugins and the syntax to initialise the calendar is quite different.)
Therefore you need to refer to the documentation here: https://fullcalendar.io/docs/v3#toc
Once you do that, you'll see that
a) the view names are all different, and
b) the option for setting the view at startup is defaultView, not initialView.
Therefore the code you would need is:
var calendar = $("#calendar").fullCalendar({
defaultView: "agendaWeek",
header: {
left: "prev,next",
center: "title",
right: "month,agendaDay,agendaWeek"
},
editable: true,
events: "https://fullcalendar.io/demo-events.json"
});
Live demo: https://codepen.io/ADyson82/pen/XWgpaao
P.S. The link https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@5.9.0/ is just a link to one of the plugin files for version 5.9, it's not the main fullCalendar file. If you're managing to get a calendar working using v3 then you don't need that reference at all.