Hola a todos, hoy vamos a ver como integrar fullcalendar en Angular.
Fullcalendar nos permite tener un calendario parecido a google calendar para cualquiera de nuestros proyectos.
En este tutorial, lo vamos a hacer en angular 12.
Creamos nuestro proyecto:
Para tenerlo en Angular, vamos a instalar las siguientes dependencias:
Primeng y primeicons, recomiendo que coincida con la versión de Angular, en nuestro caso la 12:
@fullcalendar, vamos a instalar la versión 4.4.2 que es estable, algunas nuevas versiones han dado problemas bastantes raros:
Instalaremos la versión core y 3 plugins: daygrid, timegrid e interaction.
Ahora en nuestro app.module, debemos importar el módulo FullCalendarModule en imports.
En angular.json en styles añadiremos las siguientes líneas:
«node_modules/primeng/resources/primeng.min.css»,
«node_modules/primeng/resources/themes/nova/theme.css»,
«node_modules/primeicons/primeicons.css»,
«node_modules/@fullcalendar/core/main.min.css»,
«node_modules/@fullcalendar/daygrid/main.min.css»,
«node_modules/@fullcalendar/timegrid/main.min.css»
Quedando así:
Creamos un componente propio, en mi caso lo llamare calendar. Recuerda importarlo en declarations en app.module.
Creamos un nuevo componente:
En la parte de HTML, pondremos lo siguiente:
<p-fullCalendar [events]="events" [options]="options"></p-fullCalendar>
En la parte ts, vamos a agregar los eventos y la configuración del fullcalendar.
Creamos dos atributos:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit {
public events: any[];
public options: any;
constructor() { }
ngOnInit() {
}
}
Ahora rellenamos los eventos:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit {
public events: any[];
public options: any;
constructor() { }
ngOnInit() {
this.events = [
{
title: "Evento 1",
start: new Date().getTime(),
description: "evento 1"
},
{
title: "Evento 2",
start: new Date(new Date().getTime() + 86400000),
description: "evento 2"
},
{
title: "Evento 3",
start: new Date(new Date().getTime() + (86400000 * 2)),
end: new Date(new Date().getTime() + (86400000 * 3)),
description: "evento 2"
},
]
}
}
Los campos más importantes son title, start y end. Aquí puedes ver más información desde la documentación oficial.
Y ahora vamos a agregar la configuración del fullcalendar.
import { Component, OnInit } from '@angular/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import esLocale from '@fullcalendar/core/locales/es';
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit {
public events: any[];
public options: any;
constructor() { }
ngOnInit() {
this.options = {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
defaultDate: new Date(),
locale: esLocale,
header: {
left: 'prev,next',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: false
};
this.events = [
{
title: "Evento 1",
start: new Date().getTime(),
description: "evento 1"
},
{
title: "Evento 2",
start: new Date(new Date().getTime() + 86400000),
description: "evento 2"
},
{
title: "Evento 3",
start: new Date(new Date().getTime() + (86400000 * 2)),
end: new Date(new Date().getTime() + (86400000 * 3)),
description: "evento 2"
},
]
}
}
Explicamos los campos usados:
- plugins: plugins a utilizar, en nuestro caso los que hemos instalado al principio.
- defaultDate: indica donde empieza.
- locale: formato de la fecha, en nuestro caso, en formato español.
- header: que contendrá la cabecera, la parte left, center y right.
- editable: no podemos editar el calendario.
Arrancamos el proyecto y esto es lo que veremos si todo ha ido bien.
Os dejo un video donde lo explico paso a paso.
Puedes descargar el código aquí.
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
buenas tardes,como puedo agregar una imagen o un estilo dentro del title
por ejemplo quiero ponerle un punto rojo al costado de la fecha