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回调函数之外给它更大的范围，以便它起作用。

此外，您的代码示例尝试重新声明整个日历，而实际上您只是想向其中添加一些事件。

这是应该正常运行的版本：

第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

2 个答案: