angular fullcalendar在调整大小时更改数据源

时间:2016-02-04 18:47:57

标签: javascript angularjs fullcalendar

如果回调中的事件是新事件,我如何修改eventResize上的eventSource,以便我无法在eventSource中找到它。

function eventResized ( event, delta, revertFunc, jsEvent, ui, view ) {

    var end = moment(event.end).add(delta._milliseconds, 'milliseconds');
    var index = $scope.availableEvents.events.indexOf(event);
    $scope.availableEvents.events[index].end = end;

  }

正确地在index = -1上面的代码中,如何在event中找到$scope.availableEvents.events

2 个答案:

答案 0 :(得分:2)

我有同样的情况,我找到了以下解决方案。

function eventResized ( event, delta, revertFunc, jsEvent, ui, view ) {

    var end = moment(event.end).add(delta._milliseconds, 'milliseconds');
    var matchedEvents = $scope.calendar.fullCalendar('clientEvents', function (existingEvent) {
                        return (existingEvent._id == event._id);
    });
    console.log(matchedEvents);
  }

这适合我。

答案 1 :(得分:1)

使用$$hashKey

function eventResized ( event, delta, revertFunc, jsEvent, ui, view ) {

    var end = moment(event.end).add(delta._milliseconds, 'milliseconds');

    $scope.availableEvents.events.map(function(eventModel) {

        // find event by hashKey
        if (eventModel.$$hashKey === event.$$hashKey) {
             eventModel.end = end;
        }
    });
}

我最终使用了catch-all更新功能,我在$$hasKey搜索并手动清理模型,以确保事件收集保持清洁。这是一个更完整的例子(请忽略明显滥用$ scope,你明白了):

$scope.eventResize = function(event, delta, revertFunc, jsEvent, ui, view) {
    $scope.updateEvent(event, delta, revertFunc, jsEvent, ui, view);
};

$scope.addEvent = function (momentDate) {
    // add event today by default
    momentDate = momentDate || moment();
    $scope.events.push($scope.sanitizeEventModel({
        title: 'New Event',
        startTimestamp: momentDate.unix(),
        start: momentDate.format(),
        allDay: true,
        stick: true // prevents new events from disappearing when switching views
    }));
};

// a wrapper to update angular models properly from fullcalendar events
// additionaly cleans up dates
$scope.updateEvent = function(event, delta, revertFunc, jsEvent, ui, view) {
    $scope.events.map(function(eventModel) {
        // find event by hashKey
        if (eventModel.$$hashKey === event.$$hashKey) {
            eventModel.allDay = event.allDay;
            eventModel.start = event.start;
            eventModel.end = event.end;
            $scope.sanitizeEventModel(eventModel);
        }
    });
};

$scope.sanitizeEventModel = function(eventModel) {

    eventModel.start = moment.utc(eventModel.start).format();
    eventModel.startTimestamp = moment(eventModel.start).unix();

    if (eventModel.end) {
        eventModel.end = moment.utc(eventModel.end).format();
    }

    // etc ...

    return eventModel;
};

$scope.eventSources = getEventSources();

function getEventSources() {

    // fetch pre-parsed json script template
    $scope.jsonEvents = jsonCache.get($attrs.jsonDataId);
    $scope.events = $scope.jsonEvents.events;
    $scope.events.map($scope.sanitizeEventModel);
    return [$scope.events];
}