Multicolumn day view
Restored multicolumn day view from v2. Month view as also been improved.pull/105/head
parent
d51bef162a
commit
45bc5a5368
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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]];
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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 });
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue