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

feat(day-view): add the day-view-segment-size option

  • Loading branch information...
bwobbones authored and mattlewis92 committed Dec 30, 2017
1 parent 2df8e87 commit 588bcf6dcd56d039a9a0c2b940cc4d62cb692f2b
@@ -186,6 +186,10 @@ The number of chunks to split the day view hours up into. Can be either 10, 15 o

The number of pixels to "snap" event drag and resizes to. Default: 30

### day-view-segment-size

The size of each hour segment in the day view in pixels. A custom css class is also required to set the height with the same value. See the example for details. Default: 30

### day-view-event-width

The width of day view events. Default: 150
@@ -0,0 +1,15 @@
angular
.module('mwl.calendar.docs')
.controller('DayViewStartEndCtrl', function(moment) {

var vm = this;
vm.events = [];
vm.calendarView = 'day';
vm.viewDate = moment().startOf('month').toDate();

// note that this class is required to set the hour part height in the css
vm.cellModifier = function(cell) {
cell.cssClass = 'my-custom-class';
}

});
@@ -0,0 +1,19 @@
<style type="text/css">
.my-custom-class {
height: 17px !important;
}
</style>

<div ng-controller="DayViewStartEndCtrl as vm">
<mwl-calendar
events="vm.events"
view="vm.calendarView"
view-date="vm.viewDate"
day-view-start="09:00"
day-view-end="17:59"
cell-modifier="vm.cellModifier(calendarCell)"
day-view-segment-size="17">
</mwl-calendar>
</div>
@@ -79,4 +79,7 @@
}, {
"key": "disable-tooltips",
"label": "Disable tooltips"
}, {
"key": "day-view-segment-size",
"label": "Custom hour segment size in day view"
}]
@@ -149,6 +149,7 @@ angular
onViewChangeClick: '&',
cellModifier: '&',
dayViewStart: '@',
dayViewSegmentSize: '@',
dayViewEnd: '@',
dayViewSplit: '@',
dayViewEventChunkSize: '@',
@@ -19,7 +19,8 @@ angular
vm.dayViewHeight = calendarHelper.getDayViewHeight(
vm.dayViewStart,
vm.dayViewEnd,
vm.dayViewSplit
vm.dayViewSplit,
vm.dayViewSegmentSize
);

var view = calendarHelper.getDayView(
@@ -28,7 +29,8 @@ angular
vm.dayViewStart,
vm.dayViewEnd,
vm.dayViewSplit,
vm.dayViewEventWidth
vm.dayViewEventWidth,
vm.dayViewSegmentSize
);

vm.allDayEvents = view.allDayEvents;
@@ -106,6 +108,7 @@ angular
dayViewEnd: '=',
dayViewSplit: '=',
dayViewEventChunkSize: '=',
dayViewSegmentSize: '=',
dayViewEventWidth: '=',
customTemplateUrls: '=?',
cellModifier: '=',
@@ -238,7 +238,7 @@ angular

}

function getDayView(events, viewDate, dayViewStart, dayViewEnd, dayViewSplit, dayViewEventWidth) {
function getDayView(events, viewDate, dayViewStart, dayViewEnd, dayViewSplit, dayViewEventWidth, dayViewSegmentSize) {

var dayStart = (dayViewStart || '00:00').split(':');
var dayEnd = (dayViewEnd || '23:59').split(':');
@@ -262,7 +262,7 @@ angular
minute: dayEnd[1]
},
eventWidth: dayViewEventWidth ? +dayViewEventWidth : 150,
segmentHeight: 30
segmentHeight: dayViewSegmentSize || 30
});

// remove hack to work with new event API
@@ -316,10 +316,10 @@ angular
return weekView;
}

function getDayViewHeight(dayViewStart, dayViewEnd, dayViewSplit) {
function getDayViewHeight(dayViewStart, dayViewEnd, dayViewSplit, dayViewSegmentSize) {
var dayViewStartM = moment(dayViewStart || '00:00', 'HH:mm');
var dayViewEndM = moment(dayViewEnd || '23:59', 'HH:mm');
var hourHeight = (60 / dayViewSplit) * 30;
var hourHeight = (60 / dayViewSplit) * (dayViewSegmentSize || 30);
return ((dayViewEndM.diff(dayViewStartM, 'minutes') / 60) * hourHeight) + 3;
}

@@ -70,6 +70,7 @@
day-view-end="vm.dayViewEnd"
day-view-split="vm.dayViewSplit"
day-view-event-chunk-size="vm.dayViewEventChunkSize"
day-view-segment-size="vm.dayViewSegmentSize"
day-view-event-width="vm.dayViewEventWidth"
custom-template-urls="vm.customTemplateUrls"
cell-modifier="vm.cellModifier"
@@ -59,13 +59,13 @@
mwl-draggable="dayEvent.event.draggable === true"
axis="'xy'"
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)"
on-drag="vm.eventDragged(dayEvent.event, y / (vm.dayViewSegmentSize || 30))"
on-drag-end="vm.eventDragComplete(dayEvent.event, y / (vm.dayViewSegmentSize || 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)"
on-resize-end="vm.eventResizeComplete(dayEvent.event, edge, y / 30)"
on-resize="vm.eventResized(dayEvent.event, edge, y / (vm.dayViewSegmentSize || 30))"
on-resize-end="vm.eventResizeComplete(dayEvent.event, edge, y / (vm.dayViewSegmentSize || 30))"
uib-tooltip-html="vm.calendarEventTitle.dayViewTooltip(dayEvent.event) | calendarTrustAsHtml"
tooltip-append-to-body="true">

@@ -611,6 +611,11 @@ describe('calendarHelper', function() {
expect(dayViewHeight).to.equal(3870);
});

it('should calculate the height when the hour parts have a custom value', function() {
var dayViewHeight = calendarHelper.getDayViewHeight('01:00', '22:29', 10, 17);
expect(dayViewHeight).to.equal(2194.3);
});

});

describe('getWeekViewWithTimes', function() {

0 comments on commit 588bcf6

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