我在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无法实现上述目标。
以下是我用于与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
*/
} ]);