feat: add calendar component in "Profesor" module

Front/src/app/modules/Profesor/pages/calendar/calendar.component.css

@@ -0,0 +1,141 @@
+.centrar {
+    margin-top: 2%;
+    display: flex;
+    justify-content: center;
+}
+
+.fondo {
+    background-color: #ebac3f;
+    display: inline-block;
+    padding: 1px 70px;
+    border-radius: 10px;
+}
+
+.content {
+    font-weight: 500;
+    font-size: 22px;
+    color: white;
+    font-family: Roboto;
+}
+
+.container-col {
+    display: flex;
+    flex-direction: column;
+    padding-left: 65px;
+    padding-right: 65px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.container {
+    background-color: white;
+    padding: 20px;
+}
+
+.calendario {
+    height: 72vh;
+    font-family: "Serenity Light";
+
+}
+
+.full-calendar {
+    height: 100%;
+}
+
+.goBack-button {
+    margin-top: 30px;
+    width: 50px;
+    height: 50px;
+    border-radius: 100px;
+    border: none;
+    background-color: #ebac3f;
+    cursor: pointer !important;
+    z-index: 1;
+}
+
+.goBack-button:hover {
+    margin-top: 30px;
+    width: 50px;
+    height: 50px;
+    border-radius: 100px;
+    border: none;
+    background-color: #d89e3a;
+    cursor: pointer !important;
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+}
+
+@media only screen and (max-width: 600px) {
+
+    .header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-left: -50px;
+        margin-bottom: 5%;
+        margin-top: 10%;
+        width: 140%;
+    }
+
+    .goBack-button {
+        margin-top: 30px;
+        width: 50px;
+        height: 50px;
+        border-radius: 100px;
+        border: none;
+        background-color: #ebac3f;
+        cursor: pointer !important;
+        z-index: 1;
+    }
+
+    .centrar {
+        width: auto;
+        margin-top: 10%;
+        margin-left: 25px;
+        display: flex;
+        justify-content: center;
+    }
+
+
+    .fondo {
+        background-color: #ebac3f;
+        display: inline-block;
+        padding: 1px 30px;
+        border-radius: 10px;
+    }
+
+    .content {
+        margin-bottom: 0;
+        margin-top: 0;
+
+        font-weight: 500;
+        font-size: 24px;
+        color: white;
+        font-family: "Serenity Medium";
+        text-align: center;
+
+    }
+
+    .container {
+        margin-left: -55%;
+        margin-right: -55px;
+        background-color: white;
+        padding: 20px;
+        width: 165%;
+    }
+
+    .calendario {
+        overflow-x: scroll;
+        white-space: nowrap;
+        height: 72vh;
+        font-family: "Serenity Light";
+    }
+
+    .full-calendar {
+        width: 160%;
+        height: 100%;
+    }
+}

Front/src/app/modules/Profesor/pages/calendar/calendar.component.html

@@ -0,0 +1,16 @@
+<div class="container-col fadeIn">
+    <div class="centrar">
+        <div class="fondo" [style.background-color]="primerColorTitulos ? primerColorTitulos : '#e89a20'">
+            <p class="content">Calendario Escolar</p>
+        </div>
+    </div>
+
+    <div class="mt-20">
+        <div class="container mat-elevation-z8">
+            <div class="calendario">
+                
+                <full-calendar class="full-calendar" [options]="calendarOptions"></full-calendar>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,119 @@
+import { Component, Inject, OnInit } 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 { CalendarService } from '../../../Administrador/services/calendar.service';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { EventoServiceService } from '../../../Administrador/services/evento-service.service';
+
+
+@Component({
+  selector: 'app-calendar',
+  templateUrl: './calendar.component.html',
+  styleUrl: './calendar.component.css'
+})
+export class CalendarComponent implements OnInit {
+  public valor: string = localStorage.getItem('vista') || '';
+  public fecha: string = localStorage.getItem('dia') || '';
+  public primerColorTitulos: string = '';
+  public calendarOptions: CalendarOptions = {
+    initialDate: this.fecha,
+    locale: 'es',
+    weekNumbers: true,
+    weekText: '',
+    buttonText: {
+      today: 'Hoy',
+      timeGridWeek: 'Semana',
+      dayGridMonth: 'Mes',
+      listWeek: 'Agenda',
+      dayGridDay: 'Día'
+    },
+    headerToolbar: {
+      start: 'today prev,next',
+      center: 'title',
+      end: 'dayGridMonth,timeGridWeek,dayGridDay,listWeek',
+    },
+    initialView: this.valor,
+    navLinks: true,
+    editable: false,
+    selectable: true,
+    selectMirror: true,
+    dayMaxEvents: true,
+    plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
+    events: [],
+    eventClick: this.handleEventClick.bind(this)
+  };
+
+
+
+  constructor(
+    private calendarService: CalendarService,
+    public dialog: MatDialog,
+    private eventoService: EventoServiceService
+  ) { }
+
+  ngOnInit() {
+    let primerColorTitulos = localStorage.getItem('primerColorTitulos') || ''
+    this.primerColorTitulos = primerColorTitulos;
+    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) => ({
+        id: event.idEvento,
+        title: event.titulo,
+        start: new Date(event.fechaInicio).toISOString(),
+        end: new Date(event.fechaFin).toISOString(),
+        description: event.descripcion,
+        backgroundColor: event.colorEvento,
+        textColor: event.colorTexto || '#FFFFFF'
+      }));
+
+      this.calendarOptions.events = events;
+      console.log(this.calendarOptions.events);
+
+
+    });
+  }
+
+  
+}
+
+@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
+  ) {}
+}

Front/src/app/modules/Profesor/pages/main/main.component.html

@@ -28,7 +28,7 @@
         <section class="mitad">
             <header>
                 <div class="title-section">
-                    <div class="fondo-medio-inicio cursor-pointer" routerLink="/homeAdmin/calendar"
+                    <div class="fondo-medio-inicio cursor-pointer" routerLink="/homeProfe/calendar"
                         [style.background-color]="link">
                         <p class="semana" (click)="calendarView('timeGridWeek')">Semana {{result}}</p>
                     </div>
@@ -36,7 +36,7 @@
                         <img class="img" [src]="['assets/img/Calendario.png']" alt="">
                         <span class="card-tittle" [style.color]="color">Calendario Escolar</span>
                     </div>
-                    <div class="fondo-medio-final cursor-pointer" routerLink="/homeAdmin/calendar"
+                    <div class="fondo-medio-final cursor-pointer" routerLink="/homeProfe/calendar"
                         [style.background-color]="link">
                         <p class="semana" (click)="calendarView('dayGridMonth')">{{currentMonth | titlecase}}
                             {{currentYear}}</p>
@@ -50,7 +50,7 @@
             <article class="card-content mx-auto" *ngIf="!isLoadingEvents;">
                 <div class="card-day flex-col items-center" *ngFor="let day of weekDays"
                     [ngClass]="{'d-none': day.completeDate !== today}"
-                    (click)="calendarView('dayGridDay'); selectedDay(day.completeDate)" routerLink="/homeAdmin/calendar"
+                    (click)="calendarView('dayGridDay'); selectedDay(day.completeDate)" routerLink="/homeProfe/calendar"
                     [style.border]="day.event != 'Sin Evento' ? '1px red solid' : '' ">
                     <span class="num-day">{{day.num}}</span>
                     <span class="day ">{{day.day}}</span>
@@ -62,7 +62,7 @@
 
             <footer class="justify-end">
                 <button [style.background-color]="link" class="calendar-button items-center justify-center"
-                    (click)="calendarView('dayGridMonth')" routerLink="/homeAdmin/calendar">
+                    (click)="calendarView('dayGridMonth')" routerLink="/homeProfe/calendar">
                     <mat-icon class="icon">calendar_month</mat-icon>
                 </button>
             </footer>

Front/src/app/modules/Profesor/profesor-routing.module.ts

@@ -9,6 +9,7 @@ import { CursoMateriaComponent } from "./pages/curso-materia/curso-materia.compo
 import { AsistenciaComponent } from "./pages/asistencia/asistencia.component";
 import { RegistroCalificacionesComponent } from "./pages/registroCalificaciones/registro-calificaciones.component";
 import { TareasComponent } from "./pages/tareas/tareas.component";
+import { CalendarComponent } from "./pages/calendar/calendar.component";
 
 
 
@@ -24,6 +25,7 @@ const routes: Routes = [
             { path: 'centroRecursos', component: CentroRecursosComponent },
             { path: 'cursoMateria/:id', component: CursoMateriaComponent },
             { path: 'registroCalificaciones', component: RegistroCalificacionesComponent },
+            { path: 'calendar', component: CalendarComponent },
 
             //     { path: 'calendar', component: CalendarComponent },
             //     {path:'registroAlumno', component: registroAlumnoComponent},

Front/src/app/modules/Profesor/profesor.module.ts

@@ -19,6 +19,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatTabsModule } from '@angular/material/tabs';
 import { NgxEditorModule } from 'ngx-editor';
+import { CalendarComponent, EventInfoModal } from './pages/calendar/calendar.component';
+import { FullCalendarModule } from '@fullcalendar/angular';
 
 
 
@@ -36,7 +38,9 @@ import { NgxEditorModule } from 'ngx-editor';
     ModalLista,
     RegistroCalificacionesComponent,
     TareasComponent,
-    ModalTarea
+    ModalTarea,
+    CalendarComponent,
+    EventInfoModal
   ],
   imports: [
     MaterialModule,
@@ -51,6 +55,7 @@ import { NgxEditorModule } from 'ngx-editor';
     MatButtonModule,
     MatCheckboxModule,
     MatTabsModule,
+    FullCalendarModule,
     NgxEditorModule.forRoot({
       locals: {
         // menu