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

feat(excluded-days): allow specifying a set of days to be excluded fr…

…om the month and week views

Closes #570
  • Loading branch information...
santam85 authored and mattlewis92 committed Sep 7, 2017
1 parent 1678ae7 commit f1f73ecbd6a72a1f40c8e1ed3fc10869ebccd4a8
@@ -37,6 +37,9 @@
}, {
"key": "day-view-start-end",
"label": "Day view start / end time"
}, {
"key": "exclude-weekdays",
"label": "Exclude days"
}, {
"key": "day-view-split",
"label": "Day view minute split"
@@ -0,0 +1,28 @@
angular
.module('mwl.calendar.docs')
.controller('ExcludeWeekdays', function(moment, calendarConfig) {

var vm = this;
vm.events = [
{
title: 'An event',
color: calendarConfig.colorTypes.warning,
startsAt: moment().startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
endsAt: moment().startOf('week').add(1, 'week').add(9, 'hours').toDate()
}, {
title: '<i class="glyphicon glyphicon-asterisk"></i> <span class="text-primary">Another event</span>, with a <i>html</i> title',
color: calendarConfig.colorTypes.info,
startsAt: moment().subtract(1, 'day').toDate(),
endsAt: moment().add(5, 'days').toDate()
}, {
title: 'This is a really long event title that occurs on every year',
color: calendarConfig.colorTypes.important,
startsAt: moment().startOf('day').add(7, 'hours').toDate(),
endsAt: moment().startOf('day').add(19, 'hours').toDate()
}
];
vm.calendarView = 'week';
vm.viewDate = new Date();
vm.excludedDays = [0, 6];

});
@@ -0,0 +1,57 @@
<div ng-controller="ExcludeWeekdays as vm">
<h2 class="text-center">{{ vm.calendarTitle }}</h2>

<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"
ng-click="vm.cellIsOpen = false"
excluded-days="vm.excludedDays">
Previous
</button>
<button
class="btn btn-default"
mwl-date-modifier
date="vm.viewDate"
set-to-today
ng-click="vm.cellIsOpen = false">
Today
</button>
<button
class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
increment="vm.calendarView"
ng-click="vm.cellIsOpen = false"
excluded-days="vm.excludedDays">
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="'month'" ng-click="vm.cellIsOpen = false">Month</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'" ng-click="vm.cellIsOpen = false">Week</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'" ng-click="vm.cellIsOpen = false">Day</label>
</div>
</div>
</div>

<br>

<mwl-calendar
events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
excluded-days="vm.excludedDays">
</mwl-calendar>
</div>
@@ -38,6 +38,7 @@ angular
}

vm.events = vm.events || [];
vm.excludedDays = vm.excludedDays || [];

var previousDate = moment(vm.viewDate);
var previousView = vm.view;
@@ -137,6 +138,7 @@ angular
viewDate: '=',
cellIsOpen: '=?',
cellAutoOpenDisabled: '=?',
excludedDays: '=?',
slideBoxDisabled: '=?',
customTemplateUrls: '=?',
draggableAutoScroll: '=?',
@@ -15,21 +15,21 @@ angular
vm.openRowIndex = null;
vm.openDayIndex = null;

if (vm.cellIsOpen && vm.view) {
if (vm.cellIsOpen && vm.view && vm.weekDays) {
vm.view.forEach(function(day, dayIndex) {
if (moment(vm.viewDate).startOf('day').isSame(day.date)) {
vm.openDayIndex = dayIndex;
vm.openRowIndex = Math.floor(dayIndex / 7);
vm.openRowIndex = Math.floor(dayIndex / vm.weekDays.length);
}
});
}
}

$scope.$on('calendar.refreshView', function() {

vm.weekDays = calendarHelper.getWeekDayNames();
vm.weekDays = calendarHelper.getWeekDayNames(vm.excludedDays);

var monthView = calendarHelper.getMonthView(vm.events, vm.viewDate, vm.cellModifier);
var monthView = calendarHelper.getMonthView(vm.events, vm.viewDate, vm.cellModifier, vm.excludedDays);
vm.view = monthView.days;
vm.monthOffsets = monthView.rowOffsets;

@@ -68,7 +68,7 @@ angular
vm.cellIsOpen = false;
} else {
vm.openDayIndex = dayIndex;
vm.openRowIndex = Math.floor(dayIndex / 7);
vm.openRowIndex = Math.floor(dayIndex / vm.weekDays.length);
vm.cellIsOpen = true;
}
}
@@ -170,6 +170,7 @@ angular
scope: {
events: '=',
viewDate: '=',
excludedDays: '=',
onEventClick: '=',
onEventTimesChanged: '=',
onDateRangeSelect: '=',
@@ -27,7 +27,7 @@ angular
vm.dayViewSplit
);
} else {
vm.view = calendarHelper.getWeekView(vm.events, vm.viewDate);
vm.view = calendarHelper.getWeekView(vm.events, vm.viewDate, vm.excludedDays);
}
});

@@ -89,6 +89,7 @@ angular
scope: {
events: '=',
viewDate: '=',
excludedDays: '=',
onEventClick: '=',
onEventTimesChanged: '=',
dayViewStart: '=',
@@ -12,9 +12,21 @@ angular
if (angular.isDefined($attrs.setToToday)) {
vm.date = new Date();
} else if (angular.isDefined($attrs.increment)) {
vm.date = moment(vm.date).add(1, vm.increment).toDate();
vm.date = moment(vm.date).add(1, vm.increment);
if (vm.excludedDays && vm.increment.indexOf('day') > -1) {
while (vm.excludedDays.indexOf(vm.date.day()) > -1) {
vm.date.add(1, vm.increment);
}
}
vm.date = vm.date.toDate();
} else if (angular.isDefined($attrs.decrement)) {
vm.date = moment(vm.date).subtract(1, vm.decrement).toDate();
vm.date = moment(vm.date).subtract(1, vm.decrement);
if (vm.excludedDays && vm.decrement.indexOf('day') > -1) {
while (vm.excludedDays.indexOf(vm.date.day()) > -1) {
vm.date.subtract(1, vm.decrement);
}
}
vm.date = vm.date.toDate();
}
$scope.$apply();
}
@@ -34,7 +46,8 @@ angular
scope: {
date: '=',
increment: '=',
decrement: '='
decrement: '=',
excludedDays: '=?'
},
bindToController: true
};
@@ -1,7 +1,8 @@
@import "variables.less";
@import "grid.less";
@import "theme.less";
@import "month.less";
@import "week.less";
@import "day.less";
@import "events.less";
@import "theme.less";

@@ -0,0 +1,35 @@
.gridForWeekOf(@days) {
@oneDay: 100% / @days;
@oneDayIE: 0.9993781095 * @oneDay;
//magic constant, have no idea from where it comes from

.generate-day();

.generate-day(@i:1) when (@i =< @days) {
.cal-row-fluid .cal-cell@{i} {
width: (@i * @oneDay);
*width: (@i * @oneDayIE);
}

.cal-row-fluid .cal-offset@{i},
.cal-row-fluid .cal-offset@{i}:first-child,
.cal-week-box .cal-offset@{i} {
margin-left: (@i * @oneDay);
*margin-left: (@i * @oneDayIE);
}
.generate-day(@i + 1);
}

}

.gridForWeeks(@i:1) when (@i =< 7) {
.cal-week-box,
.cal-month-box
{
&.cal-grid-@{i} {
.gridForWeekOf(@i);
}
}

.gridForWeeks(@i + 1);
}
@@ -1,3 +1,5 @@
@import "grid-mixin.less";

mwl-calendar {

[class*="cal-cell"] {
@@ -40,82 +42,8 @@ mwl-calendar {
.cal-row-fluid .controls-row [class*="cal-cell"] + [class*="cal-cell"] {
margin-left: 0%;
}
.cal-row-fluid .cal-cell7 {
width: 100%;
*width: 99.94669509594883%;
}
.cal-row-fluid .cal-cell6 {
width: 85.71428571428571%;
*width: 85.66098081023453%;
}
.cal-row-fluid .cal-cell5 {
width: 71.42857142857142%;
*width: 71.37526652452024%;
}
.cal-row-fluid .cal-cell4 {
width: 57.14285714285714%;
*width: 57.089552238805965%;
}
.cal-row-fluid .cal-cell3 {
width: 42.857142857142854%;
*width: 42.80383795309168%;
}
.cal-row-fluid .cal-cell2 {
width: 28.57142857142857%;
*width: 28.518123667377395%;
}
.cal-row-fluid .cal-cell1 {
width: 14.285714285714285%;
*width: 14.232409381663112%;
}
.cal-week-box .cal-offset7,
.cal-row-fluid .cal-offset7,
.cal-row-fluid .cal-offset7:first-child {
margin-left: 100%;
*margin-left: 99.89339019189765%;
}

.cal-week-box .cal-offset6,
.cal-row-fluid .cal-offset6,
.cal-row-fluid .cal-offset6:first-child {
margin-left: 85.71428571428571%;
*margin-left: 85.60767590618336%;
}
.cal-week-box .cal-offset5,
.cal-row-fluid .cal-offset5,
.cal-row-fluid .cal-offset5:first-child {
margin-left: 71.42857142857142%;
*margin-left: 71.32196162046907%;
}
.cal-week-box .cal-offset4,
.cal-row-fluid .cal-offset4,
.cal-row-fluid .cal-offset4:first-child {
margin-left: 57.14285714285714%;
*margin-left: 57.03624733475479%;
}
.cal-week-box .cal-offset3,
.cal-row-fluid .cal-offset3,
.cal-row-fluid .cal-offset3:first-child {
margin-left: 42.857142857142854%;
*margin-left: 42.750533049040506%;
}
.cal-week-box .cal-offset2,
.cal-row-fluid .cal-offset2,
.cal-row-fluid .cal-offset2:first-child {
margin-left: 28.57142857142857%;
*margin-left: 28.46481876332622%;
}
.cal-week-box .cal-offset1,
.cal-row-fluid .cal-offset1,
.cal-row-fluid .cal-offset1:first-child {
margin-left: 14.285714285714285%;
*margin-left: 14.17910447761194%;
}

.cal-row-fluid .cal-cell1 {
width: 14.285714285714285%;
*width: 14.233576642335766%;
}
.gridForWeeks();

[class*="cal-cell"].hide,
.cal-row-fluid [class*="cal-cell"].hide {
Oops, something went wrong.

0 comments on commit f1f73ec

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