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

feat(dayView): add dayViewSidePosition option

Closes #519
  • Loading branch information...
mattlewis92 committed Feb 5, 2017
2 parents 403e004 + 03e379f commit 5940de5b5c2d4852a2e2127783853d037979f21a
@@ -3,3 +3,4 @@ node_modules
.idea
build
coverage
*.log
@@ -70,6 +70,9 @@
}, {
"key": "day-view-all-times",
"label": "Show all times on day view"
}, {
"key": "side-time-position",
"label": "Show time on the side of calendar"
}, {
"key": "disable-tooltips",
"label": "Disable tooltips"
@@ -0,0 +1,30 @@
angular
.module('mwl.calendar.docs')
.controller('SideTimePositionCtrl', function ($scope, moment, calendarConfig) {

var vm = this;

var actions = [{
label: '<i class=\'fa fa-pencil\'></i>'
}, {
label: '<i class=\'fa fa-times\'></i>'
}];

vm.events = [{
title: 'An event',
startsAt: moment().hours(3).minutes(0).toDate(),
endsAt: moment().hours(7).minutes(0).toDate(),
actions: actions,
color: calendarConfig.colorTypes.warning
}, {
title: 'Another event',
startsAt: moment().hours(5).minutes(0).toDate(),
endsAt: moment().hours(12).minutes(0).toDate(),
actions: actions,
color: calendarConfig.colorTypes.important
}];

vm.calendarView = 'day';
vm.viewDate = new Date();

});
@@ -0,0 +1,32 @@
<div ng-controller="SideTimePositionCtrl as vm">

<div class="col-md-4">
<h3>Side</h3>
<mwl-calendar
events="vm.events"
view="vm.calendarView"
view-date="vm.viewDate"
day-view-time-position="side">
</mwl-calendar>
</div>

<div class="col-md-4">
<h3>Default</h3>
<mwl-calendar
events="vm.events"
view="vm.calendarView"
view-date="vm.viewDate">
</mwl-calendar>
</div>

<div class="col-md-4">
<h3>Hidden</h3>
<mwl-calendar
events="vm.events"
view="vm.calendarView"
view-date="vm.viewDate"
day-view-time-position="hidden">
</mwl-calendar>
</div>

</div>
@@ -150,7 +150,8 @@ angular
dayViewSplit: '@',
dayViewEventChunkSize: '@',
dayViewEventWidth: '@',
templateScope: '=?'
templateScope: '=?',
dayViewTimePosition: '@'
},
controller: 'MwlCalendarCtrl as vm',
bindToController: true
@@ -11,6 +11,10 @@ angular
vm.calendarEventTitle = calendarEventTitle;

function refreshView() {

vm.timeHidden = vm.dayViewTimePosition === 'hidden';
vm.dayViewTimePositionOffset = vm.dayViewTimePosition !== 'default' ? 0 : 60;

vm.dayViewSplit = vm.dayViewSplit || 30;
vm.dayViewHeight = calendarHelper.getDayViewHeight(
vm.dayViewStart,
@@ -105,7 +109,8 @@ angular
dayViewEventWidth: '=',
customTemplateUrls: '=?',
cellModifier: '=',
templateScope: '='
templateScope: '=',
dayViewTimePosition: '='
},
controller: 'MwlCalendarDayCtrl as vm',
bindToController: true
@@ -30,14 +30,17 @@
.day-highlight {
height: 30px;
}

background-color: @eventBorderColor;
&:nth-child(odd) {
background-color: @rowHover;
}
}
.cal-hours {
font-weight: bold;
font-size: 12px;
}
.cal-day-hour:nth-child(odd) {
background-color: @rowHover;
}

.cal-day-panel {
position: relative;
padding-left: 60px;
@@ -73,3 +76,22 @@
text-overflow: ellipsis;
}
}

mwl-calendar-day.time-hidden {
.cal-day-hour-part-time {
display: none;
}
}

mwl-calendar-day.time-on-side {
.cal-day-box {
overflow: visible !important;
margin-left: @sideMargin;
}
.cal-day-panel {
min-width: initial !important;
}
.cal-day-hour-part-time {
margin-left: -@sideMargin;
}
}
@@ -18,4 +18,5 @@
@eventBorderColor: #ffffff;
@eventBorderRadius:8px;
@eventMargin: 2px;
@eventSize: 12px;
@eventSize: 12px;
@sideMargin: 55px;
@@ -70,6 +70,11 @@
custom-template-urls="vm.customTemplateUrls"
cell-modifier="vm.cellModifier"
template-scope="vm.templateScope"
day-view-time-position="vm.dayViewTimePosition || 'default'"
ng-class="{
'time-on-side' : vm.dayViewTimePosition === 'side',
'time-hidden' : vm.dayViewTimePosition === 'hidden'
}"
ng-switch-when="day">
</mwl-calendar-day>
</div>
@@ -48,7 +48,7 @@
ng-class="dayEvent.event.cssClass"
ng-style="{
top: dayEvent.top - 1 + 'px',
left: dayEvent.left + 60 + 'px',
left: dayEvent.left + vm.dayViewTimePositionOffset + 'px',
height: dayEvent.height + 'px',
width: dayEvent.width + 'px',
backgroundColor: dayEvent.event.color.secondary,

0 comments on commit 5940de5

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