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

feat(cellIsOpen): Add a 2 way bound attribute to control if the year …

…and month view slide box is ope

Closes #199

BREAKING CHANGE: auto-open has been renamed to cell-is-open. It is now 2 way bound if the slidebox is open or not so
you can programmatically control the visibility of the slidebox.
  • Loading branch information...
Matt Lewis
Matt Lewis committed Nov 7, 2015
1 parent ba19b86 commit a0a5117aa83ff3f9f64e42c07d4b22803f5f8204
@@ -91,7 +91,7 @@ There is a single directive exposed to create the calendar, use it like so:
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="eventEdited(calendarEvent)"
on-delete-event-click="eventDeleted(calendarEvent)"
auto-open="true">
cell-is-open="true">
</mwl-calendar>
```

@@ -165,9 +165,9 @@ This expression is called when an event delete link is clicked on the calendar.

This expression is called when a month, day or hour on the calendar is clicked on the year, month and day views respectively. `calendarDate` can be used in the expression and contains the start of the month, day or hour that was clicked on.

### auto-open
### cell-is-open

Whether to auto open the year and month view breakdown to the current year / month. Default: false
A 2 way bound variable that when set to true will open the year or month view cell that corresponds to the date passed to the date object passed to `current-day`.

### day-view-start

@@ -186,15 +186,19 @@ The number of chunks to split the day view hours up into. Can be either 10, 15 o
An optional expression that is evaluated when the drilldown (clicking on a date to change the view) is triggered. Return false from the expression function to disable the drilldown. `calendarDate` can be used in the expression and contains the date that was selected. `calendarNextView` is the view that the calendar will be changed to.

### cell-modifier

An optional expression that is evaluated on each cell generated for the year and month views. `calendarCell` can be used in the expression and is an object containing the current cell data which you can modify (see the `calendarHelper` service source code or just console.log it to see what data is available). If you add the `cssClass` property it will be applied to the cell.

### month-cell-template-url

An interpolated string template url that can be used to override the default month cell template.

### month-cell-events-template-url

An interpolated string template url that can be used to override the default month cell events.

## Custom directive templates

All templates apart from the month cell templates are linked to directives so you can change any template and use your own using a decorator like so:
```
//This will change the slide box directive template to one of your choosing
@@ -35,6 +35,8 @@ angular
}
];

vm.isCellOpen = true;

/*
var currentYear = moment().year();
var currentMonth = moment().month();
@@ -93,7 +93,7 @@ <h2 class="text-center">{{ vm.calendarTitle }}</h2>
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="vm.eventEdited(calendarEvent)"
on-delete-event-click="vm.eventDeleted(calendarEvent)"
auto-open="true"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:00"
day-view-split="30"
@@ -93,6 +93,7 @@ angular
$scope.$watchGroup([
'vm.currentDay',
'vm.view',
'vm.cellIsOpen',
function() {
return moment.locale() + $locale.id; //Auto update the calendar when the locale changes
}
@@ -119,7 +120,7 @@ angular
currentDay: '=',
editEventHtml: '=',
deleteEventHtml: '=',
autoOpen: '=',
cellIsOpen: '=',
onEventClick: '&',
onEventTimesChanged: '&',
onEditEventClick: '&',
@@ -21,9 +21,10 @@ angular
}

//Auto open the calendar to the current day if set
if (vm.autoOpen) {
vm.openDayIndex = null;
if (vm.cellIsOpen) {
vm.view.forEach(function(day) {
if (day.inMonth && moment(vm.currentDay).startOf('day').isSame(day.date) && !vm.openDayIndex) {
if (day.inMonth && moment(vm.currentDay).startOf('day').isSame(day.date)) {
vm.dayClicked(day, true);
}
});
@@ -47,9 +48,11 @@ angular
var dayIndex = vm.view.indexOf(day);
if (dayIndex === vm.openDayIndex) { //the day has been clicked and is already open
vm.openDayIndex = null; //close the open day
vm.cellIsOpen = false;
} else {
vm.openDayIndex = dayIndex;
vm.openRowIndex = Math.floor(dayIndex / 7);
vm.cellIsOpen = true;
}

};
@@ -100,7 +103,7 @@ angular
onEventTimesChanged: '=',
editEventHtml: '=',
deleteEventHtml: '=',
autoOpen: '=',
cellIsOpen: '=',
onTimespanClick: '=',
cellModifier: '=',
cellTemplateUrl: '@',
@@ -12,9 +12,10 @@ angular
vm.view = calendarHelper.getYearView(vm.events, vm.currentDay, vm.cellModifier);

//Auto open the calendar to the current day if set
if (vm.autoOpen) {
vm.openMonthIndex = null;
if (vm.cellIsOpen) {
vm.view.forEach(function(month) {
if (moment(vm.currentDay).startOf('month').isSame(month.date) && !vm.openMonthIndex) {
if (moment(vm.currentDay).startOf('month').isSame(month.date)) {
vm.monthClicked(month, true);
}
});
@@ -38,9 +39,11 @@ angular
var monthIndex = vm.view.indexOf(month);
if (monthIndex === vm.openMonthIndex) { //the month has been clicked and is already open
vm.openMonthIndex = null; //close the open month
vm.cellIsOpen = false;
} else {
vm.openMonthIndex = monthIndex;
vm.openRowIndex = Math.floor(monthIndex / 4);
vm.cellIsOpen = true;
}

};
@@ -73,7 +76,7 @@ angular
onDeleteEventClick: '=',
editEventHtml: '=',
deleteEventHtml: '=',
autoOpen: '=',
cellIsOpen: '=',
onTimespanClick: '=',
cellModifier: '='
},
@@ -14,7 +14,7 @@
on-timespan-click="vm.onTimespanClick"
edit-event-html="vm.editEventHtml"
delete-event-html="vm.deleteEventHtml"
auto-open="vm.autoOpen"
cell-is-open="vm.cellIsOpen"
cell-modifier="vm.cellModifier"
ng-switch-when="year"
></mwl-calendar-year>
@@ -29,7 +29,7 @@
on-timespan-click="vm.onTimespanClick"
edit-event-html="vm.editEventHtml"
delete-event-html="vm.deleteEventHtml"
auto-open="vm.autoOpen"
cell-is-open="vm.cellIsOpen"
cell-modifier="vm.cellModifier"
cell-template-url="{{ vm.monthCellTemplateUrl }}"
cell-events-template-url="{{ vm.monthCellEventsTemplateUrl }}"
@@ -23,7 +23,7 @@ describe('mwlCalendar directive', function() {
'calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd" ' +
'on-edit-event-click="vm.eventEdited(calendarEvent)" ' +
'on-delete-event-click="vm.eventDeleted(calendarEvent)" ' +
'auto-open="true" ' +
'cell-is-open="true" ' +
'day-view-start="06:00" ' +
'day-view-end="22:00" ' +
'day-view-split="30" ' +
@@ -20,7 +20,7 @@ describe('mwlCalendarMonth directive', function() {
'on-event-times-changed="onEventTimesChanged" ' +
'day-view-start="dayViewStart" ' +
'day-view-end="dayViewEnd" ' +
'auto-open="autoOpen"' +
'cell-is-open="cellIsOpen"' +
'on-timespan-click="onTimeSpanClick"' +
'day-view-split="dayViewSplit || 30" ' +
'cell-template-url="{{ monthCellTemplateUrl }}" ' +
@@ -31,7 +31,7 @@ describe('mwlCalendarMonth directive', function() {
function prepareScope(vm) {
//These variables MUST be set as a minimum for the calendar to work
vm.currentDay = calendarDay;
vm.autoOpen = true;
vm.cellIsOpen = true;
vm.dayViewStart = '06:00';
vm.dayViewEnd = '22:00';
vm.dayViewsplit = 30;
@@ -19,7 +19,7 @@ describe('mwlCalendarYear directive', function() {
'on-event-times-changed="onEventTimesChanged" ' +
'day-view-start="dayViewStart" ' +
'day-view-end="dayViewEnd" ' +
'auto-open="autoOpen"' +
'cell-is-open="cellIsOpen"' +
'on-timespan-click="onTimeSpanClick"' +
'day-view-split="dayViewSplit || 30" ' +
'></mwl-calendar-year>';
@@ -28,7 +28,7 @@ describe('mwlCalendarYear directive', function() {
function prepareScope(vm) {
//These variables MUST be set as a minimum for the calendar to work
vm.currentDay = calendarDay;
vm.autoOpen = true;
vm.cellIsOpen = true;
vm.dayViewStart = '06:00';
vm.dayViewEnd = '22:00';
vm.dayViewsplit = 30;

0 comments on commit a0a5117

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