Search code examples
angularjsfullcalendarfullcalendar-4

Day Button and Week Button is not displayed

I am using fullcalendar with angularjs to display events. Currently the month view is working correctly. But day button and week button aren't displayed in the UI.In both Left and right side Only Today, back and next buttons are displayed.I can't figure out the reason for that. Please find the below code.

view.html

<html>
<head>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/core/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/daygrid/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/list/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/timegrid/main.css"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/core/main.js"></script>
    <script type="text/javascript" src="../fullcalendar-4.1.0/packages/daygrid/main.js"></script>
    <script type="text/javascript" src="../fullcalendar-4.1.0/packages/timegrid/main.js"></script>
    <script type="text/javascript" src="../fullcalendar-4.1.0/packages/list/main.js"></script>
</head>
<script>
$scope.event = {events: [{
            title:'test1',
            start: '2019-05-05 08:00',
            end: '2019-05-10 08:00'
          },
          {
            title:'test2',
            start: '2019-05-05 12:00'
        }]};
    var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            events: $scope.event.events,
            plugins: [ 'dayGrid','timeGrid','list' ],
            header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
}
        });
        calendar.render();
    });
</script>
<body ng-app="myApp" ng-controller="myController">
   <div id="calendar" ng-model="eventSources"></div>    
</body>
</html>
Solution

  • You can add the following code lines in your script to display the day view and week view.

    header: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,dayGridWeek,timeGridDay'
}

    Reason for changing the right property fields is agendaWeek,agendaDay words aren't supported in the latest release of FullCalendar