AngularJS FullCalendar按ID

时间:2016-07-11 13:58:24

标签: angularjs fullcalendar

我试图使用fullcalendar,PHP和angularjs从mysql db获取日历事件。

HTTP

<div ng-controller="calController" ng-show="tab4">
    <div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar">
    </div>
</div>

我的控制者:

.controller('calController', ['$rootScope', '$scope', '$http', 'uiCalendarConfig', function ($rootScope, $scope, $http, uiCalendarConfig) {

var user = $rootScope.userID;

$scope.eventSources = {
    url: 'php/events.php?agentID=' + user
};

$scope.uiConfig = {
    calendar: {
        height: 300,
        editable: false,
        allDay: false,
        header: {
            left: 'title',
            center: '',
            right: 'agendaWeek prev,next'
        }
    }
};}]);

我的PHP:

$sql="SELECT * FROM `Events`";$sql = $con->prepare($sql);$sql->execute();$results=$sql->fetchAll(PDO::FETCH_ASSOC); $json=json_encode($results); 

我将结果导入我的日历,但他们将所有结果都记录在数据库中。可能是因为statemnt是select * from events...

在控制器中,您可以看到我使用我的参数“user”传递URL,但这对php脚本的返回没有影响。

所以我的问题是如何仅返回特定用户事件而不是所有事件?

我想我的PHP文件需要编辑,但我不知道该怎么做..

编辑:

我还尝试将事件放入数组然后绑定到eventSources:

var user = $rootScope.userID;

var events = [];

$scope.eventSources = [events];

$http.post('php/events.php', {
    'user': user
}).success(function (data) {

    console.log(data);

    angular.forEach(data, function (value) {

        events.push({
            start: value.start,
            end: value.end
        });
    });

    console.log("events", events);
    console.log("sources", $scope.eventSources);

});

这适用于使用ID获取事件,但现在我没有在日历中看到事件。

console.log("events", events);
console.log("sources", $scope.eventSources);

以上的输出是:

enter image description here

为什么不会在带有数组的日历中显示事件?任何帮助都会很棒。

由于

1 个答案:

答案 0 :(得分:0)

通过一些故障排除,我发现加载日历后需要调用PHP脚本。

一旦我这样做,我就能看到日历中的事件:

.controller('calController', ['$rootScope', '$scope', '$http', 'uiCalendarConfig', function ($rootScope, $scope, $http, uiCalendarConfig) {

var user = $rootScope.userID;
var isFirstTime = true;
var events = [];

$scope.getEvents = function () {
    $http.post('php/events.php', {
        'user': user
    }).success(function (data) {
        //events = data;
        angular.forEach(data, function (value) {
            events.push({
                start: value.start,
                end: value.end
            });
        });

    });
}

$scope.eventSources = [events];

$scope.uiConfig = {
    calendar: {
        height: 300,
        editable: false,
        header: {
            left: 'title',
            center: '',
            right: 'month basicWeek basicDay agendaWeek agendaDay prev,next'
        },
        eventAfterAllRender: function () {
            if ($scope.eventSources.length > 0 && isFirstTime) {
                isFirstTime = false;
                $scope.getEvents();
            }

        }
    }
};}]);