Question

我在Angular js框架中为我分配了一个带日历实现的项目。

我将fullcalendar 3.8.0与Angular JS集成，它运行良好。但客户需要在一天内垂直拖放或订购事件。例如：basicWeek视图。

Mon 1/8
job three
job two
job one.

客户希望拖动在第一个位置呈现的事件“作业三”并在一天之内垂直放下“作业一”事件（周一1/8）。例如：周一1/8

job two
job one.
job three

目前使用fullCalendar无法实现上述目标。

Please find the image here

以下是我用于与Angular JS进行fullCalendar集成的文件

   librarires

    moment.js
    jquery-1.11.3.js
    angular.js
    ngDraggable.js
    calendar.js
    fullcalendar.js    
    gcal.js

    Style Sheet 

    <link rel="stylesheet" href="../css3/fullcalendar.css" />
    <link rel="stylesheet" href="../css/bootstrap.min.css" />

     //Dragable events
    <div class="col-" ng-repeat="obj in draggableObjects" ng-drag="true"
            ng-drag-data="obj" data-allow-transform="false">{{obj.title}}

  </div>
                        //Calendar binding in UI with Controller
                  <div>
                            <div id="calendar_one"
                                ng-drop-success="onDropComplete1($data,$event)"
                                ui-calendar="uiConfig.calendar" ng-model="eventSources"
                                calendar="myCalendar">
                                <div ng-repeat="obj in eventSources" ng-drag="true"
                                    ng-drag-data="obj" ng-center-anchor="{{centerAnchor}}">{{obj.title}}</div>
                            </div>
                        </div>

//Angular JS Controller                         

var app = angular.module("myApp", [ "ui.calendar", "ngDraggable" ]);

app.controller("myNgController", [ "$rootScope", "$scope", "$window",      "$document", "$timeout", "uiCalendarConfig",  
    function($rootScope, $scope, $window, $document, $timeout,  uiCalendarConfig) {

     $scope.dateRangesSOM = ["Jan 08, 2018 - Jan 12, 2018", "Jan 15, 2018 - Jan 19, 2018"]
     $scope.selectedDateRange = $scope.dateRangesSOM[0] ;        
     $scope.droppableObjectsDate = new Date();
        /**
         * Draggable objects code starts here
         */


        $scope.draggableObjects = [ {
            title : "Job Name One- #H",
            description : "Operation New Submittal",
            start: $scope.droppableObjectsDate,
            end : $scope.droppableObjectsDate,
            allDay : true
        }, {
            title : "Long Lead Time Name 2- #H",
            description : "Operation New Submittal",
            start : $scope.droppableObjectsDate,
            end : $scope.droppableObjectsDate,
            allDay : true
        }

        ];

        /**
         * Calendar code starts here
         */

        /*
         * Calendar 01
         */

        $scope.SelectedEvent = null;



        $scope.events = [];
        $scope.eventSources = [ $scope.events ];


        // Create dummy data
        var eventEntities = [ {
            title : "Job Name One- #H",
            description : "Operation New Submittaly",
            start :  $scope.droppableObjectsDate ,
            end :   $scope.droppableObjectsDate ,
            allDay : true
        }
        , {
            title : "Long Lead Time Name 2- #H",
            description : "Operation New Submittaly",
            start :   $scope.droppableObjectsDate ,
            end :   $scope.droppableObjectsDate ,
            allDay : true
        } ];


        // For existing events 
        angular.forEach(eventEntities, function(value, key) {

            console.log("Key is " + key + " Value is " + value);
            $scope.events.push({
                title : value.title,
                description : value.description,
                start : value.start,
                end : value.end,
                allDay : value.allDay
            })
        });


        /**
         * Drop functionality
         */         
        $scope.onDropComplete1 = function(data, evt) {
            console.log("One Drop complete "+data + " "+evt.start);

            var index = $scope.events.indexOf(data);

            if (index == -1)
                $scope.events.push(data);               

        }


        // Configure Calendar

        $scope.uiConfig = {
            // Configuring calendar, its look and feel
            calendar : {

                // height : 450,
                height : 200,
                editable : true,
                displayEventTime : true,
                droppable: true, 
                dropAccept:true,
                draggable: true,
                weekends:false,
                eventOrder:"",
                startEditable: true,
                overlap : true,              

                selectable:true,
                selectHelper:true,


                select: function(start, end){
                console.log("Select event"+start);  
                },

                header : {

                    left : "basicWeek",
                    center : "",                        
                    right : ""
                },

                eventClick : function(event) {
                    console.log("Event eventClick...");
                    $scope.SelectedEvent = event;
                },

                eventRender: function(event, element, view){                    

                    console.log("eventRendered. view.start...."+view.start);
                    console.log("eventRendered. view.end...."+view.end);
                },


                eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view){
                    console.log("Event Droppped..."+event.start);


                },

                eventDragStop: function(event){
                    console.log("eventDragStop() event ..."+event.start);
                },

                eventDragStart: function(event){
                console.log("eventDragStart() event ..."+event.start);
                }


            }

        }

        /**
         * EOF
         */
    } ]);

Fullcalendar无法在基本周视图的一天内拖放事件

0 个答案: