diff --git a/angular/src/app/appointment/appointment-calendar/appointment-calendar.component.html b/angular/src/app/appointment/appointment-calendar/appointment-calendar.component.html
index 3baf9e8..6a2a294 100644
--- a/angular/src/app/appointment/appointment-calendar/appointment-calendar.component.html
+++ b/angular/src/app/appointment/appointment-calendar/appointment-calendar.component.html
@@ -1,4 +1,4 @@
-
+
{
+ debugger
this.appointments = data.items;
this.updateCalendarEvents();
});
@@ -47,28 +49,67 @@ export class AppointmentCalendarComponent implements OnInit{
initialView: 'dayGridMonth',
plugins: [dayGridPlugin, interactionPlugin],
events: this.appointments.map(appointment => ({
- title: appointment.firstName + ' - ' + appointment.doctor,
- date: appointment.dateOfAppointment
+ id: appointment.id,
+ title: `${appointment.firstName} ${appointment.lastName}`,
+ date: this.combineDateTime(appointment.dateOfAppointment, appointment.timeOfAppointment),
})),
- dateClick: (arg) => this.handleDateClick(arg)
+ dateClick: arg => this.handleDateClick(arg),
+ eventClick: info => this.onEventClick(info),
+ eventContent: function(arg) {
+ return {
+ html: `
+ ${arg.event.title}
+
`
+ };
+ }
};
}
+ combineDateTime(dateStr: string, timeStr: string): string {
+ debugger
+ if (!timeStr) return dateStr;
+ const date = new Date(dateStr);
+ const [hours, minutes] = timeStr.split(':');
+ date.setHours(parseInt(hours, 10), parseInt(minutes, 10), 0);
+ return date.toISOString();
+ }
calendarOptions: CalendarOptions = {
initialView: 'dayGridMonth',
plugins: [dayGridPlugin, interactionPlugin],
- dateClick: (arg) => this.handleDateClick(arg),
+ dateClick: arg => this.handleDateClick(arg),
events: [
{ title: 'event 1', date: '2025-01-01' },
- { title: 'event 2', date: '2025-01-02' }
- ]
+ ],
};
-
+ closeDialog() {
+ debugger;
+ this.isModalVisible = false;
+ this.loadAppointments({
+ first: 0,
+ rows: 10,
+ sortField: 'id',
+ sortOrder: 1,
+ globalFilter: null,
+ });
+ }
handleDateClick(arg) {
+ debugger;
this.selectedDate = arg.dateStr;
this.isModalVisible = true;
+ this.isEditMode = false;
+
}
onModalClose() {
this.isModalVisible = false;
+ this.isEditMode = false;
+ this.appointmentIdToEdit = "";
+
+ }
+
+ onEventClick(info: any) {
+ debugger;
+ this.appointmentIdToEdit = info.event.id;
+ this.isEditMode = true;
+ this.isModalVisible = true;
}
}
diff --git a/angular/src/app/appointment/appointment-calendar/appointment-calendar.module.ts b/angular/src/app/appointment/appointment-calendar/appointment-calendar.module.ts
index a216975..abe8344 100644
--- a/angular/src/app/appointment/appointment-calendar/appointment-calendar.module.ts
+++ b/angular/src/app/appointment/appointment-calendar/appointment-calendar.module.ts
@@ -6,6 +6,7 @@ import { CalendarOptions } from '@fullcalendar/core'; // useful for typechecking
import dayGridPlugin from '@fullcalendar/daygrid';
import { AppointmentCalendarRoutingModule } from './appointment-calendar-routing.module';
import { AppointmentCalendarComponent } from './appointment-calendar.component';
+import { AppointmentDialogComponent } from '../appointment-dialog/appointment-dialog.component';
@NgModule({
@@ -16,7 +17,8 @@ import { AppointmentCalendarComponent } from './appointment-calendar.component';
CommonModule,
AppointmentCalendarRoutingModule,
RouterOutlet,
- FullCalendarModule
+ FullCalendarModule,
+ AppointmentDialogComponent
]
})
export class AppointmentCalendarModule { }
diff --git a/angular/src/app/appointment/appointment-dialog/appointment-dialog.component.html b/angular/src/app/appointment/appointment-dialog/appointment-dialog.component.html
index 7edea7c..9a22b72 100644
--- a/angular/src/app/appointment/appointment-dialog/appointment-dialog.component.html
+++ b/angular/src/app/appointment/appointment-dialog/appointment-dialog.component.html
@@ -9,8 +9,10 @@