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

时间:2016-10-13 18:32:33

标签: angularjs fullcalendar ui-calendar

我正在我的angular js应用程序中实现UI日历。我已成功在页面上添加日历。但我想将该事件添加到agendaWeek日历并将该数据保存到DB中。

我的代码实现是

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
        }
    };

请任何人帮我实施活动实施

1 个答案:

答案 0 :(得分:0)

您可以在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)