Визуализация FullCalendar со значениями событий, извлеченными из базы данных, с использованием angularjs - PullRequest
Новая
       18

Визуализация FullCalendar со значениями событий, извлеченными из базы данных, с использованием angularjs

0 голосов
/ 07 мая 2019

Я хочу отобразить календарь с некоторыми значениями событий из базы данных.эти значения хранятся в массиве 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 не являетсяфункция . С чем я связался?Обратите внимание, что я не хочу никакой другой функции, кроме отображения значений событий, полученных из базы данных

Ответы [ 2 ]

0 голосов
/ 08 мая 2019

После попытки получить много ответов я смог добиться успеха в следующем процессе 

<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

0 голосов
/ 07 мая 2019

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
        });
     }   
}]);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...