-
+
- 
{{ event.timestart * 1000 | coreFormatDate: timeFormat }}
+
{{event.name}}
diff --git a/src/addon/calendar/components/calendar/calendar.scss b/src/addon/calendar/components/calendar/calendar.scss
index 278e56bcf..ff2d77c97 100644
--- a/src/addon/calendar/components/calendar/calendar.scss
+++ b/src/addon/calendar/components/calendar/calendar.scss
@@ -32,17 +32,34 @@ ion-app.app-root addon-calendar-calendar {
@include border-end(0, null, null);
@include padding(null, 8px, null, null);
}
- .addon-calendar-day-number {
- height: 24px;
- line-height: 24px;
- width: max-content;
- min-width: 24px;
- text-align: center;
- font-weight: 500;
- display: inline-block;
- margin: 3px;
+
+ &.addon-calendar-event-past-day > .addon-calendar-dot-types,
+ &.addon-calendar-event-past-day > .addon-calendar-day-events {
+ opacity: 0.5;
}
- &.today .addon-calendar-day-number {
+
+ .addon-calendar-day-number {
+ margin: 0;
+
+ span {
+ line-height: 24px;
+ font-weight: 500;
+ display: inline-block;
+ margin: 3px;
+ width: max-content;
+ width: 24px;
+ height: 24px;
+ text-align: center;
+ }
+ }
+
+ @include media-breakpoint-up(md) {
+ .addon-calendar-day-number {
+ text-align: left;
+ }
+ }
+
+ &.today .addon-calendar-day-number span {
background-color: $calendar-today-bgcolor;
color: $calendar-today-color;
@@ -58,6 +75,10 @@ ion-app.app-root addon-calendar-calendar {
overflow: hidden;
white-space: nowrap;
+ &.addon-calendar-event-past {
+ opacity: 0.5;
+ }
+
.addon-calendar-event-name {
font-weight: 500;
}
@@ -81,7 +102,6 @@ ion-app.app-root addon-calendar-calendar {
}
.addon-calendar-weekday {
- color: $gray-dark;
border-bottom: 1px solid $list-md-border-color;
}
@@ -130,6 +150,6 @@ ion-app.app-root addon-calendar-calendar {
width: 16px;
height: 16px;
display: inline-block;
- vertical-align: middle;
+ vertical-align: bottom;
}
}
\ No newline at end of file
diff --git a/src/addon/calendar/components/calendar/calendar.ts b/src/addon/calendar/components/calendar/calendar.ts
index a620fe6ee..985f284c8 100644
--- a/src/addon/calendar/components/calendar/calendar.ts
+++ b/src/addon/calendar/components/calendar/calendar.ts
@@ -48,6 +48,7 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
loaded = false;
timeFormat: string;
isCurrentMonth: boolean;
+ isPastMonth: boolean;
protected year: number;
protected month: number;
@@ -57,6 +58,7 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
protected offlineEvents: {[monthId: string]: {[day: number]: any[]}} = {}; // Offline events classified in month & day.
protected offlineEditedEventsIds = []; // IDs of events edited in offline.
protected deletedEvents = []; // Events deleted in offline.
+ protected currentTime: number;
// Observers.
protected undeleteEventObserver: any;
@@ -200,6 +202,28 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
this.weekDays = this.calendarProvider.getWeekDays(result.daynames[0].dayno);
this.weeks = result.weeks;
+ this.calculateIsCurrentMonth();
+
+ if (this.isCurrentMonth) {
+ let isPast = true;
+ this.weeks.forEach((week) => {
+ week.days.some((day) => {
+ day.ispast = isPast && !day.istoday;
+ isPast = day.ispast;
+
+ if (day.istoday) {
+ day.events.forEach((event) => {
+ event.ispast = this.isEventPast(event);
+ });
+
+ return true;
+ }
+
+ return day.istoday;
+ });
+ });
+ }
+
// Merge the online events with offline data.
this.mergeEvents();
@@ -288,7 +312,6 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
this.decreaseMonth();
}).finally(() => {
- this.calculateIsCurrentMonth();
this.loaded = true;
});
}
@@ -305,7 +328,6 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
this.increaseMonth();
}).finally(() => {
- this.calculateIsCurrentMonth();
this.loaded = true;
});
}
@@ -336,7 +358,10 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
calculateIsCurrentMonth(): void {
const now = new Date();
+ this.currentTime = this.timeUtils.timestamp();
+
this.isCurrentMonth = this.year == now.getFullYear() && this.month == now.getMonth() + 1;
+ this.isPastMonth = this.year < now.getFullYear() || (this.year == now.getFullYear() && this.month < now.getMonth() + 1);
}
/**
@@ -466,6 +491,15 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
});
}
+ /**
+ * Returns if the event is in the past or not.
+ * @param {any} event Event object.
+ * @return {boolean} True if it's in the past.
+ */
+ isEventPast(event: any): boolean {
+ return (event.timestart + event.timeduration) < this.currentTime;
+ }
+
/**
* Component destroyed.
*/
diff --git a/src/addon/calendar/lang/en.json b/src/addon/calendar/lang/en.json
index be2bab15a..ea79d56e5 100644
--- a/src/addon/calendar/lang/en.json
+++ b/src/addon/calendar/lang/en.json
@@ -6,6 +6,7 @@
"calendarreminders": "Calendar reminders",
"confirmeventdelete": "Are you sure you want to delete the \"{{$a}}\" event?",
"confirmeventseriesdelete": "The \"{{$a.name}}\" event is part of a series. Do you want to delete just this event, or all {{$a.count}} events in the series?",
+ "currentmonth": "Current Month",
"daynext": "Next day",
"dayprev": "Previous day",
"defaultnotificationtime": "Default notification time",
diff --git a/src/addon/calendar/pages/day/day.html b/src/addon/calendar/pages/day/day.html
index cec0955ac..9cfd3705a 100644
--- a/src/addon/calendar/pages/day/day.html
+++ b/src/addon/calendar/pages/day/day.html
@@ -2,13 +2,12 @@
{{ 'addon.calendar.calendarevents' | translate }}
-
+
@@ -49,7 +48,7 @@
-
+
@@ -62,7 +61,7 @@
{{ 'core.deletedoffline' | translate }}
-
+
diff --git a/src/addon/calendar/pages/day/day.ts b/src/addon/calendar/pages/day/day.ts
index 73202cfd3..cc930e728 100644
--- a/src/addon/calendar/pages/day/day.ts
+++ b/src/addon/calendar/pages/day/day.ts
@@ -51,6 +51,7 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
protected deletedEvents = []; // Events deleted in offline.
protected timeFormat: string;
protected currentMoment: moment.Moment;
+ protected currentTime: number;
// Observers.
protected newEventObserver: any;
@@ -74,6 +75,7 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
isOnline = false;
syncIcon: string;
isCurrentDay: boolean;
+ isPastDay: boolean;
constructor(localNotificationsProvider: CoreLocalNotificationsProvider,
navParams: NavParams,
@@ -308,9 +310,12 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
// Filter events by course.
this.filterEvents();
+ this.calculateIsCurrentDay();
+
// Re-calculate the formatted time so it uses the device date.
const dayTime = this.currentMoment.unix() * 1000;
this.events.forEach((event) => {
+ event.ispast = this.isPastDay || (this.isCurrentDay && this.isEventPast(event));
promises.push(this.calendarProvider.formatEventTime(event, this.timeFormat, true, dayTime).then((time) => {
event.formattedtime = time;
}));
@@ -555,7 +560,11 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
calculateIsCurrentDay(): void {
const now = new Date();
+ this.currentTime = this.timeUtils.timestamp();
+
this.isCurrentDay = this.year == now.getFullYear() && this.month == now.getMonth() + 1 && this.day == now.getDate();
+ this.isPastDay = this.year < now.getFullYear() || (this.year == now.getFullYear() && this.month < now.getMonth()) ||
+ (this.year == now.getFullYear() && this.month == now.getMonth() + 1 && this.day < now.getDate());
}
/**
@@ -600,7 +609,6 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
this.decreaseDay();
}).finally(() => {
- this.calculateIsCurrentDay();
this.loaded = true;
});
}
@@ -617,7 +625,6 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
this.increaseDay();
}).finally(() => {
- this.calculateIsCurrentDay();
this.loaded = true;
});
}
@@ -665,6 +672,15 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
return false;
}
+ /**
+ * Returns if the event is in the past or not.
+ * @param {any} event Event object.
+ * @return {boolean} True if it's in the past.
+ */
+ isEventPast(event: any): boolean {
+ return (event.timestart + event.timeduration) < this.currentTime;
+ }
+
/**
* Page destroyed.
*/
diff --git a/src/addon/calendar/pages/index/index.html b/src/addon/calendar/pages/index/index.html
index fc6386e36..d2d6d38b0 100644
--- a/src/addon/calendar/pages/index/index.html
+++ b/src/addon/calendar/pages/index/index.html
@@ -2,16 +2,13 @@
{{ (showCalendar ? 'addon.calendar.calendarevents' : 'addon.calendar.upcomingevents') | translate }}
-
-
+
+
diff --git a/src/addon/calendar/pages/index/index.scss b/src/addon/calendar/pages/index/index.scss
deleted file mode 100644
index 213b8abe5..000000000
--- a/src/addon/calendar/pages/index/index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-page-addon-calendar-index .toolbar-ios ion-title {
- @include padding-horizontal(null, 120px);
-}
\ No newline at end of file
diff --git a/src/addon/calendar/pages/list/list.html b/src/addon/calendar/pages/list/list.html
index bd5c848ad..2d85b3f1d 100644
--- a/src/addon/calendar/pages/list/list.html
+++ b/src/addon/calendar/pages/list/list.html
@@ -3,7 +3,8 @@
{{ 'addon.calendar.calendarevents' | translate }}
diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json
index 8c35aeb95..831223df1 100644
--- a/src/assets/lang/en.json
+++ b/src/assets/lang/en.json
@@ -90,6 +90,7 @@
"addon.calendar.calendarreminders": "Calendar reminders",
"addon.calendar.confirmeventdelete": "Are you sure you want to delete the \"{{$a}}\" event?",
"addon.calendar.confirmeventseriesdelete": "The \"{{$a.name}}\" event is part of a series. Do you want to delete just this event, or all {{$a.count}} events in the series?",
+ "addon.calendar.currentmonth": "Current Month",
"addon.calendar.daynext": "Next day",
"addon.calendar.dayprev": "Previous day",
"addon.calendar.defaultnotificationtime": "Default notification time",