#javascript #angularjs #angular-ui-bootstrap #momentjs #angular-ui-datepicker
#javascript #angularjs #angular-ui-bootstrap #momentjs #angular-ui-datepicker
Вопрос:
Цель приложения — создать событие в день, которое работает очень хорошо. В то же время пользователь может создать событие, в котором событие уже существует за тот же период времени.
Есть ли какой-либо быстрый способ предотвратить создание события в одно и то же время, если оно существует?
Демонстрация: http://plnkr.co/edit/k450PRyeG8c2vIxnrCYV?p=preview
Я думаю, что Timepicker должен быть установлен min и max с
vm.startOption = {
"mstep" : 5,
"startTime": moment().startOf('day'),
"endTime": moment().endOf('day')
};
vm.endOption = {
"mstep" : 5,
"startTime": moment().hours(2).minutes(8),
"endTime": moment().hours(23).minutes(10)
};
и который обновляется каждый раз.
angular.module('mwl.calendar.docs', ['mwl.calendar', 'ngAnimate', 'ui.bootstrap', 'colorpicker.module']);
angular
.module('mwl.calendar.docs')
.controller('KitchenSinkCtrl', function(moment) {
var vm = this;
vm.calendarView = 'month';
vm.viewDate = new Date();
vm.events = [];
vm.mytime = {
"title": moment().format('dddd'),
"startsAt": moment().startOf('day'),
"endsAt": moment().endOf('day')
}
vm.addEvent = function() {
vm.events.push(vm.mytime);
vm.mytime = {
"title": moment().format('dddd'),
"startsAt": moment().startOf('day'),
"endsAt": moment().endOf('day')
}
};
vm.clickOnEvent = function(calendarCell) {
vm.mytime = {
"title": calendarCell.date.format('dddd'),
"startsAt": moment().startOf('day'),
"endsAt": moment().endOf('day')
}
}
vm.startOption = {
"mstep": 5,
"startTime": moment().startOf('day'),
"endTime": moment().endOf('day')
};
vm.endOption = {
"mstep": 5,
"startTime": moment().hours(2).minutes(8),
"endTime": moment().hours(23).minutes(10)
};
vm.updateChangeStart = function() {
if (moment(vm.mytime.startsAt).isSameOrAfter(moment(vm.mytime.endsAt))) {
vm.mytime.endsAt = vm.mytime.startsAt;
} else {
console.log("thudangi kayinj avasanikunu");
}
};
vm.updateChangeEnd = function() {};
}); <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.4/interact.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js"></script>
<script src="//cdn.rawgit.com/jkbrzt/rrule/v2.1.0/lib/rrule.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-colorpicker/3.0.25/js/bootstrap-colorpicker-module.min.js"></script>
<script src="//mattlewis92.github.io/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>
<script src="example.js"></script>
<script src="helpers.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-colorpicker/3.0.25/css/colorpicker.min.css" rel="stylesheet">
<link href="//mattlewis92.github.io/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" rel="stylesheet">
<div class="container-fluid" ng-app="mwl.calendar.docs" ng-controller="KitchenSinkCtrl as availtrl">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<label>Start At:</label>
<div uib-timepicker minute-step="availtrl.startOption.mstep" ng-model="availtrl.mytime.startsAt" ng-change="availtrl.updateChangeStart()" show-meridian="false" min="availtrl.startOption.startTime" max="availtrl.startOption.endTime"></div>
</div>
<div class="col-sm-6">
<label>End At:</label>
<div uib-timepicker minute-step="availtrl.startOption.mstep" ng-model="availtrl.mytime.endsAt" ng-change="availtrl.updateChangeEnd()" show-meridian="false" min=""></div>
</div>
<div class="col-sm-12">
<button type="button" name="button" class="btn btn-primary btn-block" ng-click="availtrl.addEvent()">Add</button>
</div>
</div>
</div>
<div class="col-sm-6">
<pre class="alert alert-info"> Start: {{availtrl.mytime.startsAt | date:'M/d/yyyy HH:mm' }}</pre>
<pre class="alert alert-info"> End: {{availtrl.mytime.endsAt | date:'M/d/yyyy HH:mm'}} </pre>
<pre class="alert alert-info"> {{availtrl.mytime | json}} </pre>
</div>
</div>
<div class="row form-group ">
<div class="col-sm-6">
<div class="btn-group">
<button class="btn btn-primary" mwl-date-modifier date="availtrl.viewDate" decrement="availtrl.calendarView">
Previous
</button>
<button class="btn btn-default" mwl-date-modifier date="availtrl.viewDate" set-to-today>
Today
</button>
<button class="btn btn-primary" mwl-date-modifier date="availtrl.viewDate" increment="availtrl.calendarView">
Next
</button>
</div>
</div>
<div class="col-sm-6 text-right">
<div class="btn-group">
<label class="btn btn-primary" ng-model="availtrl.calendarView" uib-btn-radio="'month'">Month</label>
<label class="btn btn-primary" ng-model="availtrl.calendarView" uib-btn-radio="'week'">Week</label>
<label class="btn btn-primary" ng-model="availtrl.calendarView" uib-btn-radio="'day'">Day</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<mwl-calendar view="availtrl.calendarView" view-date="availtrl.viewDate" events="availtrl.events" view-title="calendarTitle" on-timespan-click="availtrl.clickOnEvent(calendarCell)">
</mwl-calendar>
</div>
</div>
</div> Ответ №1:
В addEvent методе вы можете проверить наличие конфликтующего элемента в events массиве.
vm.addEvent = function() {
// vm.mytime contains {startsAt: 123, endsAt: 234}
// vm.events contains [{startsAt: 100, endsAt: 200}, ...]
var conflicts = vm.events.some(function (event) {
return (event.startsAt <= vm.mytime.startsAt amp;amp; vm.mytime.startsAt <= event.endsAt) ||
event.startsAt <= vm.mytime.endsAt amp;amp; vm.mytime.endsAt <= event.endsAt ||
vm.mytime.startsAt <= event.startsAt amp;amp; event.startsAt <= vm.mytime.endsAt ||
vm.mytime.startsAt <= event.endsAt amp;amp; event.endsAt <= vm.mytime.endsAt
});
if (conflicts) return;
vm.events.push(vm.mytime);
Комментарии:
1. Это решение не позволяет добавлять несколько событий в день
2. Необходимо добавить несколько событий в день, но это не должно допускать одно и то же время
3. Я обновил свой код, поскольку переменные не
momentявляются экземплярами. Извините, у меня это было неправильно раньше.4. Теперь я могу добавить несколько событий:(. Я думаю, что мой вопрос вам непонятен. Условие состоит в том, что мне нужно добавить несколько событий в один и тот же день, но это не должно допускать событий в одно и то же время. например, событие, добавленное в usedr, даже
startsAt: 12:00доendsAt:14:00тех пор, пока пользователь не сможет добавить новое событие в период с 12:00 до 14:005. Я понимаю. Тогда проблема заключалась в
<сравнении, необходимом для обновления<=сравнения. Я снова отредактировал свой код.