Rendering a new fullcalendar instance when ever the calendar function is called using angularjs

I am using fullcalendar plugin and when i click a button it’s passing event values to the calendar and calendar is displayed correctly. But when ever I click the button always a new calendar is displayed. I want to display only one calendar and it should display the passed event values accrodingly. please find the below code. Please note that I am not using any jquery libraries

<html>
<head>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/core/main.css" rel="nofollow noreferrer noopener"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/daygrid/main.css" rel="nofollow noreferrer noopener"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/list/main.css" rel="nofollow noreferrer noopener"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/timegrid/main.css" rel="nofollow noreferrer noopener"></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.calendarEl = "";
 $scope.calendar = "";
$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'
        }]};
    $scope.calendarEl = document.getElementById('calendar');

        $scope.calendar = new FullCalendar.Calendar($scope.calendarEl, {
            events: $scope.event.events,
            plugins: [ 'dayGrid','timeGrid','list' ]
        });
         $scope.calendar.render();
    });
</script>
<body ng-app="myApp" ng-controller="myController">
   <div id="calendar" ng-model="eventSources"></div>    
</body>
</html>

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

This can be achieved by using $scope.calendar.addEventSource('name_of_the_array_ofEvent_values')

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply