Integrar fullcalendar en Angular

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:

Crear y ejecutar un proyecto angular

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:

$ npm i primeng primeicons

@fullcalendar, vamos a instalar la versión 4.4.2 que es estable, algunas nuevas versiones han dado problemas bastantes raros:

$ npm i @fullcalendar/core@4.4.2 @fullcalendar/daygrid@4.4.2 @fullcalendar/interaction@4.4.2 @fullcalendar/timegrid@4.4.2

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:

$ ng g c calendar

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

https://youtu.be/qrwbdEXxeEw

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *