Question

我使用基于Fullcalendar jQueryUI插件为AngularJS提供的ui-calendar插件。我想要的是实现像Fullcalendar演示外部事件的拖放功能。但是Angular ui-calendar默认没有提供，所以我做了一些研究。

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

Doc说可以使用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));
                }
            }
        };

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

祝你好运！

为Angular ui-calendar实现外部元素的drop函数

1 个答案: