diff --git a/src/app/features/calendar/calendar.component.scss b/src/app/features/calendar/calendar.component.scss
index fa3cb451..5f2595e3 100644
--- a/src/app/features/calendar/calendar.component.scss
+++ b/src/app/features/calendar/calendar.component.scss
@@ -29,11 +29,39 @@ $cal-gap: 15px;
justify-content: center;
white-space: nowrap;
- span {
- padding: 0 20px;
- pointer-events: none;
- font-weight: 700;
- font-size: 32px;
+ .date-picker {
+ display: flex;
+ gap: 10px;
+
+ mat-select.cdk-focused {
+ ::ng-deep .mat-mdc-select-value-text {
+ color: $primary-1;
+ }
+ }
+
+ ::ng-deep {
+ .mat-mdc-form-field-subscript-wrapper,
+ .mdc-floating-label,
+ .mat-mdc-select-arrow-wrapper {
+ display: none;
+ }
+ .mat-mdc-form-field-infix {
+ width: auto;
+ }
+ .mdc-notched-outline__leading,
+ .mdc-notched-outline__notch,
+ .mdc-notched-outline__trailing {
+ border: none;
+ }
+ .mat-mdc-select-value-text {
+ font-weight: 700;
+ font-size: 32px;
+ line-height: 1;
+ }
+ .mat-mdc-text-field-wrapper {
+ padding: 0;
+ }
+ }
}
}
@@ -91,6 +119,7 @@ $cal-gap: 15px;
border-radius: 20px;
background-color: $neutral-100;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+ padding: 15px 0;
.day.inactive {
color: #bfbfbf;
@@ -138,4 +167,4 @@ app-calendar-events {
align-self: flex-end;
gap: 16px;
}
-}
+}
\ No newline at end of file
diff --git a/src/app/features/calendar/calendar.component.ts b/src/app/features/calendar/calendar.component.ts
index b3dcfc8c..39fa6d6c 100644
--- a/src/app/features/calendar/calendar.component.ts
+++ b/src/app/features/calendar/calendar.component.ts
@@ -20,6 +20,8 @@ import {
isSunday,
isSameDay,
format,
+ getMonth,
+ getYear,
} from 'date-fns';
import { ICalendarDate } from './interfaces/calendar-date.interface';
import { ICalendarWeekDay } from './interfaces/calendar-weekday.interface';
@@ -44,12 +46,18 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy {
@Input() date: Date = new Date(); // The current date for our view.
@Input() events: Event[] = []; // All events for the calendar.
@Input() loading: boolean = false; //
+ @Input() minYear: number = 1900; // The earliest year in the year select drop down
+ @Input() maxYear: number = getYear(new Date()) + 1; // The latest year in the year select drop down
dates: ICalendarDate[] = []; // The days for the current view.
datesPaddingPre: ICalendarDate[] = []; // Any days before the month that should be rendered.
datesPaddingPost: ICalendarDate[] = []; // Any days after the month that should be rendered.
weekdays: ICalendarWeekDay[] = [];
+ selectedMonth: number = getMonth(this.date);
+ selectedYear: number = getYear(this.date);
+ years: number[] = [];
+
searchActive: boolean = false;
eventFormActive: boolean = false;
@@ -106,6 +114,7 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy {
// Build out the calendar
this.prevWeekdayFormat = this.buildWeekDays();
+ this.buildYearSelectOptions();
this.buildView();
// Set today as the active day in the calendar
@@ -126,7 +135,8 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy {
}
ngOnDestroy(): void {
- if (this.resizeSub) this.resizeSub.unsubscribe();
+ if (this.resizeSub)
+ this.resizeSub.unsubscribe();
}
navigateCalendar(interval: number = 1, clickedDay: ICalendarDate | undefined = undefined): void {
@@ -209,6 +219,15 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy {
this.searchActive = !this.searchActive;
};
+ dateSelectChange(): void {
+ this.date = new Date(this.selectedYear, this.selectedMonth);
+ this.buildView();
+ }
+
+ monthIndexToDate(month: number): Date {
+ return new Date(0, month);
+ }
+
private buildWeekDays(): WeekdayFormat {
const today = new Date();
const format = this.elementRef.nativeElement.offsetWidth < 600 ? WeekdayFormat.Short : WeekdayFormat.Full;
@@ -230,6 +249,9 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy {
this.dates = [];
this.activeDayIndex = -1;
+ this.selectedMonth = getMonth(this.date);
+ this.selectedYear = getYear(this.date);
+
// Create days for each day of the month
const daysMonth = getDaysInMonth(this.date);
for (let i = 0; i < daysMonth; i++) {
@@ -326,6 +348,13 @@ export class CalendarComponent implements OnInit, OnChanges, OnDestroy {
this.eventFormData.eventEndDate = this.eventFormData.eventStartDate;
}
}
+
+ private buildYearSelectOptions(): void {
+ this.years = [];
+ for (let i = this.minYear; i <= this.maxYear; i++) {
+ this.years.push(i);
+ }
+ }
}
enum WeekdayFormat {
diff --git a/src/app/features/calendar/calendar.module.ts b/src/app/features/calendar/calendar.module.ts
index 5d82d885..7212329c 100644
--- a/src/app/features/calendar/calendar.module.ts
+++ b/src/app/features/calendar/calendar.module.ts
@@ -10,11 +10,12 @@ import { EventsModule } from '../events/events.module';
import { MatCardModule } from '@angular/material/card';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSelectModule } from '@angular/material/select';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [CalendarComponent, CalendarDayComponent, CalendarEventsComponent, CalendarSearchComponent],
- imports: [CommonModule, SharedModule, FormsModule, ReactiveFormsModule, EventsModule, MatCardModule, MatExpansionModule, MatSlideToggleModule],
+ imports: [CommonModule, SharedModule, FormsModule, ReactiveFormsModule, EventsModule, MatCardModule, MatExpansionModule, MatSlideToggleModule, MatSelectModule],
exports: [CalendarComponent],
})
export class CalendarModule {}
diff --git a/src/app/features/calendar/components/calendar-events/calendar-events.component.html b/src/app/features/calendar/components/calendar-events/calendar-events.component.html
index 07087b66..e8356cfe 100644
--- a/src/app/features/calendar/components/calendar-events/calendar-events.component.html
+++ b/src/app/features/calendar/components/calendar-events/calendar-events.component.html
@@ -1,6 +1,17 @@
- {{ isToday(calendarDate.date) ? "Today's Events" : 'Events on ' + (calendarDate.date | localizedDate) }}
+ {{ isToday(calendarDate.date) ? "Today's Events" : 'Events on ' + (calendarDate.date | localizedDate) }}
+
+
+
+
+
@@ -47,7 +58,9 @@
{{ event.eventType }}
- {{ event.location.address }}, {{ event.location.city }}, {{ event.location.province }}
+
+ {{ event.location.address }}, {{ event.location.city }}, {{ event.location.province }}
+