实现Angular ui-calendar外部元素drop功能

Question

我使用的是为AngularJS提供的ui-日历插件，它基于Fullcalendar jQueryUI插件。我想要的是实现像全日历演示的拖放功能，外部事件。但是默认情况下，Angular ui-calendar不提供这个功能，所以我做了一些研究。

现在我可以拖动外部元素，将其放到日历上，日历检测到该元素，但我不知道如何将该元素放入日历中。

医生说可以用this标签检索元素，但是当我调用$(this).data('eventObject');时却什么也得不到

下面是我的日历控制器(我对AngularJS使用Typescript )：

export class CalendarCtrl {
    static $inject = ['planningService'];

    public events: any;
    public uiConfig: any;
    public alertMessage: string;
    public eventSources: any;
    public eventsPlanned: Array<EventPlanned>;

    constructor(planningService: PlanningService) {

        // events
        this.events = planningService.getEventsPlanned();

        /* config object */
        this.uiConfig = {
            calendar: {
                lang: 'fr',
                droppable: true,
                drop: this.onDrop,
                height: 450,
                editable: true,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                eventClick: this.alertOnEventClick,
                eventDrop: this.alertOnDrop,
                eventResize: this.alertOnResize
            }
        };

        /* Event sources array */
        this.eventSources = [this.events];
    }

    public onDrop(date: Date, allDay: boolean) {
        alert('Dropped on Calendar ! AllDay: ' + allDay + ' Date: ' + date + ' ' + $(this).data('eventObject'));


        var originalEventObject = $(this).data('eventObject');

        var copiedEventObject = $.extend({}, originalEventObject);

        copiedEventObject.start = date;
        copiedEventObject.allDay = allDay;

        $('#interventionPlanning').fullCalendar('renderEvent', copiedEventObject, true);

        if ($('#drop-remove').is(':checked')) {
            $(this).remove();
        }
    }

    /* message on eventClick */
    public alertOnEventClick(event: any, allDay: any, jsEvent: any, view: any) {
        this.alertMessage = (event.title + ': Clicked ');
    }

    /* message on Drop */
    public alertOnDrop(event: any, dayDelta: any, minuteDelta: any, allDay: any, revertFunc: any, jsEvent: any, ui: any, view: any) {
        this.alertMessage = (event.title + ': Droped to make dayDelta ' + dayDelta);
    }

    /* message on Resize */
    public alertOnResize(event: any, dayDelta: any, minuteDelta: any, revertFunc: any, jsEvent: any, ui: any, view: any) {
        this.alertMessage = (event.title + ': Resized to make dayDelta ' + minuteDelta);
    }
}

我的HTML：

<div class="wrapper wrapper-content" ng-controller="CalendarCtrl as calendar">
    <div id="interventionPlanning" ui-calendar="calendar.uiConfig.calendar" calendar="interventionPlanning" class="calendar" ng-model="calendar.eventSources"></div>
</div>

有谁找到了解决这个问题的办法吗？有很多与我的问题相关的帖子，但我还没有找到解决方案。

Answer 1

我发现了这个：

        $scope.uiConfig = {
            calendar: {
                droppable: true,
                drop:function(data) {
                    alert("I got droped!" + new Date(data));
                }
            }
        };

我仍在努力，但你可以从这一点上找到解决方案。

祝好运!