UIを使ってイベントを動的に追加する方法フルカレンダー

Question

私は、角度jsアプリケーションでUIカレンダーを実装しています。私はページにカレンダーを追加しました。しかし、私はagendaWeekカレンダーにイベントを追加し、そのデータをDBに保存したいと思います。

私のコードの実装では、誰もがあなたが非常によくthe docsに記載されているすべてのfullcalendarを持つイベントの実装

Answer 1

を実装するために私を助けてください

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

です。

あなたはそうのように、たとえば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)