How to prevent make same period of time with moment

Question

The purpose of application is for making event on the day which works very well. At the same the user can make event there is event already exist on the same period of time.

Is there any quick option to prevent making event on the same time if it is exist ?

Demo: http://plnkr.co/edit/k450PRyeG8c2vIxnrCYV?p=preview

I think the Timepicker should set min and max with

  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)
  };

and which update each time.

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>

000 · Answer 1 · 2016-10-11T23:30:40.383

0

In the addEvent method, you can check for a conflicting item in the events array.

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 && vm.mytime.startsAt <= event.endsAt) ||
    event.startsAt <= vm.mytime.endsAt && vm.mytime.endsAt <= event.endsAt ||
    vm.mytime.startsAt <= event.startsAt && event.startsAt <= vm.mytime.endsAt ||
    vm.mytime.startsAt <= event.endsAt && event.endsAt <= vm.mytime.endsAt
  });
  if (conflicts) return;
  vm.events.push(vm.mytime);

edited Oct 11 '16 at 23:30

answered Oct 11 '16 at 17:36

000

26,951
10
71
101

This solution doesn't allow to add multiple events a day – Mo. Oct 11 '16 at 19:04
Need to add multiple event on the day but it shouldn't allow the same time – Mo. Oct 11 '16 at 20:17
I've updated my code since the variables are not `moment` instances. Sorry I had that incorrect before. – 000 Oct 11 '16 at 20:20
Now I can add multiple events :(. I think my question is not clear for you. The condition is that I need to add multiple events on the same day but it shouldn't allow events on the same time. for example event the usedr added on even which is `startsAt: 12:00` till `endsAt:14:00` after that the user might not be able to add new event in between **12:00 to 14:00** – Mo. Oct 11 '16 at 20:30
I see. The issue then was the `<` comparison needed to update to the `<=` comparison. I've edited my code again. – 000 Oct 11 '16 at 23:31

How to prevent make same period of time with moment

1 Answers1