Calendar module: add day view
Francis Lachapelle
parent
7ef01304ee
commit
6c4a82571c
|
|
@ -6,35 +6,34 @@
|
|||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
|
||||
<div class="menu" id="currentViewMenu">
|
||||
<!-- <div class="menu" id="currentViewMenu">
|
||||
<ul>
|
||||
<li><var:string label:value="New Event..."/></li>
|
||||
<li><var:string label:value="New Task..."/></li>
|
||||
<li><!-- separator --></li>
|
||||
<li>!- separator -</li>
|
||||
<li><var:string label:value="Previous Day"/></li>
|
||||
<li><var:string label:value="Next Day"/></li>
|
||||
<li><!-- separator --></li>
|
||||
<li>!- separator -</li>
|
||||
<li><var:string label:value="Delete Event"/></li>
|
||||
<li><var:string label:value="Copy event to my calendar"/></li>
|
||||
<li><var:string label:value="View Raw Source"/></li>
|
||||
</ul>
|
||||
</div>-->
|
||||
<div layout="row" layout-align="center">
|
||||
<h5>
|
||||
<md-button
|
||||
class="iconButton"
|
||||
label:aria-label="Previous Day"
|
||||
var:date="prevDayQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><i class="md-icon-chevron-left"><!--icon--></i></md-button>
|
||||
<var:string value="currentDayName" />
|
||||
<md-button
|
||||
class="iconButton"
|
||||
label:aria-label="Next Day"
|
||||
var:date="nextDayQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><i class="md-icon-chevron-right"><!--icon--></i></md-button>
|
||||
</h5>
|
||||
</div>
|
||||
<span class="daysHeader">
|
||||
<span class="day1">
|
||||
<a href="#"
|
||||
id="leftNavigationArrow"
|
||||
var:date="prevDayQueryParameters.day"
|
||||
onclick="return onCalendarGotoDay(this);"><img rsrc:src="arrow-left.png"/></a>
|
||||
</span>
|
||||
<span class="day0"><var:string value="currentDayName"/></span>
|
||||
<span class="day1">
|
||||
<a href="#"
|
||||
id="rightNavigationArrow"
|
||||
var:date="nextDayQueryParameters.day"
|
||||
onclick="return onCalendarGotoDay(this);"><img rsrc:src="arrow-right.png"/></a>
|
||||
</span>
|
||||
<a href="#" id="listCollapse"><img var:class="collapseBtnClass" rsrc:src="collapse.png"/></a>
|
||||
</span>
|
||||
<div id="calendarContent">
|
||||
<var:component
|
||||
className="UIxCalDayTable"
|
||||
|
|
|
|||
|
|
@ -199,8 +199,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="spacer cols-8"><!-- spacer -->
|
||||
<a class="iconButton md-button md-default-theme" label:aria-label="Week" href="#/calendar/weekView"><i class="md-icon-view-week"><!-- week view --></i>
|
||||
</a>
|
||||
<a class="iconButton md-button md-default-theme"
|
||||
label:aria-label="Day"
|
||||
href="#/calendar/day"><i class="md-icon-view-day"><!-- day view --></i></a>
|
||||
<a class="iconButton md-button md-default-theme"
|
||||
label:aria-label="Week"
|
||||
href="#/calendar/week"><i class="md-icon-view-week"><!-- week view --></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
|
|
|||
|
|
@ -74,25 +74,46 @@
|
|||
};
|
||||
|
||||
/**
|
||||
* @function $eventsBlocksForWeek
|
||||
* @function $eventsBlocksForView
|
||||
* @memberof Component.prototype
|
||||
* @desc Events blocks for a specific week
|
||||
* @param {Date} type - Date of any day of the week
|
||||
* @returns a promise of a collection of Components instances
|
||||
* @param {string} view - Either 'day' or 'week'
|
||||
* @param {Date} type - Date of any day of the desired period
|
||||
* @returns a promise of a collection of objects describing the events blocks
|
||||
*/
|
||||
Component.$eventsBlocksForWeek = function(date) {
|
||||
var startDate, endDate, params, i,
|
||||
Component.$eventsBlocksForView = function(view, date) {
|
||||
var viewAction, startDate, endDate, params;
|
||||
|
||||
if (view == 'day') {
|
||||
viewAction = 'dayView';
|
||||
startDate = endDate = date;
|
||||
}
|
||||
else if (view == 'week') {
|
||||
viewAction = 'weekView';
|
||||
startDate = date.beginOfWeek();
|
||||
endDate = new Date();
|
||||
endDate.setTime(startDate.getTime());
|
||||
endDate.addDays(6);
|
||||
}
|
||||
return this.$eventsBlocks(viewAction, startDate, endDate);
|
||||
};
|
||||
|
||||
/**
|
||||
* @function $eventsBlocks
|
||||
* @memberof Component.prototype
|
||||
* @desc Events blocks for a specific view and period
|
||||
* @param {string} view - Either 'day' or 'week'
|
||||
* @param {Date} startDate - period's start date
|
||||
* @param {Date} endDate - period's end date
|
||||
* @returns a promise of a collection of objects describing the events blocks
|
||||
*/
|
||||
Component.$eventsBlocks = function(view, startDate, endDate) {
|
||||
var params, futureComponentData, i,
|
||||
deferred = Component.$q.defer();
|
||||
|
||||
startDate = date.beginOfWeek();
|
||||
endDate = new Date();
|
||||
endDate.setTime(startDate.getTime());
|
||||
endDate.addDays(6);
|
||||
|
||||
params = { view: 'weekView', sd: startDate.getDayString(), ed: endDate.getDayString() };
|
||||
params = { view: view, sd: startDate.getDayString(), ed: endDate.getDayString() };
|
||||
Component.$log.debug('eventsblocks ' + JSON.stringify(params, undefined, 2));
|
||||
|
||||
var futureComponentData = this.$$resource.fetch(null, 'eventsblocks', params);
|
||||
futureComponentData = this.$$resource.fetch(null, 'eventsblocks', params);
|
||||
futureComponentData.then(function(data) {
|
||||
Component.$timeout(function() {
|
||||
var components = [], blocks = {};
|
||||
|
|
@ -112,7 +133,7 @@
|
|||
});
|
||||
|
||||
// Convert array of blocks to object with days as keys
|
||||
for (i = 0; i < 7; i++) {
|
||||
for (i = 0; i < data.blocks.length; i++) {
|
||||
blocks[startDate.getDayString()] = data.blocks[i];
|
||||
startDate.addDays(1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,12 +37,14 @@
|
|||
}]
|
||||
}
|
||||
})
|
||||
.state('calendars.weekView', {
|
||||
url: '/weekView/:day',
|
||||
.state('calendars.view', {
|
||||
url: '/{view:(?:day|week)}/:day',
|
||||
views: {
|
||||
calendarView: {
|
||||
templateUrl: function ($stateParams) {
|
||||
return 'weekview?day=' + $stateParams.day; // UI/Templates/SchedulerUI/UIxCalWeekView.wox
|
||||
templateUrl: function($stateParams) {
|
||||
// UI/Templates/SchedulerUI/UIxCalDayView.wox or
|
||||
// UI/Templates/SchedulerUI/UIxCalWeekView.wox
|
||||
return $stateParams.view + 'view?day=' + $stateParams.day;
|
||||
},
|
||||
controller: 'CalendarController',
|
||||
controllerAs: 'calendar'
|
||||
|
|
@ -50,15 +52,20 @@
|
|||
},
|
||||
resolve: {
|
||||
stateEventsBlocks: ['$stateParams', 'sgComponent', function($stateParams, Component) {
|
||||
return Component.$eventsBlocksForWeek($stateParams.day.asDate());
|
||||
return Component.$eventsBlocksForView($stateParams.view, $stateParams.day.asDate());
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
$urlRouterProvider.when('/calendar/weekView', function() {
|
||||
$urlRouterProvider.when('/calendar/day', function() {
|
||||
// If no date is specified, show today
|
||||
var now = new Date();
|
||||
return '/calendar/day/' + now.getDayString();
|
||||
})
|
||||
$urlRouterProvider.when('/calendar/week', function() {
|
||||
// If no date is specified, show today's week
|
||||
var now = new Date();
|
||||
return '/calendar/weekView/' + now.getDayString();
|
||||
return '/calendar/week/' + now.getDayString();
|
||||
});
|
||||
|
||||
// if none of the above states are matched, use this as the fallback
|
||||
|
|
@ -127,13 +134,13 @@
|
|||
// Change calendar's view
|
||||
this.changeView = function($event) {
|
||||
var date = angular.element($event.currentTarget).attr('date');
|
||||
$state.go('calendars.weekView', { day: date });
|
||||
$state.go('calendars.view', { view: $stateParams.view, day: date });
|
||||
};
|
||||
|
||||
// Refresh current view when the list of calendars is modified
|
||||
$scope.$on('calendars:list', angular.bind(this, function() {
|
||||
var ctrl = this;
|
||||
Component.$eventsBlocksForWeek($stateParams.day.asDate()).then(function(data) {
|
||||
Component.$eventsBlocksForView($stateParams.view, $stateParams.day.asDate()).then(function(data) {
|
||||
ctrl.blocks = data;
|
||||
});
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -28,6 +28,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.daysViewFor1Days {
|
||||
.day {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#daysView {
|
||||
position: relative;
|
||||
top: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue