Merge branch 'devAldrick' of ITTEC/PlataformaEducativaWeb2 into develop

Front/src/app/modules/Padres/padres.module.ts

@@ -9,7 +9,7 @@ import { FullCalendarModule } from '@fullcalendar/angular';
 import { MaterialModule } from '../../material/material.module';
 import { SharedModule } from '../../shared/shared.module';
 import { CardsHijosComponent } from './pages/cards-hijos/cards-hijos.component';
-import { CalendarComponent } from './pages/calendar/calendar.component';
+import { CalendarComponent, EventInfoModal } from './pages/calendar/calendar.component';
 import { registroAlumnoComponent } from './pages/registroAlumno/registroAlumno.component';
 import { RegistroAdComponent, registroComponent } from './pages/Registro/registro.component';
 import { CircularHijosComponent } from './pages/circularHijos/circular-hijos.component';
@@ -27,6 +27,7 @@ import { TareasHijosComponent } from './pages/tareas-hijos/tareas-hijos.componen
     MainComponent,
     CardsHijosComponent,
     CalendarComponent,
+    EventInfoModal,
     ModalCircular,
     registroAlumnoComponent,
     registroComponent,

Front/src/app/modules/Padres/pages/calendar/calendar.component.ts

@@ -1,10 +1,10 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { CalendarOptions } from '@fullcalendar/core';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import timeGridPlugin from '@fullcalendar/timegrid'
 import listPlugin from '@fullcalendar/list';
-import { MatDialog } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 
 
 import Swal from 'sweetalert2';
@@ -47,7 +47,8 @@ export class CalendarComponent implements OnInit {
     selectMirror: true,
     dayMaxEvents: true,
     plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
-    events: []
+    events: [],
+    eventClick: this.handleEventClick.bind(this)
   };
 
   constructor(
@@ -62,6 +63,21 @@ export class CalendarComponent implements OnInit {
     this.getEvents();
   }
 
+  handleEventClick(info: any) {
+    const event = info.event;
+    this.dialog.open(EventInfoModal, {
+      width: '500px',
+      data: {
+        title: event.title,
+        description: event.extendedProps.description,
+        start: event.start,
+        end: event.end,
+        color: event.backgroundColor,
+        textColor: event.textColor
+      }
+    });
+  }
+
   getEvents() {
     this.eventoService.obtenerEventos().subscribe((response: any) => {
       const events = response.map((event: any) => ({
@@ -82,4 +98,25 @@ export class CalendarComponent implements OnInit {
   }
 
   
+}
+
+@Component({
+  selector: 'app-event-info-modal',
+  template: `
+  <h2 mat-dialog-title [style.color]="data.color">{{ data.title }}</h2>
+  <mat-dialog-content>
+    <p [innerHTML]="data.description || 'Sin descripción disponible.'"></p>
+    <p><strong>Inicio:</strong> {{ data.start | date: 'medium' }}</p>
+    <p><strong>Fin:</strong> {{ data.end | date: 'medium' }}</p>
+  </mat-dialog-content>
+  <mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close color="primary">Cerrar</button>
+  </mat-dialog-actions>
+  `,
+})
+export class EventInfoModal {
+  constructor(
+    public dialogRef: MatDialogRef<EventInfoModal>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {}
 }