<!DOCTYPE html>
<html ng-app="mwl.calendar.docs">
<head>
<script src="https://unpkg.com/moment@2.17.1"></script>
<script src="https://unpkg.com/angular@1.6.4/angular.js"></script>
<script src="https://unpkg.com/angular-animate@1.6.4/angular-animate.js"></script>
<script src="https://unpkg.com/angular-ui-bootstrap@2/dist/ui-bootstrap-tpls.js"></script>
<script src="https://unpkg.com/rrule@2"></script>
<script src="https://unpkg.com/angular-bootstrap-colorpicker@3"></script>
<script src="https://unpkg.com/angular-bootstrap-calendar"></script>
<link href="https://unpkg.com/bootstrap@3/dist/css/bootstrap.css" rel="stylesheet">
<link href="https://unpkg.com/angular-bootstrap-colorpicker@3/css/colorpicker.min.css" rel="stylesheet">
<link href="https://unpkg.com/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="example.js"></script>
<script src="helpers.js"></script>
<script src="drop.js"></script>
</head>
<body>
<div ng-controller="DraggableExternalEventsCtrl as vm">
<div class="row">
<div class="col-md-3">
<div class="well">
<ul>
<li
ng-repeat="event in vm.externalEvents track by $index"
mwl-draggable="true"
drop-data="{event: event}">
<a
href="javascript:;"
ng-class="'text-' + event.type">
{{ event.title }}
</a>
</li>
</ul>
</div>
<div class="row">
<div class="col-xs-6">
<ul ui-on-Drop="onDrop($event,$data,men)">
<li ui-draggable="true" drag="man"
on-drop-success="dropSuccessHandler($event,$index,men)"
ng-repeat="man in men track by $index">
{{man.title}}
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
<ng-include src="'calendarControls.html'"></ng-include>
<mwl-calendar
ui-on-Drop="onDrop($event,$data,women)"
ui-draggable="true" drag="woman"
on-drop-success="dropSuccessHandler($event,$index,women)"
events="vm.events"
view="vm.calendarView"
view-date="vm.viewDate"
cell-is-open="vm.cellIsOpen"
cell-auto-open-disabled="true"
on-event-times-changed=" $scope.onDrop(calendarEvent, calendarNewEventStart, calendarNewEventEnd)">
</mwl-calendar>
</div>
</div>
</div>
</body>
</html>
angular.module('mwl.calendar.docs', ['mwl.calendar', 'ngAnimate', 'ui.bootstrap', 'colorpicker.module','ngDragDrop']);
angular
.module('mwl.calendar.docs')
.controller('DraggableExternalEventsCtrl', function($scope,moment, calendarConfig) {
var vm = this;
$scope.men1 = [
'John',
'Jack',
'Mark',
'Ernie'
];
$scope.women1 = [
'Jane',
'Jill',
'Betty',
'Mary'
];
$scope.addText = "";
$scope.dropSuccessHandler = function($event,index,array){
array.splice(index,1);
};
$scope.onDrop = function($event,$data,array,start, end){
array.push($data);
var men = vm.men.indexOf(event);
if (men > -1) {
vm.men.splice(men, 1);
vm.women.push(event);
}
event.startsAt = start;
if (end) {
event.endsAt = end;
}
vm.viewDate = start;
vm.cellIsOpen = true;
};
$scope.women = [];
$scope.men = [
{
title: 'Event 1',
type: 'warning',
color: calendarConfig.colorTypes.warning,
startsAt: moment().startOf('month').toDate(),
draggable: true
},
{
title: 'Event 2',
type: 'danger',
color: calendarConfig.colorTypes.important,
startsAt: moment().startOf('month').toDate(),
draggable: true
}
];
vm.calendarView = 'day';
vm.viewDate = moment().startOf('month').toDate();
vm.cellIsOpen = false;
vm.eventDropped = function(event, start, end) {
var externalIndex = vm.externalEvents.indexOf(event);
if (externalIndex > -1) {
vm.externalEvents.splice(externalIndex, 1);
vm.events.push(event);
}
event.startsAt = start;
if (end) {
event.endsAt = end;
}
vm.viewDate = start;
vm.cellIsOpen = true;
};
});
angular
.module('mwl.calendar.docs')
.factory('alert', function($uibModal) {
function show(action, event) {
return $uibModal.open({
templateUrl: 'modalContent.html',
controller: function() {
var vm = this;
vm.action = action;
vm.event = event;
},
controllerAs: 'vm'
});
}
return {
show: show
};
});
<div class="modal-header">
<h3 class="modal-title">Event action occurred!</h3>
</div>
<div class="modal-body">
<p>Action:
<pre>{{ vm.action }}</pre>
</p>
<p>Event:
<pre>{{ vm.event | json }}</pre>
</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$close()">OK</button>
</div>
<br>
<div class="row">
<div class="col-md-6 text-center">
<div class="btn-group">
<button
class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
decrement="vm.calendarView">
Previous
</button>
<button
class="btn btn-default"
mwl-date-modifier
date="vm.viewDate"
set-to-today>
Today
</button>
<button
class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
increment="vm.calendarView">
Next
</button>
</div>
</div>
<br class="visible-xs visible-sm">
<div class="col-md-6 text-center">
<div class="btn-group">
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'">Year</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'">Month</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'">Week</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'">Day</label>
</div>
</div>
</div>
<br>
/**
* Created with IntelliJ IDEA.
* User: Ganaraj.Pr
* Date: 11/10/13
* Time: 11:27
* To change this template use File | Settings | File Templates.
*/
angular.module("ngDragDrop",[])
.directive("uiDraggable", [
'$parse',
'$rootScope',
function ($parse, $rootScope) {
return function (scope, element, attrs) {
if (window.jQuery && !window.jQuery.event.props.dataTransfer) {
window.jQuery.event.props.push('dataTransfer');
}
element.attr("draggable", false);
attrs.$observe("uiDraggable", function (newValue) {
element.attr("draggable", newValue);
});
var dragData = "";
scope.$watch(attrs.drag, function (newValue) {
dragData = newValue;
});
element.bind("dragstart", function (e) {
var sendData = angular.toJson(dragData);
var sendChannel = attrs.dragChannel || "defaultchannel";
e.dataTransfer.setData("Text", sendData);
$rootScope.$broadcast("ANGULAR_DRAG_START", sendChannel);
});
element.bind("dragend", function (e) {
var sendChannel = attrs.dragChannel || "defaultchannel";
$rootScope.$broadcast("ANGULAR_DRAG_END", sendChannel);
if (e.dataTransfer && e.dataTransfer.dropEffect !== "none") {
if (attrs.onDropSuccess) {
var fn = $parse(attrs.onDropSuccess);
scope.$apply(function () {
fn(scope, {$event: e});
});
}
}
});
};
}
])
.directive("uiOnDrop", [
'$parse',
'$rootScope',
function ($parse, $rootScope) {
return function (scope, element, attr) {
var dropChannel = "defaultchannel";
var dragChannel = "";
var dragEnterClass = attr.dragEnterClass || "on-drag-enter";
var dragHoverClass = attr.dragHoverClass || "on-drag-hover";
function onDragOver(e) {
if (e.preventDefault) {
e.preventDefault(); // Necessary. Allows us to drop.
}
if (e.stopPropagation) {
e.stopPropagation();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
function onDragEnter(e) {
$rootScope.$broadcast("ANGULAR_HOVER", dropChannel);
element.addClass(dragHoverClass);
}
function onDrop(e) {
if (e.preventDefault) {
e.preventDefault(); // Necessary. Allows us to drop.
}
if (e.stopPropagation) {
e.stopPropagation(); // Necessary. Allows us to drop.
}
var data = e.dataTransfer.getData("Text");
data = angular.fromJson(data);
var fn = $parse(attr.uiOnDrop);
scope.$apply(function () {
fn(scope, {$data: data, $event: e});
});
element.removeClass(dragEnterClass);
}
$rootScope.$on("ANGULAR_DRAG_START", function (event, channel) {
dragChannel = channel;
if (dropChannel === channel) {
element.bind("dragover", onDragOver);
element.bind("dragenter", onDragEnter);
element.bind("drop", onDrop);
element.addClass(dragEnterClass);
}
});
$rootScope.$on("ANGULAR_DRAG_END", function (e, channel) {
dragChannel = "";
if (dropChannel === channel) {
element.unbind("dragover", onDragOver);
element.unbind("dragenter", onDragEnter);
element.unbind("drop", onDrop);
element.removeClass(dragHoverClass);
element.removeClass(dragEnterClass);
}
});
$rootScope.$on("ANGULAR_HOVER", function (e, channel) {
if (dropChannel === channel) {
element.removeClass(dragHoverClass);
}
});
attr.$observe('dropChannel', function (value) {
if (value) {
dropChannel = value;
}
});
};
}
]);