LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Multicolumn day view 

Restored multicolumn day view from v2.

Month view as also been improved.
pull/105/head
Francis Lachapelle 2015-09-29 14:08:05 -04:00
parent d51bef162a
commit 45bc5a5368
11 changed files with 285 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
UI/Scheduler/UIxCalDayTable.m
View File

@ -303,7 +303,7 @@
isLastOrFirstDay = NO;
calendarFormat = @"%b";
if ([currentView isEqualToString:@"dayview"])
if ([currentView hasSuffix: @"dayview"])
{
isLastOrFirstDay = YES;
calendarFormat = @"%B";
@ -456,22 +456,18 @@
unsigned int currentDayNbr, realDayOfWeek;
classes = [NSMutableString string];
if ([currentView isEqualToString:@"multicolumndayview"])
[classes appendFormat:@"day dayColumn"];
else {
currentDayNbr = [daysToDisplay indexOfObject: currentTableDay];
realDayOfWeek = [currentTableDay dayOfWeek];
currentDayNbr = [daysToDisplay indexOfObject: currentTableDay];
realDayOfWeek = [currentTableDay dayOfWeek];
[classes appendFormat: @"day day%d", currentDayNbr];
[classes appendFormat: @"day day%d", currentDayNbr];
if (numberOfDays > 1)
if (numberOfDays > 1)
{
if (realDayOfWeek == 0 || realDayOfWeek == 6)
[classes appendString: @" weekEndDay"];
if ([currentTableDay isToday])
[classes appendString: @" dayOfToday"];
}
}
return classes;
}

27
UI/Scheduler/UIxCalListingActions.m
View File

@ -1225,7 +1225,7 @@ _computeBlocksPosition (NSArray *blocks)
SOGoAppointmentFolder *folder;
NSMutableArray *selectedCalendars;
NSArray *folders;
NSString *fUID;
NSString *fUID, *fName;
NSNumber *isActive;
unsigned int count, foldersCount;
@ -1239,7 +1239,11 @@ _computeBlocksPosition (NSArray *blocks)
isActive = [NSNumber numberWithBool: [folder isActive]];
if ([isActive intValue] != 0) {
fUID = [folder nameInContainer];
[selectedCalendars addObject: fUID];
fName = [folder displayName];
[selectedCalendars addObject: [NSDictionary dictionaryWithObjectsAndKeys:
fUID, @"id",
fName, @"name",
nil]];
}
}
return selectedCalendars;
@ -1297,9 +1301,10 @@ _computeBlocksPosition (NSArray *blocks)
{
int count, max;
NSArray *events, *event, *calendars;
NSDictionary *eventsBlocks;
NSMutableArray *allDayBlocks, *blocks, *currentDay, *eventsByCalendars, *eventsForCalendar;
NSDictionary *eventsBlocks, *calendar;
NSMutableArray *allDayBlocks, *blocks, *currentDay, *eventsForCalendar, *eventsByCalendars;
NSNumber *eventNbr;
NSString *calendarName, *calendarId;
BOOL isAllDay;
int i, j;
@ -1313,16 +1318,21 @@ _computeBlocksPosition (NSArray *blocks)
eventsByCalendars = [NSMutableArray arrayWithCapacity:[calendars count]];
for (i = 0; i < [calendars count]; i++) // For each calendar
{
calendar = [calendars objectAtIndex:i];
calendarName =[calendar objectForKey: @"name"];
calendarId = [calendar objectForKey: @"id"];
eventsForCalendar = [NSMutableArray array];
[self _prepareEventBlocks: &blocks withAllDays: &allDayBlocks];
for (j = 0; j < [events count]; j++) {
if ([[[events objectAtIndex:j] objectAtIndex:eventFolderIndex] isEqualToString:[calendars objectAtIndex:i]]) {
if ([[[events objectAtIndex:j] objectAtIndex:eventFolderIndex] isEqualToString: calendarId]) {
// Event is in current calendar
[eventsForCalendar addObject: [events objectAtIndex:j]];
}
}
eventsBlocks = [NSDictionary dictionaryWithObjectsAndKeys:
eventsFields, @"eventsFields",
calendarId , @"id",
calendarName, @"calendarName",
eventsFields, @"eventsFields",
eventsForCalendar, @"events",
allDayBlocks, @"allDayBlocks",
blocks, @"blocks", nil];
@ -1344,8 +1354,7 @@ _computeBlocksPosition (NSArray *blocks)
[currentDay sortUsingSelector: @selector (compareEventByStart:)];
[self _addBlocksWidth: currentDay];
}
[eventsByCalendars insertObject:eventsBlocks atIndex:i];
[eventsByCalendars addObject: eventsBlocks];
}
return [self _responseWithData: eventsByCalendars];
}
@ -1381,7 +1390,7 @@ _computeBlocksPosition (NSArray *blocks)
[currentDay sortUsingSelector: @selector (compareEventByStart:)];
[self _addBlocksWidth: currentDay];
}
return [self _responseWithData: eventsBlocks];
return [self _responseWithData: [NSArray arrayWithObject: eventsBlocks]];
}
}

160
UI/Templates/SchedulerUI/UIxCalDayTable.wox
View File

@ -8,66 +8,44 @@
xmlns:label="OGo:label">
<md-toolbar class="daysView md-hue-1" md-scroll-shrink="true" var:sg-view="currentView">
<!-- MultiColumnView -->
<!-- Display the name of the calendar -->
<!-- Display today abreviation and date -->
<div class="days dayLabels">
<var:foreach list="daysToDisplay" item="currentTableDay">
<div var:class="dayClasses">
<!-- Week view day header -->
<var:if condition="isWeekView">
<div class="sg-md-caption"><var:string value="labelForDay"/></div>
<var:if condition="currentTableDay.isToday">
<div class="sg-md-display-2 md-default-theme md-fg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
</var:if>
<var:if condition="currentTableDay.isToday" const:negate="YES">
<div class="sg-md-display-2 md-default-theme md-fg md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
</var:if>
<div class="md-default-theme md-fg md-primary md-hue-2"><var:string value="labelForMonth"/></div>
</var:if>
<!-- Day view header -->
<var:if condition="isWeekView" const:negate="YES">
<var:if condition="currentTableDay.isToday">
<div class="sg-md-display-4 md-default-theme md-fg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
</var:if>
<var:if condition="currentTableDay.isToday" const:negate="YES">
<div class="sg-md-display-4 md-default-theme md-fg md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
</var:if>
<div class="md-default-theme md-fg md-primary md-hue-2"><var:string value="labelForMonth"/></div>
</var:if>
</div>
</var:foreach>
</div>
<var:if condition="isMultiColumnView">
<div class="calendarLabels">
<var:foreach list="calendarsToDisplay" item="currentCalendar">
<div class="calendarsToDisplay" var:folder="currentCalendar.folder">
<var:string value="labelForCalendar"/>
</div>
</var:foreach>
</div>
<!-- Display today abreviation and date -->
<div class="days dayLabels">
<var:foreach list="daysToDisplay" item="currentTableDay">
<div var:class="dayClasses">
<var:string value="labelForDate"/><br/>
<span class="dayOfWeek"><var:string value="labelForDay"/></span>
</div>
</var:foreach>
</div>
<!-- All day cells -->
<!-- Calendars names in multicolumn day view -->
<div class="days">
<var:foreach list="calendarsToDisplay" item="currentCalendar">
<var:foreach list="daysToDisplay" item="currentTableDay">
<div var:class="dayClasses" var:day="currentTableDay.shortDateString" var:id="currentAllDayId" var:calendar="currentCalendar.folder" hour="allday"><!-- space --></div>
</var:foreach>
</var:foreach>
</div>
</var:if>
<!-- DayView or WeekView -->
<var:if condition="isNotMultiColumnView">
<!-- Display today abreviation and date -->
<div class="days dayLabels">
<var:foreach list="daysToDisplay" item="currentTableDay">
<div var:class="dayClasses">
<!-- Week view day header -->
<var:if condition="isWeekView">
<div class="sg-md-caption"><var:string value="labelForDay"/></div>
<var:if condition="currentTableDay.isToday">
<div class="sg-md-display-2 md-default-theme md-fg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
</var:if>
<var:if condition="currentTableDay.isToday" const:negate="YES">
<div class="sg-md-display-2 md-default-theme md-fg md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
</var:if>
<div class="md-default-theme md-fg md-primary md-hue-2"><var:string value="labelForMonth"/></div>
</var:if>
<!-- Day view header -->
<var:if condition="isWeekView" const:negate="YES">
<var:if condition="currentTableDay.isToday">
<div class="sg-md-display-4 md-default-theme md-fg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
</var:if>
<var:if condition="currentTableDay.isToday" const:negate="YES">
<div class="sg-md-display-4 md-default-theme md-fg md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
</var:if>
<div class="md-default-theme md-fg md-primary md-hue-2"><var:string value="labelForMonth"/></div>
</var:if>
</div>
</var:foreach>
<div class="day multicolumnDay"
ng-repeat="view in calendar.views"
ng-class="view.calendar.getClassName('bdr')">
{{view.calendar.name}}
</div>
</div>
</var:if>
@ -75,9 +53,13 @@
<div class="allDaysView md-default-theme md-background md-bg">
<div class="days">
<var:foreach list="daysToDisplay" item="currentTableDay">
<div var:class="dayClasses" var:day="currentTableDay.shortDateString" var:id="currentAllDayId" hour="allday">
<div var:class="dayClasses"
var:day="currentTableDay.shortDateString"
var:id="currentAllDayId"
hour="allday"
ng-repeat="view in calendar.views">
<sg-calendar-day-table
sg-blocks="calendar.allDayBlocks"
sg-blocks="view.allDayBlocks"
sg-click="list.openEvent(event, component)"
var:sg-day="currentTableDay.shortDateString" />
</div>
@ -101,46 +83,28 @@
<!-- The hours cells -->
<div class="daysView">
<div class="days">
<!-- MultiColumnView -->
<var:if condition="isMultiColumnView">
<var:foreach list="calendarsToDisplay" item="currentCalendar">
<var:foreach list="daysToDisplay" item="currentTableDay">
<div var:class="dayClasses" var:id="currentDayId" var:day-number="currentDayNumber" var:calendar="currentCalendar.folder" var:day="currentTableDay.shortDateString">
<div class="hourCells">
<var:foreach list="hoursToDisplay" item="currentTableHour">
<div var:class="clickableHourCellClass" var:day="currentTableDay.shortDateString" var:hour="currentAppointmentHour">
<span class="minutes15"><!-- space --></span>
<span class="minutes30"><!-- space --></span>
<span class="minutes45"><!-- space --></span>
</div>
</var:foreach>
<var:foreach list="daysToDisplay" item="currentTableDay">
<div var:class="dayClasses"
var:id="currentDayId"
var:day-number="currentDayNumber"
var:day="currentTableDay.shortDateString"
ng-repeat="view in calendar.views">
<div class="hourCells">
<var:foreach list="hoursToDisplay" item="currentTableHour">
<div var:class="clickableHourCellClass" var:day="currentTableDay.shortDateString" var:hour="currentAppointmentHour">
<span class="minutes15"><!-- space --></span>
<span class="minutes30"><!-- space --></span>
<span class="minutes45"><!-- space --></span>
</div>
<div class="events"><!-- space --></div>
</div>
</var:foreach>
</var:foreach>
</var:if>
<!-- DayView and WeekView -->
<var:if condition="isNotMultiColumnView">
<var:foreach list="daysToDisplay" item="currentTableDay">
<div var:class="dayClasses" var:id="currentDayId" var:day-number="currentDayNumber" var:day="currentTableDay.shortDateString">
<div class="hourCells">
<var:foreach list="hoursToDisplay" item="currentTableHour">
<div var:class="clickableHourCellClass" var:day="currentTableDay.shortDateString" var:hour="currentAppointmentHour">
<span class="minutes15"><!-- space --></span>
<span class="minutes30"><!-- space --></span>
<span class="minutes45"><!-- space --></span>
</div>
</var:foreach>
<sg-calendar-day-table
sg-blocks="calendar.blocks"
sg-click="list.openEvent(event, component)"
var:sg-day="currentTableDay.shortDateString" />
</div>
<div class="events"><!-- space --></div>
</var:foreach>
<sg-calendar-day-table
sg-click="list.openEvent(event, component)"
sg-blocks="view.blocks"
var:sg-day="currentTableDay.shortDateString" />
</div>
</var:foreach>
</var:if>
<div class="events"><!-- space --></div>
</div>
</var:foreach>
</div>
</div>
</div>

7
UI/Templates/SchedulerUI/UIxCalDayView.wox
View File

@ -22,12 +22,19 @@
<md-button class="md-icon-button md-accent"
label:aria-label="Today"
ng-click="app.today()"><md-icon>today</md-icon></md-button>
<a class="md-icon-button md-button"
label:aria-label="Day"
ng-disabled="true"
href="#/calendar/day"><md-icon>view_day</md-icon></a>
<a class="md-icon-button md-button"
label:aria-label="Week"
href="#/calendar/week"><md-icon>view_week</md-icon></a>
<a class="md-icon-button md-button"
label:aria-label="Month"
href="#/calendar/month"><md-icon>view_module</md-icon></a>
<a class="md-icon-button md-button"
label:aria-label="Multicolumn Day View"
href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
</div>
</md-toolbar>

21
UI/Templates/SchedulerUI/UIxCalMonthView.wox
View File

@ -28,6 +28,13 @@
<a class="md-icon-button md-button"
label:aria-label="Week"
href="#/calendar/week"><md-icon>view_week</md-icon></a>
<a class="md-icon-button md-button"
label:aria-label="Month"
ng-disabled="true"
href="#/calendar/month"><md-icon>view_module</md-icon></a>
<a class="md-icon-button md-button"
label:aria-label="Multicolumn Day View"
href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
</div>
</md-toolbar>
@ -44,27 +51,31 @@
<div class="calendarView monthView">
<md-grid-list
md-cols="7"
md-row-height="1:1">
md-row-height="1:1"
md-gutter="0">
<var:foreach list="weeksToDisplay" item="currentWeek">
<var:foreach list="currentWeek" item="currentTableDay">
<md-grid-tile
md-rowspan="1"
md-colspan="1"
class="day"
var:class="dayCellClasses"
var:day="currentTableDay.shortDateString"
var:day-number="currentDayNumber"
var:id="currentDayId">
var:id="currentDayId"
>
<div layout="column" layout-fill="true">
<var:if condition="currentTableDay.isToday">
<div class="sg-calendar-tile-header md-default-theme md-fg md-accent md-hue-2"><var:string value="dayHeaderNumber"/></div>
<div class="sg-calendar-tile-header md-default-theme md-bg md-accent md-hue-2"><var:string value="dayHeaderNumber"/></div>
</var:if>
<var:if condition="currentTableDay.isToday" const:negate="YES">
<div class="sg-calendar-tile-header md-default-theme md-fg md-hue-2"><var:string value="dayHeaderNumber"/></div>
</var:if>
<md-content>
<sg-calendar-month-day
sg-blocks="calendar.blocks"
sg-blocks="calendar.views[0].blocks"
sg-click="list.openEvent(event, component)"
var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day>
</md-content>
</div>
</md-grid-tile>
</var:foreach>

78
UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
View File

@ -1,56 +1,46 @@
<?xml version="1.0" standalone="yes"?>
<container
<!DOCTYPE container>
<container
xmlns="http://www.w3.org/1999/xhtml"
xmlns:var="http://www.skyrix.com/od/binding"
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:rsrc="OGo:url"
xmlns:label="OGo:label">
<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><var:string label:value="Previous Day"/></li>
<li><var:string label:value="Next Day"/></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>
<md-toolbar hide-sm="hide-sm">
<div class="md-toolbar-tools">
<md-button class="md-icon-button"
label:aria-label="Previous Day"
var:date="prevDayQueryParameters.day"
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
<div><var:string value="currentDayName" /></div>
<md-button class="md-icon-button"
label:aria-label="Next Day"
var:date="nextDayQueryParameters.day"
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
<div class="md-flex"><!-- spacer --></div>
<md-button class="md-icon-button md-accent"
label:aria-label="Today"
ng-click="app.today()"><md-icon>today</md-icon></md-button>
<a class="md-icon-button md-button"
label:aria-label="Day"
href="#/calendar/day"><md-icon>view_day</md-icon></a>
<a class="md-icon-button md-button"
label:aria-label="Week"
href="#/calendar/week"><md-icon>view_week</md-icon></a>
<a class="md-icon-button md-button"
label:aria-label="Month"
href="#/calendar/month"><md-icon>view_module</md-icon></a>
<a class="md-icon-button md-button"
label:aria-label="Multicolumn Day View"
ng-disabled="true"
href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
</div>
<!-- Navigation header -->
<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>
</md-toolbar>
<!-- TODO : Move this inside the schedulerUI.css -->
<style type="text/css">
DIV.day
{
width: <var:string value="dayWidthPercentage" />% !important;
}
<var:foreach list="subscriptionUsers" item="currentTableUser">
DIV[class~='day'].appointmentsOf<var:string value="currentTableUser" />
{
left: <var:string value="currentTableUserDayLeftPercentage" />% !important;
}
</var:foreach>
</style>
<!-- Display the calendar header and the table view -->
<div id="calendarContent">
<var:component
<var:component
className="UIxCalDayTable"
startDate="startDate"
const:CSSClass="dayOverview"
const:numberOfDays="1"
const:currentView="multicolumndayview"/>
</div>
</container>
</container>

7
UI/Templates/SchedulerUI/UIxCalWeekView.wox
View File

@ -25,9 +25,16 @@
<a class="md-icon-button md-button"
label:aria-label="Day"
href="#/calendar/day"><md-icon>view_day</md-icon></a>
<a class="md-icon-button md-button"
label:aria-label="Week"
ng-disabled="true"
href="#/calendar/week"><md-icon>view_week</md-icon></a>
<a class="md-icon-button md-button"
label:aria-label="Month"
href="#/calendar/month"><md-icon>view_module</md-icon></a>
<a class="md-icon-button md-button"
label:aria-label="Multicolumn Day View"
href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
</div>
</md-toolbar>

14
UI/WebServerResources/js/Scheduler/CalendarController.js
View File

@ -10,15 +10,19 @@
function CalendarController($scope, $state, $stateParams, $timeout, $interval, $log, focus, Calendar, Component, stateEventsBlocks) {
var vm = this;
vm.blocks = stateEventsBlocks.blocks;
vm.allDayBlocks = stateEventsBlocks.allDayBlocks;
vm.views = stateEventsBlocks;
vm.changeView = changeView;
// Refresh current view when the list of calendars is modified
$scope.$on('calendars:list', function() {
// See stateEventsBlocks in Scheduler.app.js
Component.$eventsBlocksForView($stateParams.view, $stateParams.day.asDate()).then(function(data) {
vm.blocks = data.blocks;
vm.allDayBlocks = data.allDayBlocks;
vm.views = data;
_.forEach(vm.views, function(view) {
if (view.id) {
view.calendar = new Calendar({ id: view.id, name: view.calendarName });
}
});
});
});
@ -28,7 +32,7 @@
$state.go('calendars.view', { view: $stateParams.view, day: date });
}
}
angular
.module('SOGo.SchedulerUI')
.controller('CalendarController', CalendarController);

106
UI/WebServerResources/js/Scheduler/Component.service.js
View File

@ -240,6 +240,10 @@
viewAction = 'dayView';
startDate = endDate = date;
}
else if (view == 'multicolumnday') {
viewAction = 'multicolumndayView';
startDate = endDate = date;
}
else if (view == 'week') {
viewAction = 'weekView';
startDate = date.beginOfWeek();
@ -264,65 +268,79 @@
/**
* @function $eventsBlocks
* @desc Events blocks for a specific view and period
* @param {string} view - Either 'day' or 'week'
* @param {string} view - Either 'day', 'multicolumnday', 'week' or 'month'
* @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,
var params, futureComponentData, i, dates = [],
deferred = Component.$q.defer();
params = { view: view.toLowerCase(), sd: startDate.getDayString(), ed: endDate.getDayString() };
Component.$log.debug('eventsblocks ' + JSON.stringify(params, undefined, 2));
futureComponentData = this.$$resource.fetch(null, 'eventsblocks', params);
futureComponentData.then(function(data) {
futureComponentData.then(function(views) {
var reduceComponent, associateComponent;
reduceComponent = function(objects, eventData, i) {
var componentData = _.object(this.eventsFields, eventData),
start = new Date(componentData.c_startdate * 1000);
componentData.hour = start.getHourString();
objects.push(new Component(componentData));
return objects;
};
associateComponent = function(block) {
block.component = this[block.nbr];
};
Component.$views = [];
Component.$timeout(function() {
var components = [], blocks = {}, allDayBlocks = {}, dates = [];
_.forEach(views, function(data) {
var components = [], blocks = {}, allDayBlocks = {}, viewData;
// Instantiate Component objects
_.reduce(data.events, function(objects, eventData, i) {
var componentData = _.object(data.eventsFields, eventData),
start = new Date(componentData.c_startdate * 1000);
componentData.hour = start.getHourString();
objects.push(new Component(componentData));
return objects;
}, components);
// Instantiate Component objects
_.reduce(data.events, reduceComponent, components, data);
// Associate Component objects to blocks positions
_.each(_.flatten(data.blocks), function(block) {
block.component = components[block.nbr];
// Associate Component objects to blocks positions
_.forEach(_.flatten(data.blocks), associateComponent, components);
// Associate Component objects to all-day blocks positions
_.each(_.flatten(data.allDayBlocks), associateComponent, components);
// Build array of dates
if (dates.length === 0)
for (i = 0; i < data.blocks.length; i++) {
dates.push(startDate.getDayString());
startDate.addDays(1);
}
// Convert array of blocks to object with days as keys
for (i = 0; i < data.blocks.length; i++) {
blocks[dates[i]] = data.blocks[i];
}
// Convert array of all-day blocks to object with days as keys
for (i = 0; i < data.allDayBlocks.length; i++) {
allDayBlocks[dates[i]] = data.allDayBlocks[i];
}
Component.$log.debug('blocks ready (' + _.flatten(data.blocks).length + ')');
Component.$log.debug('all day blocks ready (' + _.flatten(data.allDayBlocks).length + ')');
// Save the blocks to the object model
viewData = { blocks: blocks, allDayBlocks: allDayBlocks };
if (data.id && data.calendarName) {
// The multicolumnday view also includes calendar information
viewData.id = data.id;
viewData.calendarName = data.calendarName;
}
Component.$views.push(viewData);
});
// Associate Component objects to all-day blocks positions
_.each(_.flatten(data.allDayBlocks), function(allDayBlock) {
allDayBlock.component = components[allDayBlock.nbr];
});
// Build array of dates
for (i = 0; i < data.blocks.length; i++) {
dates.push(startDate.getDayString());
startDate.addDays(1);
}
// Convert array of blocks to object with days as keys
for (i = 0; i < data.blocks.length; i++) {
blocks[dates[i]] = data.blocks[i];
}
// Convert array of all-day blocks to object with days as keys
for (i = 0; i < data.allDayBlocks.length; i++) {
allDayBlocks[dates[i]] = data.allDayBlocks[i];
}
Component.$log.debug('blocks ready (' + _.flatten(data.blocks).length + ')');
Component.$log.debug('all day blocks ready (' + _.flatten(data.allDayBlocks).length + ')');
// Save the blocks to the object model
Component.$blocks = blocks;
Component.$allDayBlocks = allDayBlocks;
deferred.resolve({ blocks: blocks, allDayBlocks: allDayBlocks });
Component.$log.debug(JSON.stringify(Component.$views, undefined, 2));
deferred.resolve(Component.$views);
});
}, deferred.reject);

35
UI/WebServerResources/js/Scheduler/Scheduler.app.js
View File

@ -28,7 +28,7 @@
}
})
.state('calendars.view', {
url: '/{view:(?:day|week|month)}/:day',
url: '/{view:(?:day|week|month|multicolumnday)}/:day',
sticky: true,
deepStateRedirect: true,
views: {
@ -36,7 +36,8 @@
templateUrl: function($stateParams) {
// UI/Templates/SchedulerUI/UIxCalDayView.wox or
// UI/Templates/SchedulerUI/UIxCalWeekView.wox or
// UI/Templates/SchedulerUI/UIxCalMonthView.wox
// UI/Templates/SchedulerUI/UIxCalMonthView.wox or
// UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
return $stateParams.view + 'view?day=' + $stateParams.day;
},
controller: 'CalendarController',
@ -53,6 +54,11 @@
var now = new Date();
return '/calendar/day/' + now.getDayString();
});
$urlRouterProvider.when('/calendar/multicolumnday', function() {
// If no date is specified, show today
var now = new Date();
return '/calendar/multicolumnday/' + now.getDayString();
});
$urlRouterProvider.when('/calendar/week', function() {
// If no date is specified, show today's week
var now = new Date();
@ -80,18 +86,31 @@
/**
* @ngInject
*/
stateEventsBlocks.$inject = ['$stateParams', 'Component'];
function stateEventsBlocks($stateParams, Component) {
return Component.$eventsBlocksForView($stateParams.view, $stateParams.day.asDate());
stateEventsBlocks.$inject = ['$stateParams', 'Component', 'Calendar', ];
function stateEventsBlocks($stateParams, Component, Calendar) {
// See CalendarController.js
return Component.$eventsBlocksForView($stateParams.view, $stateParams.day.asDate())
.then(function(views) {
_.forEach(views, function(view) {
if (view.id) {
view.calendar = new Calendar({ id: view.id, name: view.calendarName });
}
});
return views;
});
}
/**
* @ngInject
*/
runBlock.$inject = ['$rootScope', '$location', 'Preferences'];
function runBlock($rootScope, $location, Preferences) {
runBlock.$inject = ['$rootScope', '$log', '$location', 'Preferences'];
function runBlock($rootScope, $log, $location, Preferences) {
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
$log.error(error);
$state.go('calendar');
});
$rootScope.$on('$routeChangeError', function(event, current, previous, rejection) {
console.error(event, current, previous, rejection);
$log.error(event, current, previous, rejection);
});
if ($location.url().length === 0) {
// Restore user's last view

43
UI/WebServerResources/scss/views/SchedulerUI.scss
View File

@ -8,6 +8,7 @@ $scrollbar_width: 16px;
* - SchedulerUI/UIxCalWeekView.wox
* - SchedulerUI/UIxCalDayTable.wox
* - SchedulerUI/UIxCalMonthView.wox
* - SchedulerUI/UIxCalMulticolumnDayView.wox
*/
[ui-view=calendars] {
@ -57,7 +58,7 @@ $scrollbar_width: 16px;
// The days labels appear in the toolbar
md-toolbar {
&.daysView {
&.daysView, &.monthView {
overflow: hidden;
z-index: $z-index-toolbar - 1;
.days {
@ -70,7 +71,7 @@ $scrollbar_width: 16px;
}
}
}
&[sg-view=dayview] {
&[sg-view$=dayview] {
.dayLabels {
.day {
display: flex;
@ -123,9 +124,10 @@ $scrollbar_width: 16px;
text-overflow: ellipsis;
white-space: nowrap;
font-size: $sg-font-size-2;
padding: 2px;
min-height: $sg-font-size-2 + 4px;
//font-weight: $sg-font-light;
overflow: hidden;
padding: 2px;
}
// The left column of hours
@ -161,7 +163,7 @@ $scrollbar_width: 16px;
.sg-event {
font-size: $sg-font-size-2;
&, md-icon {
color: #fff;
color: #fff !important; // Overwrite dynamic CSS theme
}
.material-icons {
font-size: $sg-font-size-2;
@ -191,10 +193,41 @@ $scrollbar_width: 16px;
}
}
// Multicolumn day cell that contains the calendar name
.multicolumnDay {
font-size: $subhead-font-size-base;
font-weight: $sg-font-light;
overflow: hidden;
max-height: $subhead-font-size-base * 3;
padding-left: 2px;
margin-right: 2px;
}
.monthView {
md-grid-tile {
border: 1px solid sg-color($sogoPaper, 300);
//border: 1px solid sg-color($sogoPaper, 300);
border-right: 1px solid rgb(242, 242, 242);
border-bottom: 1px solid rgb(242, 242, 242);
overflow: auto;
&.dayOfAnotherMonth {
background-color: rgb(250, 250, 250);
//border-color: #ddd;
.sg-calendar-tile-header {
color: rgb(221, 221, 221) !important; // Overwrite dynamic CSS theme
}
}
&.dayOfToday {
.sg-calendar-tile-header {
border-radius: 50%;
color: #fff;
display: inline;
font-weight: 600;
margin-right: auto;
}
}
}
md-content {
background-color: transparent; // See the grid tile background color
}
.sg-event {
position: relative;