Question

我正在尝试用完整的日历替换旧日历（DHX）。

我使用了演示代码，并且设法显示了json事件。

我遇到的问题是单击“下一步”或“ PEV”时。我不，看不到其它事件。

我将所有2019年事件载入一张照片，接下来的事件应该显示出来。

HTML：

    <!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>FTS Team</title>
<script type="text/javascript" src="lib/angular.js"></script>
<script type="text/javascript" src="lib/angular-resource.js"></script>

<script src="calendarv2.js"></script>

<link rel="stylesheet" href="http://angular-ui.github.io/ui-calendar/bower_components/bootstrap-css/css/bootstrap.css">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap-theme.min.css">
<script src="lib/jquery-1.11.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>

<!-- For Calendar -->
<script src="http://angular-ui.github.io/ui-calendar/bower_components/moment/moment.js"></script>
<script src="http://angular-ui.github.io/ui-calendar/bower_components/fullcalendar/dist/fullcalendar.js"></script>
<script src="http://angular-ui.github.io/ui-calendar/bower_components/fullcalendar/dist/gcal.js"></script>      
<script src="http://angular-ui.github.io/ui-calendar/src/calendar.js"></script>

<link rel="stylesheet" href="http://angular-ui.github.io/ui-calendar/bower_components/fullcalendar/dist/fullcalendar.css">  

<!-- For Modal Windows -->
<script src="lib/bootstrap/js/ui-bootstrap-tpls-0.11.0.js"></script>    
</head>

<body ng-controller="myCtrl">
    <div ui-calendar="uiConfig.calendar" class="span12 calendar" ng-model="eventSources"></div> 
</body>
</html>

JS是：

var app = angular.module('myApp', ['ui.calendar', 'ui.bootstrap']);

app.controller('myCtrl', function ($scope, $http, $compile, uiCalendarConfig) 
{

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();


    /* event source that contains custom events on the scope */
    $scope.events = [{title: 'All Day Event',start: new Date(y, m, 1)}];

    $http.get('rest/event/').success(function(data) {
            $scope.myEvents = data;

            data.forEach(function(entry) {
                var d1 = new Date(entry["dateB"]);
                var d2 = new Date(entry["dateE"]);

                var myEvent = {title: entry["title"],start: d1, end: d2, allDay: true};
                if ( d1.getFullYear() >= 2019 ) { 
                    $scope.events.push(myEvent);
                }

        });

    });


    /* alert on eventClick */
    $scope.alertOnEventClick = function( date, jsEvent, view){
        $scope.alertMessage = (date.title + ' was clicked ');
        alert(date.title + ' was clicked ');
    };
    /* alert on Drop */
     $scope.alertOnDrop = function(event, delta, revertFunc, jsEvent, ui, view){
       $scope.alertMessage = ('Event Droped to make dayDelta ' + delta);
    };
    /* alert on Resize */
    $scope.alertOnResize = function(event, delta, revertFunc, jsEvent, ui, view ){
       $scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
    };

    /* Change View */
    $scope.changeView = function(view,calendar) {
        alert("change View");
      uiCalendarConfig.calendars[calendar].fullCalendar('changeView',view);
    };

    /* Change View */
    $scope.renderCalender = function(calendar) {
    alert("change View render");
      if(uiCalendarConfig.calendars[calendar]){
        uiCalendarConfig.calendars[calendar].fullCalendar('render');
      }
    };

     /* Render Tooltip */
    $scope.eventRender = function( event, element, view ) { 
        element.attr({'tooltip': event.title,'tooltip-append-to-body': true});
        $compile(element)($scope);

    };


    /* config object */
    $scope.uiConfig = {
      calendar:{
        height: 600,
        editable: false,
        weekends: true,
        defaultView: 'month',
        lazyFetching: 'false',
        displayEventTime: false,
        header:{
          left: 'title',
          center: '',
          right: 'today prev,next'
        },
        eventClick: $scope.alertOnEventClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize,
        eventRender: $scope.eventRender
      }
    };


    /* event sources array*/
        $scope.eventSources = [$scope.events];

});

请问有什么想法，我缺少什么？

谢谢，尼古拉斯

Answer 1

我遇到了同样的问题，我销毁了调用方，然后为下一个和上一个事件重新创建了该调用方，并且对我有用！

下一个之后不显示全日历事件

1 个答案: