Неверная дата в событииMove angularJs - PullRequest
0 голосов
/ 03 октября 2019

я использую этот виджет календаря в своем приложении 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 +'"');
    });


});
...