How to add event dynamically via UI full calendar - angularjs

Question

I am implementing the UI-calendar in my angular js application. I have successfully added the calendar on the page. But I want to add the event to agendaWeek calendar and save that data into DB.
My code implementation is
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
}
};
Please anyone help me to implement the event implementation

Answer 1

You have all the fullcalendar very well described in the docs.
You could implement the eventClick for example like so:
This method is obviously triggered when a user clicks a day in the calendar.
There you create an event source object based on properties you get from the eventClick method.
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);
});
}
Note you get the uiCalendarConfig from injecting it in your controller:
function CalendarController(eventService, uiCalendarConfig)