使用 angularjs 使用数据库获取的事件值呈现 FullCalendar

Question

我想用一些数据库获取的事件值来呈现 fulcalendar。这些值存储在数组 json 中。但目前只显示日历，但看不到日期的任何值，它也会出错。请在下面找到代码。

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>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'dayGrid' ]
        });

        calendar.render();
    });
</script>
<body ng-app="myApp" ng-controller="myController">
   <div id="calendar" ng-model="eventSources"></div>    
</body>
</html>

myscript.js

myApp.controller('myController', ['$scope', '$window', 'vv', '$http', function ($scope, $window, vv, $http)
{
    $scope.displayVal = [];
    $scope.addEventVal = function()
    {
        //code to get values from db
        $scope.displayVal.push({start:someVal,end:someValue});
        $('#calendar').fullCalendar({
             events: $scope.displayVal
        });
     }   
}]);

然后我收到一条错误消息，指出 fullCalendar 不是函数。我搞砸了什么？请注意，除了显示从数据库

获得的事件值外，我不需要任何其他功能

Answer 1

fullCalendar 不再作为 jQuery 插件实现，因此您不能再编写 $('#calendar').fullCalendar({。

相反，您必须引用 calendar 变量（即您编写 var calendar = ... 的位置）。但是，您可能需要在 DomContentLoaded 回调之外为其提供更广泛的范围，以便工作。

此外，您的代码示例试图 re-declare 整个日历，而您真正想要做的只是向其中添加一些事件。

这是一个应该可以正常工作的版本：

第 1 部分：

<script>
    var calendar; //give the calendar variable global scope
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'dayGrid' ]
        });

        calendar.render();
    });
</script>

第 2 部分：

myApp.controller('myController', ['$scope', '$window', 'vv', '$http', function ($scope, $window, vv, $http)
{
    $scope.displayVal = [];
    $scope.addEventVal = function()
    {
        //code to get values from db
        $scope.displayVal.push({start:someVal,end:someValue});
        calendar.addEventSource($scope.displayVal); //add some events to the calendar as a new event source
        });
     }   
}]);

Answer 2

在尝试了很多答案后，我可以在以下过程中获得成功

<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' ]
        });
        calendar.render();
    });
</script>
<body ng-app="myApp" ng-controller="myController">
   <div id="calendar" ng-model="eventSources"></div>    
</body>
</html>

请注意，我只使用了 fulcalendar-4.1.0 中使用的库，它不包含任何 jquery 库

使用 angularjs 使用数据库获取的事件值呈现 FullCalendar

Rendering FullCalendar with database fetched event values using angularjs

html

database

fullcalendar

angularjs