Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

feat(draggableAutoScroll): allow the auto scroll value thats passed t…

…o interact to be customised

Closes #578
  • Loading branch information...
Matt Lewis
Matt Lewis committed Apr 17, 2017
1 parent a28358e commit dec7f772680711fa7f291cae4861e340ae72853a
@@ -218,6 +218,9 @@ $templateCache.put('my-custom-template.html', 'Custom month view template here')
### template-scope
An object containing a set of variables that will be available in a custom template as `vm.templateScope`

### draggable-auto-scroll
Passed to the [autoScroll](http://interactjs.io/docs/#autoscroll) option of interactjs. Unlike interact this defaults to `true` if not set.

## Configuring the calendar default config

You can easily customise the date formats and i18n strings used throughout the calendar by using the `calendarConfig` value. Please note that these example formats are those used by moment.js and these won't work if using angular as the date formatter. Example usage:
@@ -139,6 +139,7 @@ angular
cellAutoOpenDisabled: '=?',
slideBoxDisabled: '=?',
customTemplateUrls: '=?',
draggableAutoScroll: '=?',
onEventClick: '&',
onEventTimesChanged: '&',
onTimespanClick: '&',
@@ -110,7 +110,8 @@ angular
customTemplateUrls: '=?',
cellModifier: '=',
templateScope: '=',
dayViewTimePosition: '='
dayViewTimePosition: '=',
draggableAutoScroll: '='
},
controller: 'MwlCalendarDayCtrl as vm',
bindToController: true
@@ -178,6 +178,7 @@ angular
slideBoxDisabled: '=',
customTemplateUrls: '=?',
templateScope: '=',
draggableAutoScroll: '='
},
controller: 'MwlCalendarMonthCtrl as vm',
link: function(scope, element, attrs, calendarCtrl) {
@@ -37,7 +37,8 @@ angular
onEventClick: '=',
cell: '=',
customTemplateUrls: '=?',
templateScope: '='
templateScope: '=',
draggableAutoScroll: '='
},
bindToController: true
};
@@ -99,7 +99,8 @@ angular
onDateRangeSelect: '=',
customTemplateUrls: '=?',
cellModifier: '=',
templateScope: '='
templateScope: '=',
draggableAutoScroll: '='
},
controller: 'MwlCalendarWeekCtrl as vm',
link: function(scope, element, attrs, calendarCtrl) {
@@ -27,8 +27,13 @@ angular
.css('transform', transformValue);
}

var autoScroll = $parse($attrs.autoScroll)($scope);
if (typeof autoScroll === 'undefined') {
autoScroll = true;
}

interact($element[0]).draggable({
autoScroll: true,
autoScroll: autoScroll,
snap: snap,
onstart: function(event) {
angular.element(event.target).addClass('dragging-active');
@@ -35,6 +35,7 @@
custom-template-urls="vm.customTemplateUrls"
template-scope="vm.templateScope"
cell-auto-open-disabled="vm.cellAutoOpenDisabled"
draggable-auto-scroll="vm.draggableAutoScroll"
ng-switch-when="month">
</mwl-calendar-month>

@@ -52,6 +53,7 @@
custom-template-urls="vm.customTemplateUrls"
cell-modifier="vm.cellModifier"
template-scope="vm.templateScope"
draggable-auto-scroll="vm.draggableAutoScroll"
ng-switch-when="week">
</mwl-calendar-week>

@@ -71,6 +73,7 @@
cell-modifier="vm.cellModifier"
template-scope="vm.templateScope"
day-view-time-position="vm.dayViewTimePosition || 'default'"
draggable-auto-scroll="vm.draggableAutoScroll"
ng-class="{
'time-on-side' : vm.dayViewTimePosition === 'side',
'time-hidden' : vm.dayViewTimePosition === 'hidden'
@@ -60,6 +60,7 @@
snap-grid="{y: vm.dayViewEventChunkSize || 30, x: 50}"
on-drag="vm.eventDragged(dayEvent.event, y / 30)"
on-drag-end="vm.eventDragComplete(dayEvent.event, y / 30)"
auto-scroll="vm.draggableAutoScroll"
mwl-resizable="dayEvent.event.resizable === true && dayEvent.event.endsAt"
resize-edges="{top: true, bottom: true}"
on-resize="vm.eventResized(dayEvent.event, edge, y / 30)"
@@ -11,6 +11,7 @@
tooltip-append-to-body="true"
uib-tooltip-html="vm.calendarEventTitle.monthViewTooltip(event) | calendarTrustAsHtml"
mwl-draggable="event.draggable === true"
drop-data="{event: event, draggedFromDate: day.date.toDate()}">
drop-data="{event: event, draggedFromDate: day.date.toDate()}"
auto-scroll="vm.draggableAutoScroll">
</a>
</div>
@@ -27,7 +27,8 @@
on-event-click="vm.onEventClick"
cell="vm.view[vm.openDayIndex]"
custom-template-urls="vm.customTemplateUrls"
template-scope="vm.templateScope">
template-scope="vm.templateScope"
draggable-auto-scroll="vm.draggableAutoScroll">
</mwl-calendar-slide-box>

</div>
@@ -6,7 +6,8 @@
ng-repeat="event in vm.events | orderBy:'startsAt' track by event.calendarEventId"
ng-class="event.cssClass"
mwl-draggable="event.draggable === true"
drop-data="{event: event}">
drop-data="{event: event}"
auto-scroll="vm.draggableAutoScroll">
<span class="pull-left event" ng-style="{backgroundColor: event.color.primary}"></span>
&nbsp;
<a
@@ -65,6 +65,7 @@
mwl-draggable="eventRow.event.draggable === true"
axis="vm.showTimes ? 'xy' : 'x'"
snap-grid="vm.showTimes ? {x: vm.dayColumnDimensions.width, y: vm.dayViewEventChunkSize || 30} : {x: vm.dayColumnDimensions.width}"
auto-scroll="vm.draggableAutoScroll"
on-drag="vm.tempTimeChanged(eventRow.event, y / 30)"
on-drag-end="vm.weekDragged(eventRow.event, x / vm.dayColumnDimensions.width, y / 30)"
mwl-resizable="eventRow.event.resizable === true && eventRow.event.endsAt && !vm.showTimes"

0 comments on commit dec7f77

Please sign in to comment.
You can’t perform that action at this time.