如何通过UI完整日历动态添加事件

Question

我在我的angular js应用程序中实现了UI-calendar。我已经成功地在页面上添加了日历。但是我想将事件添加到agendaWeek日历中，并将数据保存到数据库中。

我的代码实现是

HTML

<div ui-calendar="uiConfig.calendar" data-ng-model="eventSources">
                            </div>

JS

    $scope.eventSources = [];
    $scope.uiConfig = {
        calendar: {
            defaultView: 'agendaWeek',
            height: 450,
            editable: true,
            header: {
                left: '',
                center: 'title',
                right: 'prev,next'
            },
            eventClick: $scope.alertEventOnClick,
            eventDrop: $scope.alertOnDrop,
            eventResize: $scope.alertOnResize
        }
    };

请任何人帮助我实现事件实现

Answer 1

您已经用the docs很好地描述了所有完整的日历。

例如，您可以像这样实现eventClick：

此方法显然是在用户单击日历中的某一天时触发的。在那里，您可以根据从eventClick方法获得的属性创建一个事件源对象。

function eventClick(calEvent, jsEvent, view) {
    var tempEventSource = {events: [{
        title: calEvent.title,
        start: calEvent.start.format('YYYY-MM-DD'),
        end: calEvent.end.format('YYYY-MM-DD'),
        className: calEvent.className[0]
    }]};
    var newEvent = tempEventSource.events[0];
    eventService.saveEvent(newEvent).then(function(event) {
        tempEventSource.events[0].eventid = event.id;
        uiCalendarConfig.calendars['your_calendar'].fullCalendar('addEventSource', tempEventSource);
    });
}

注意，您可以通过将uiCalendarConfig注入到控制器中来获得它：

function CalendarController(eventService, uiCalendarConfig)