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.

Puedes descargar el código aquí.

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

Compartir

1 comentario

  1. natalia

    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

Deja una respuesta

Tu dirección de correo electrónico no será publicada.