|
|
@@ -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
|
|
|
+ ) {}
|
|
|
+}
|
EmilianoChavarria