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

feat(current-day): rename current-day to view-date. Closes #244

BREAKING CHANGE:
the `current-day` attribute has been renamed to `view-date`
  • Loading branch information...
Matt Lewis
Matt Lewis committed Dec 30, 2015
1 parent 2514975 commit c44a50e3cd599d03d3b17ebda580c2be7bc5bee5
@@ -82,7 +82,7 @@ There is a single directive exposed to create the calendar, use it like so:
```javascript
<mwl-calendar
view="calendarView"
current-day="calendarDay"
view-date="calendarDate"
events="events"
view-title="calendarTitle"
on-event-click="eventClicked(calendarEvent)"
@@ -106,9 +106,9 @@ For the calendar to display this variable needs to be set like so:
$scope.calendarView = 'month';
```

### current-day (required attribute)
### view-date (required attribute)

This variable holds the current day the calendar is centralised on. Each view will decide on its current year / month / week / day depending on the value of this variable.
This variable holds the current date the calendar is centralised on. Each view will decide on its current year / month / week / day depending on the value of this variable.

### events (required attribute)

@@ -167,7 +167,7 @@ This expression is called when a month, day or hour on the calendar is clicked o

### cell-is-open

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`.
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 `view-date`.

### day-view-start

@@ -86,7 +86,7 @@ <h2 class="text-center">{{ vm.calendarTitle }}</h2>
events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
current-day="vm.calendarDay"
view-date="vm.calendarDay"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
@@ -12,7 +12,7 @@ angular

vm.changeView = function(view, newDay) {
vm.view = view;
vm.currentDay = newDay;
vm.viewDate = newDay;
};

vm.dateClicked = function(date) {
@@ -31,7 +31,7 @@ angular

};

var previousDate = moment(vm.currentDay);
var previousDate = moment(vm.viewDate);
var previousView = vm.view;

function eventIsValid(event) {
@@ -58,7 +58,7 @@ angular
function refreshCalendar() {

if (calendarTitle[vm.view] && angular.isDefined($attrs.viewTitle)) {
vm.viewTitle = calendarTitle[vm.view](vm.currentDay);
vm.viewTitle = calendarTitle[vm.view](vm.viewDate);
}

vm.events = vm.events.filter(eventIsValid).map(function(event, index) {
@@ -67,7 +67,7 @@ angular
});

//if on-timespan-click="calendarDay = calendarDate" is set then don't update the view as nothing needs to change
var currentDate = moment(vm.currentDay);
var currentDate = moment(vm.viewDate);
var shouldUpdate = true;
if (
previousDate.clone().startOf(vm.view).isSame(currentDate.clone().startOf(vm.view)) &&
@@ -91,7 +91,7 @@ angular

//Refresh the calendar when any of these variables change.
$scope.$watchGroup([
'vm.currentDay',
'vm.viewDate',
'vm.view',
'vm.cellIsOpen',
function() {
@@ -117,7 +117,7 @@ angular
events: '=',
view: '=',
viewTitle: '=?',
currentDay: '=',
viewDate: '=',
editEventHtml: '=',
deleteEventHtml: '=',
cellIsOpen: '=',
@@ -21,7 +21,7 @@ angular

vm.view = calendarHelper.getDayView(
vm.events,
vm.currentDay,
vm.viewDate,
vm.dayViewStart,
vm.dayViewEnd,
vm.dayViewSplit
@@ -81,7 +81,7 @@ angular
require: '^mwlCalendar',
scope: {
events: '=',
currentDay: '=',
viewDate: '=',
onEventClick: '=',
onEventTimesChanged: '=',
onTimespanClick: '=',
@@ -13,7 +13,7 @@ angular
dayViewEnd = moment(vm.dayViewEnd || '23:00', 'HH:mm');
vm.dayViewSplit = parseInt(vm.dayViewSplit);
vm.hours = [];
var dayCounter = moment(vm.currentDay)
var dayCounter = moment(vm.viewDate)
.clone()
.hours(dayViewStart.hours())
.minutes(dayViewStart.minutes())
@@ -42,7 +42,7 @@ angular
'vm.dayViewStart',
'vm.dayViewEnd',
'vm.dayViewSplit',
'vm.currentDay'
'vm.viewDate'
], function() {
updateDays();
});
@@ -55,7 +55,7 @@ angular
template: calendarUseTemplates ? require('./../templates/calendarHourList.html') : '',
controller: 'MwlCalendarHourListCtrl as vm',
scope: {
currentDay: '=',
viewDate: '=',
dayViewStart: '=',
dayViewEnd: '=',
dayViewSplit: '=',
@@ -14,7 +14,7 @@ angular

vm.weekDays = calendarHelper.getWeekDayNames();

vm.view = calendarHelper.getMonthView(vm.events, vm.currentDay, vm.cellModifier);
vm.view = calendarHelper.getMonthView(vm.events, vm.viewDate, vm.cellModifier);
var rows = Math.floor(vm.view.length / 7);
vm.monthOffsets = [];
for (var i = 0; i < rows; i++) {
@@ -25,7 +25,7 @@ angular
if (vm.cellIsOpen && vm.openRowIndex === null) {
vm.openDayIndex = null;
vm.view.forEach(function(day) {
if (day.inMonth && moment(vm.currentDay).startOf('day').isSame(day.date)) {
if (day.inMonth && moment(vm.viewDate).startOf('day').isSame(day.date)) {
vm.dayClicked(day, true);
}
});
@@ -97,7 +97,7 @@ angular
require: '^mwlCalendar',
scope: {
events: '=',
currentDay: '=',
viewDate: '=',
onEventClick: '=',
onEditEventClick: '=',
onDeleteEventClick: '=',
@@ -21,13 +21,13 @@ angular
if (vm.showTimes) {
vm.view = calendarHelper.getWeekViewWithTimes(
vm.events,
vm.currentDay,
vm.viewDate,
vm.dayViewStart,
vm.dayViewEnd,
vm.dayViewSplit
);
} else {
vm.view = calendarHelper.getWeekView(vm.events, vm.currentDay);
vm.view = calendarHelper.getWeekView(vm.events, vm.viewDate);
}
});

@@ -83,7 +83,7 @@ angular
require: '^mwlCalendar',
scope: {
events: '=',
currentDay: '=',
viewDate: '=',
onEventClick: '=',
onEventTimesChanged: '=',
dayViewStart: '=',
@@ -10,13 +10,13 @@ angular
vm.openMonthIndex = null;

$scope.$on('calendar.refreshView', function() {
vm.view = calendarHelper.getYearView(vm.events, vm.currentDay, vm.cellModifier);
vm.view = calendarHelper.getYearView(vm.events, vm.viewDate, vm.cellModifier);

//Auto open the calendar to the current day if set
if (vm.cellIsOpen && vm.openMonthIndex === null) {
vm.openMonthIndex = null;
vm.view.forEach(function(month) {
if (moment(vm.currentDay).startOf('month').isSame(month.date)) {
if (moment(vm.viewDate).startOf('month').isSame(month.date)) {
vm.monthClicked(month, true);
}
});
@@ -70,7 +70,7 @@ angular
require: '^mwlCalendar',
scope: {
events: '=',
currentDay: '=',
viewDate: '=',
onEventClick: '=',
onEventTimesChanged: '=',
onEditEventClick: '=',
@@ -88,11 +88,11 @@ angular
return weekdays;
}

function getYearView(events, currentDay, cellModifier) {
function getYearView(events, viewDate, cellModifier) {

var view = [];
var eventsInPeriod = getEventsInPeriod(currentDay, 'year', events);
var month = moment(currentDay).startOf('year');
var eventsInPeriod = getEventsInPeriod(viewDate, 'year', events);
var month = moment(viewDate).startOf('year');
var count = 0;
while (count < 12) {
var startPeriod = month.clone();
@@ -116,11 +116,11 @@ angular

}

function getMonthView(events, currentDay, cellModifier) {
function getMonthView(events, viewDate, cellModifier) {

var startOfMonth = moment(currentDay).startOf('month');
var startOfMonth = moment(viewDate).startOf('month');
var day = startOfMonth.clone().startOf('week');
var endOfMonthView = moment(currentDay).endOf('month').endOf('week');
var endOfMonthView = moment(viewDate).endOf('month').endOf('week');
var eventsInPeriod;
if (calendarConfig.displayAllMonthEvents) {
eventsInPeriod = filterEventsInPeriod(events, day, endOfMonthView);
@@ -132,7 +132,7 @@ angular

while (day.isBefore(endOfMonthView)) {

var inMonth = day.month() === moment(currentDay).month();
var inMonth = day.month() === moment(viewDate).month();
var monthEvents = [];
if (inMonth || calendarConfig.displayAllMonthEvents) {
monthEvents = filterEventsInPeriod(eventsInPeriod, day, day.clone().endOf('day'));
@@ -161,10 +161,10 @@ angular

}

function getWeekView(events, currentDay) {
function getWeekView(events, viewDate) {

var startOfWeek = moment(currentDay).startOf('week');
var endOfWeek = moment(currentDay).endOf('week');
var startOfWeek = moment(viewDate).startOf('week');
var endOfWeek = moment(viewDate).endOf('week');
var dayCounter = startOfWeek.clone();
var days = [];
var today = moment().startOf('day');
@@ -215,20 +215,20 @@ angular

}

function getDayView(events, currentDay, dayViewStart, dayViewEnd, dayViewSplit) {
function getDayView(events, viewDate, dayViewStart, dayViewEnd, dayViewSplit) {

var dayStartHour = moment(dayViewStart || '00:00', 'HH:mm').hours();
var dayEndHour = moment(dayViewEnd || '23:00', 'HH:mm').hours();
var hourHeight = (60 / dayViewSplit) * 30;
var calendarStart = moment(currentDay).startOf('day').add(dayStartHour, 'hours');
var calendarEnd = moment(currentDay).startOf('day').add(dayEndHour, 'hours');
var calendarStart = moment(viewDate).startOf('day').add(dayStartHour, 'hours');
var calendarEnd = moment(viewDate).startOf('day').add(dayEndHour, 'hours');
var calendarHeight = (dayEndHour - dayStartHour + 1) * hourHeight;
var hourHeightMultiplier = hourHeight / 60;
var buckets = [];
var eventsInPeriod = filterEventsInPeriod(
events,
moment(currentDay).startOf('day').toDate(),
moment(currentDay).endOf('day').toDate()
moment(viewDate).startOf('day').toDate(),
moment(viewDate).endOf('day').toDate()
);

return eventsInPeriod.map(function(event) {
@@ -293,8 +293,8 @@ angular

}

function getWeekViewWithTimes(events, currentDay, dayViewStart, dayViewEnd, dayViewSplit) {
var weekView = getWeekView(events, currentDay);
function getWeekViewWithTimes(events, viewDate, dayViewStart, dayViewEnd, dayViewSplit) {
var weekView = getWeekView(events, viewDate);
var newEvents = [];
weekView.days.forEach(function(day) {
var dayEvents = weekView.events.filter(function(event) {
@@ -6,21 +6,21 @@ angular
.module('mwl.calendar')
.factory('calendarTitle', function(moment, calendarConfig, calendarHelper) {

function day(currentDay) {
return calendarHelper.formatDate(currentDay, calendarConfig.titleFormats.day);
function day(viewDate) {
return calendarHelper.formatDate(viewDate, calendarConfig.titleFormats.day);
}

function week(currentDay) {
function week(viewDate) {
var weekTitleLabel = calendarConfig.titleFormats.week;
return weekTitleLabel.replace('{week}', moment(currentDay).week()).replace('{year}', moment(currentDay).format('YYYY'));
return weekTitleLabel.replace('{week}', moment(viewDate).week()).replace('{year}', moment(viewDate).format('YYYY'));
}

function month(currentDay) {
return calendarHelper.formatDate(currentDay, calendarConfig.titleFormats.month);
function month(viewDate) {
return calendarHelper.formatDate(viewDate, calendarConfig.titleFormats.month);
}

function year(currentDay) {
return calendarHelper.formatDate(currentDay, calendarConfig.titleFormats.year);
function year(viewDate) {
return calendarHelper.formatDate(viewDate, calendarConfig.titleFormats.year);
}

return {
@@ -2,11 +2,11 @@

<div class="alert alert-danger" ng-switch-default>The value passed to the view attribute of the calendar is not set</div>

<div class="alert alert-danger" ng-hide="vm.currentDay">The value passed to current-day attribute of the calendar is not set</div>
<div class="alert alert-danger" ng-hide="vm.viewDate">The value passed to view-date attribute of the calendar is not set</div>

<mwl-calendar-year
events="vm.events"
current-day="vm.currentDay"
view-date="vm.viewDate"
on-event-click="vm.onEventClick"
on-event-times-changed="vm.onEventTimesChanged"
on-edit-event-click="vm.onEditEventClick"
@@ -21,7 +21,7 @@

<mwl-calendar-month
events="vm.events"
current-day="vm.currentDay"
view-date="vm.viewDate"
on-event-click="vm.onEventClick"
on-event-times-changed="vm.onEventTimesChanged"
on-edit-event-click="vm.onEditEventClick"
@@ -38,7 +38,7 @@

<mwl-calendar-week
events="vm.events"
current-day="vm.currentDay"
view-date="vm.viewDate"
on-event-click="vm.onEventClick"
on-event-times-changed="vm.onEventTimesChanged"
day-view-start="vm.dayViewStart"
@@ -50,7 +50,7 @@

<mwl-calendar-day
events="vm.events"
current-day="vm.currentDay"
view-date="vm.viewDate"
on-event-click="vm.onEventClick"
on-event-times-changed="vm.onEventTimesChanged"
on-timespan-click="vm.onTimespanClick"
@@ -11,7 +11,7 @@
day-view-end="vm.dayViewEnd"
day-view-split="vm.dayViewSplit"
on-timespan-click="vm.onTimespanClick"
current-day="vm.currentDay">
view-date="vm.viewDate">
</mwl-calendar-hour-list>

<div
@@ -32,7 +32,7 @@
day-view-start="vm.dayViewStart"
day-view-end="vm.dayViewEnd"
day-view-split="vm.dayViewSplit"
current-day="vm.currentDay"
view-date="vm.viewDate"
on-timespan-click="vm.onTimespanClick"
ng-if="vm.showTimes">
</mwl-calendar-hour-list>
Oops, something went wrong.

0 comments on commit c44a50e

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