я использую этот виджет календаря в своем приложении http://www.code.polosson.com/Plantt/#doc
https://github.com/polosson/Plantt
Я установил все, как указано в документации, но при переносе события с одного часас другой стороны, у меня недопустимая дата начала движения.
Я ставлю тот же код на примерную и послушную работу, это мой код ..
<!DOCTYPE html>
<base href="/"></base>
<div ng-controller="calendarioController as vm">
<div class="container">
<div class="row">
<div class="col-lg-12">
<br><br>
<scheduler></scheduler>
</div>
</div>
</div>
</div>
plantt template.html
<header>
<div class="clearfix hidden-sm hidden-md hidden-lg"></div>
<div class="centerActions">
<div class="Hsep">
<div class="btn btn-default btn-sm" ng-click="prevDay()">Anterior</div>
</div>
<div class="Hsep">
<div class="btn btn-default btn-sm" ng-click="nextDay()">Próximo</div>
</div>
</div>
<div class="clearfix"></div>
</header>
<table>
<thead>
<tr class="monthLine">
<th ng-repeat="month in enumMonths" colspan="{{month.numDays}}" class="month">{{month.name}}</th>
</tr>
<tr class="dayLine">
<th ng-repeat="day in enumDays" title="{{day.title}}" ng-class="{'today': day.today, 'sunday': day.date.getDay() === 0, 'lastDmonth': day.isLastOfMonth}">
<span ng-show="cellWidth > 18">{{day.num}}</span>
<table ng-show="useHours && cellWidth >= minCellWidthForHours">
<thead>
<tr class="hourLine">
<th ng-repeat="hour in day.enumHours" title="{{day.title}}, {{hour.title}}:00"
ng-class="{'today': day.today}">
<span>{{hour.title}}</span>
</th>
</tr>
</thead>
</table>
</th>
</tr>
</thead>
</table>
<div class="timelineContainer">
<table>
<tbody>
<tr>
<td ng-repeat="day in enumDays" title="{{day.title}}" height="{{gridHeight}}"
ng-class="{'today': day.today, 'sunday': day.date.getDay() === 0, 'lastDmonth': day.isLastOfMonth}">
<table class="hourGrid" ng-show="useHours && cellWidth >= minCellWidthForHours">
<thead>
<tr class="hourLine">
<th ng-repeat="hour in day.enumHours" title="{{day.title}}, {{hour.title}}:00">
<span>{{hour.title}}</span>
</th>
</tr>
</thead>
</table>
<span ng-hide="cellWidth < minCellWidthForHours">{{day.date | date:'shortDate'}}</span>
<span ng-show="day.nbEvents > 0 && cellWidth < 100">{{day.nbEvents}}</span>
<span ng-show="day.nbEvents > 0 && cellWidth >= 100">({{day.nbEvents}} items)</span>
</td>
</tr>
</tbody>
</table>
<div class="eventsContainer" events-canvas>
<event ng-repeat="ev in renderedEvents" event-id="{{ev.id}}" title="#{{ev.id}} - {{ev.title}} Type: {{ev.type}}
[ {{ev.startDate | date:'dd/MM/yyyy'}} >> {{ev.endDate | date:'dd/MM/yyyy'}} ]"
ng-style="ev.locScale"
ng-class="[ev.extraClasses]">
<handle ng-show="!ev.lock" class="leftHandle" event-id="{{ev.id}}" handle-side="left"></handle>
<handle ng-show="!ev.lock" class="rightHandle" event-id="{{ev.id}}" handle-side="right"></handle>
<label>{{ev.title}}</label>
</event>
<eventhelper>New event</eventhelper>
</div>
</div>
controller.js
app.controller("calendarioController", function ($scope, $document, $rootScope, $http, $filter, $timeout) {
var vm = this;
$scope.eventHeight = 50; // Height of events elements in pixels
$scope.eventMargin = 10; // Margin above events elements for spacing
$scope.nbLines = 6; // Maximum number of lines we can draw in timeline
//$scope.autoLock = true; // To enable the automatic lock of past events
$scope.lockMarginDays = 15; // Number of days before today for the automatic lock to take effect
$scope.formatDayLong = 'EEEE dd MMMM'; // The JS date format for the long display of dates
$scope.formatDayShort = 'dd/MM/yyyy'; // The JS date format for the short display of dates
$scope.formatMonth = 'MMMM yyyy'; // The JS date format for the month display in header
$scope.lockMarginDays = 1; // Number of days between today and the start date of events for the automatic lock to take effect
$scope.viewStart = addDaysToDate(new Date(), 0); // First day to display in view.
$scope.viewEnd = addDaysToDate(new Date(), 0); // Last day to display in view.
// Crucial settings for the use of hours in timeline
$scope.useHours = true; // To specify the use of hours (to display hourly grid and don't force events hours to 12:00)
$scope.dayStartHour = 0; // The hour number at which the day begins (default 08:00)
$scope.dayEndHour = 24; // The hour number at which the day ends (default 20:00)
// Create the events list
$scope.events = [
{ id: 0, title: 'Laura que descobriu !', type: 'urgent',
startDate: new Date(2019, 10-1, 3, 17, 0),
endDate: new Date(2019, 10-1, 3, 20, 0) },
{ id: 1, title: 'Today morning', type: 'normal',
startDate: new Date(2019, 10-1, 4, 8, 0),
endDate: new Date(2019, 10-1, 4, 12, 0) },
];
// Listen to the "planttError" DOM event, to do something when an error occurs
$scope.$on('planttError', function(e, err){
console.log('Plantt '+err.levelName+' ('+err.level+'):', err.message);
});
// Listen to the "daySelect" DOM event, to add a new event
$scope.$on('daySelect', function(e, date){
var name = prompt('New event title:');
if (!name) return;
if (name === "") return;
var end = new Date(date.getTime() + 1000*60*60);
var id = $scope.events.length + 1;
var newEvent = {
id: id,
title: name,
type: 'normal',
startDate: date,
endDate: end
};
$scope.events.push(newEvent);
$timeout(function(){
$scope.renderView();
}, 0);
});
// Listen to the "periodSelect" DOM event, to add a new event
$scope.$on('periodSelect', function(e, dates){
var name = prompt('New event title:');
if (!name) return;
if (name === "") return;
var id = $scope.events.length + 1;
var newEvent = {
id: id,
title: name,
type: 'normal',
startDate: dates.start,
endDate: dates.end
};
$scope.events.push(newEvent);
$timeout(function(){
$scope.renderView();
}, 0);
});
// Listen to the "eventMove" DOM event, to store the new position of the event in time
$scope.$on('eventMove', function(e, event, newStartDate, newEndDate, newStartHour, newEndHour){
newStartDate.setHours(newStartHour);
newEndDate.setHours(newEndHour);
event.startDate = newStartDate;
event.endDate = newEndDate;
$timeout(function(){
$scope.renderView();
}, 0);
});
// Listen to the "eventScale" DOM event, to store the new positions of the event limits in time
$scope.$on('eventScale', function(e, event, side, newDate, newHour){
newDate.setHours(newHour);
if (side === 'left')
event.startDate = newDate;
else if (side === 'right')
event.endDate = newDate;
$timeout(function(){
$scope.renderView();
}, 0);
});
// Listen to the "eventOpen" DOM event
$scope.$on('eventOpen', function(e, event){
console.log(event);
alert('Opening event "' + event.title +'"');
});
});