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

feat(allDayEvents): allow events to be displayed as all day on the da…

…y view

Closes #312
  • Loading branch information...
Matt Lewis
Matt Lewis committed May 13, 2016
1 parent c0a02d9 commit 9be64262fc806eaee45a6c2198d234c9d277a78e
@@ -125,7 +125,8 @@ $scope.events = [
resizable: true, //Allow an event to be resizable
incrementsBadgeTotal: true, //If set to false then will not count towards the badge total amount on the month and year view
recursOn: 'year', // If set the event will recur on the given period. Valid values are year or month
cssClass: 'a-css-class-name' //A CSS class (or more, just separate with spaces) that will be added to the event when it is displayed on each view. Useful for marking an event as selected / active etc
cssClass: 'a-css-class-name', //A CSS class (or more, just separate with spaces) that will be added to the event when it is displayed on each view. Useful for marking an event as selected / active etc
allDay: false // set to true to display the event as an all day event on the day view
}
];
```
@@ -0,0 +1,28 @@
angular
.module('mwl.calendar.docs')
.controller('AllDayEventsCtrl', function(moment) {

var vm = this;

vm.events = [
{
title: 'An all day event',
type: 'warning',
startsAt: moment().startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
endsAt: moment().startOf('week').add(1, 'week').add(9, 'hours').toDate(),
allDay: true
}, {
title: 'A non all day egent',
type: 'important',
startsAt: moment().startOf('day').add(7, 'hours').toDate(),
endsAt: moment().startOf('day').add(19, 'hours').toDate(),
draggable: true,
resizable: true
}
];

vm.calendarView = 'day';
vm.viewDate = moment().toDate();
vm.isCellOpen = true;

});
@@ -0,0 +1,8 @@
<div ng-controller="AllDayEventsCtrl as vm">
<mwl-calendar
events="vm.events"
view="vm.calendarView"
view-date="vm.viewDate"
cell-is-open="vm.isCellOpen">
</mwl-calendar>
</div>
@@ -64,4 +64,7 @@
}, {
"key": "grouping-events",
"label": "Group month view events"
}, {
"key": "all-day-events",
"label": "All day events"
}]
@@ -18,14 +18,22 @@ angular
vm.dayViewSplit
);

vm.view = calendarHelper.getDayView(
var events = calendarHelper.getDayView(
vm.events,
vm.viewDate,
vm.dayViewStart,
vm.dayViewEnd,
vm.dayViewSplit
);

vm.allDayEvents = events.filter(function(event) {
return event.allDay;
});

vm.nonAllDayEvents = events.filter(function(event) {
return !event.allDay;
});

});

vm.eventDragComplete = function(event, minuteChunksMoved) {
@@ -285,7 +285,9 @@ angular
buckets.forEach(function(bucket, bucketIndex) {
var canFitInThisBucket = true;

bucket.forEach(function(bucketItem) {
bucket.filter(function(bucketItem) {
return !bucketItem.allDay;
}).forEach(function(bucketItem) {
if (eventIsInPeriod(event, bucketItem.startsAt, bucketItem.endsAt || bucketItem.startsAt) ||
eventIsInPeriod(bucketItem, event.startsAt, event.endsAt || event.startsAt)) {
canFitInThisBucket = false;
@@ -1,3 +1,30 @@
<div class="cal-week-box cal-all-day-events-box" ng-if="vm.allDayEvents.length > 0">
<div class="cal-day-panel clearfix">
<div class="row">
<div class="col-xs-12">
<div class="cal-row-fluid">
<div
class="cal-cell-6 day-highlight dh-event-{{ event.type }}"
data-event-class
ng-repeat="event in vm.allDayEvents track by event.$id">
<strong>
<span ng-bind="event.startsAt | calendarDate:'datetime':true"></span>
<span ng-if="event.endsAt">
- <span ng-bind="event.endsAt | calendarDate:'datetime':true"></span>
</span>
</strong>
<a
href="javascript:;"
class="event-item"
ng-bind-html="vm.$sce.trustAsHtml(event.title)">
</a>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="cal-day-box">
<div class="cal-day-panel clearfix" ng-style="{height: vm.dayViewHeight + 'px'}">

@@ -13,7 +40,7 @@

<div
class="pull-left day-event day-highlight"
ng-repeat="event in vm.view track by event.$id"
ng-repeat="event in vm.nonAllDayEvents track by event.$id"
ng-class="'dh-event-' + event.type + ' ' + event.cssClass"
ng-style="{top: event.top + 'px', left: event.left + 60 + 'px', height: event.height + 'px'}"
mwl-draggable="event.draggable === true"
@@ -82,12 +82,15 @@ describe('mwlCalendarDay directive', function() {

it('should get the new day view when calendar refreshes', function() {
sinon.stub(calendarHelper, 'getDayViewHeight').returns(1000);
sinon.stub(calendarHelper, 'getDayView').returns({event: 'event1'});
var event1 = {event: 'event1'};
var event2 = {event: 'event2', allDay: true};
sinon.stub(calendarHelper, 'getDayView').returns([event1, event2]);
scope.$broadcast('calendar.refreshView');
expect(calendarHelper.getDayViewHeight).to.have.been.calledWith('06:00', '22:00', 30);
expect(MwlCalendarCtrl.dayViewHeight).to.equal(1000);
expect(calendarHelper.getDayView).to.have.been.calledWith(scope.events, scope.viewDate, '06:00', '22:00', 30);
expect(MwlCalendarCtrl.view).to.eql({event: 'event1'});
expect(MwlCalendarCtrl.nonAllDayEvents).to.eql([event1]);
expect(MwlCalendarCtrl.allDayEvents).to.eql([event2]);
});

it('should call the callback function when you finish dragging and event', function() {

0 comments on commit 9be6426

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