diff --git a/frontend/src/app/app.html b/frontend/src/app/app.html
index 740b775..f39b014 100644
--- a/frontend/src/app/app.html
+++ b/frontend/src/app/app.html
@@ -18,18 +18,18 @@
diff --git a/frontend/src/app/app.scss b/frontend/src/app/app.scss
index e69de29..a4fb8e0 100644
--- a/frontend/src/app/app.scss
+++ b/frontend/src/app/app.scss
@@ -0,0 +1,22 @@
+:host{
+
+ a{
+ cursor: pointer;
+ padding: 10px;
+ border-radius: 10px;
+ border: 1px solid rgba(0,0,0,0.08);
+ display: inline-block;
+ margin-bottom: 10px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+ color: #000;
+ &.active{
+ background-color: #d4ebff;
+ border-color: #007bff;
+ color: #007bff;
+ }
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/app/app.ts b/frontend/src/app/app.ts
index c6ef36f..517848c 100644
--- a/frontend/src/app/app.ts
+++ b/frontend/src/app/app.ts
@@ -1,5 +1,5 @@
import { Component, signal } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { RouterOutlet, RouterLink } from '@angular/router';
import { CalendarPreviousViewDirective, CalendarTodayDirective, CalendarNextViewDirective, CalendarMonthViewComponent, CalendarWeekViewComponent, CalendarDayViewComponent, CalendarDatePipe, DateAdapter, provideCalendar } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/moment';
import * as moment from 'moment';
@@ -10,7 +10,7 @@ export function momentAdapterFactory() {
@Component({
selector: 'app-root',
- imports: [RouterOutlet, CalendarPreviousViewDirective, CalendarTodayDirective, CalendarNextViewDirective, CalendarMonthViewComponent, CalendarWeekViewComponent, CalendarDayViewComponent, CalendarDatePipe],
+ imports: [RouterOutlet, RouterLink, CalendarPreviousViewDirective, CalendarTodayDirective, CalendarNextViewDirective, CalendarMonthViewComponent, CalendarWeekViewComponent, CalendarDayViewComponent, CalendarDatePipe],
templateUrl: './app.html',
styleUrl: './app.scss',
providers: [
diff --git a/frontend/src/app/pages/agenda/calendar/calendar.ts b/frontend/src/app/pages/agenda/calendar/calendar.ts
new file mode 100644
index 0000000..0c8d45a
--- /dev/null
+++ b/frontend/src/app/pages/agenda/calendar/calendar.ts
@@ -0,0 +1,160 @@
+import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export interface CalendarEvent {
+ id: string;
+ title: string;
+ start: Date;
+ end?: Date;
+ description?: string;
+ location?: string;
+ type?: string;
+ properties?: any;
+}
+
+@Component({
+ selector: 'app-calendar',
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './calendar.html',
+ styleUrl: './calendar.scss'
+})
+export class CalendarComponent implements OnInit, OnDestroy {
+ @Input() events: CalendarEvent[] = [];
+ @Output() eventClick = new EventEmitter();
+ @Output() dateClick = new EventEmitter();
+
+ currentDate = new Date();
+ selectedDate: Date | null = null;
+ selectedEvent: CalendarEvent | null = null;
+ showEventDetails = false;
+
+ // Configuration du calendrier
+ weekDays = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
+ months = [
+ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
+ 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
+ ];
+
+ calendarDays: Date[] = [];
+ currentMonth: number;
+ currentYear: number;
+
+ constructor() {
+ this.currentMonth = this.currentDate.getMonth();
+ this.currentYear = this.currentDate.getFullYear();
+ }
+
+ ngOnInit() {
+ this.generateCalendar();
+ }
+
+ ngOnDestroy() {
+ // Cleanup si nécessaire
+ }
+
+ generateCalendar() {
+ this.calendarDays = [];
+
+ // Premier jour du mois
+ const firstDay = new Date(this.currentYear, this.currentMonth, 1);
+ // Dernier jour du mois
+ const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0);
+
+ // Commencer le lundi de la semaine qui contient le premier jour
+ const startDate = new Date(firstDay);
+ const dayOfWeek = firstDay.getDay();
+ const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek; // Lundi = 1
+ startDate.setDate(firstDay.getDate() + mondayOffset);
+
+ // Générer 42 jours (6 semaines)
+ for (let i = 0; i < 42; i++) {
+ const date = new Date(startDate);
+ date.setDate(startDate.getDate() + i);
+ this.calendarDays.push(date);
+ }
+ }
+
+ getEventsForDate(date: Date): CalendarEvent[] {
+ return this.events.filter(event => {
+ const eventDate = new Date(event.start);
+ return eventDate.toDateString() === date.toDateString();
+ });
+ }
+
+ getEventCountForDate(date: Date): number {
+ return this.getEventsForDate(date).length;
+ }
+
+ isToday(date: Date): boolean {
+ const today = new Date();
+ return date.toDateString() === today.toDateString();
+ }
+
+ isCurrentMonth(date: Date): boolean {
+ return date.getMonth() === this.currentMonth;
+ }
+
+ isWeekend(date: Date): boolean {
+ const day = date.getDay();
+ return day === 0 || day === 6; // Dimanche ou Samedi
+ }
+
+ onDateClick(date: Date) {
+ this.selectedDate = date;
+ this.dateClick.emit(date);
+ }
+
+ onEventClick(event: CalendarEvent, $event: Event) {
+ $event.stopPropagation();
+ this.selectedEvent = event;
+ this.showEventDetails = true;
+ this.eventClick.emit(event);
+ }
+
+ closeEventDetails() {
+ this.showEventDetails = false;
+ this.selectedEvent = null;
+ }
+
+ previousMonth() {
+ this.currentMonth--;
+ if (this.currentMonth < 0) {
+ this.currentMonth = 11;
+ this.currentYear--;
+ }
+ this.generateCalendar();
+ }
+
+ nextMonth() {
+ this.currentMonth++;
+ if (this.currentMonth > 11) {
+ this.currentMonth = 0;
+ this.currentYear++;
+ }
+ this.generateCalendar();
+ }
+
+ goToToday() {
+ this.currentDate = new Date();
+ this.currentMonth = this.currentDate.getMonth();
+ this.currentYear = this.currentDate.getFullYear();
+ this.generateCalendar();
+ }
+
+ getMonthName(): string {
+ return this.months[this.currentMonth];
+ }
+
+ getTotalEventsCount(): number {
+ return this.events.length;
+ }
+
+ getEventsThisMonth(): number {
+ return this.events.filter(event => {
+ const eventDate = new Date(event.start);
+ return eventDate.getMonth() === this.currentMonth &&
+ eventDate.getFullYear() === this.currentYear;
+ }).length;
+ }
+}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index b4abcb3..c8e21e9 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -183,4 +183,16 @@ nav{
background-color: #f0f0f0;
}
}
+}
+
+.row, .filters, .controls{
+ input{
+ display: block;
+ max-width: 93%;
+ }
+}
+
+.presets{
+ max-height: 300px;
+ overflow: auto;
}
\ No newline at end of file