Angular Tutorials

Angular 13 FullCalendar Create and Display Dynamic Events

Angular full calendar integration tutorial; Throughout this tutorial, we will learn how to implement the Fullcalendar package in the Angular 13 application and how to create dynamic events in Angular using the profound FullCalendar JavaScript plugin.

We will give you a shorter demo of dynamic events and create a basic php file and run it to fetch the events through the JSON mechanism.

Apart from the fullcalendar package, we will use the rest of the other modules and API to add an event calendar in the Angular application.

Angular FullCalendar Dynamic Events Tutorial

  • Step 1: Create Angular Project
  • Step 2: Install Fullcalendar Packages
  • Step 3: Update AppModule File
  • Step 4: Create Dynamic Events in Angular
  • Step 5: Start Development Server

Create Angular Project

First, open the terminal, type command on the command prompt and install the Angular CLI.

npm install -g @angular/cli

Secondly, execute the following command to install the angular project.

ng new angular-calednar-event

Move to the project’s root.

cd angular-calednar-event

Install Fullcalendar Packages

Next, you have to use suggested commands to install full calendar packages into the angular project.

npm install @fullcalendar/angular 
npm install @fullcalendar/daygrid
npm install @fullcalendar/interaction

Update AppModule File

In this step, we need to import HttpClientModule, FullCalendarModule, interactionPlugin and dayGridPlugin in the app module class, so add the following code inside the app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

// import modules
import { HttpClientModule } from '@angular/common/http';

import { FullCalendarModule } from '@fullcalendar/angular';
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';

FullCalendarModule.registerPlugins([interactionPlugin, dayGridPlugin]);

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FullCalendarModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})

export class AppModule {}

Create Dynamic Events in Angular

Open app.component.ts file and place the following code.

import { Component } from '@angular/core';

import { HttpClient } from '@angular/common/http';
import { CalendarOptions } from '@fullcalendar/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent {
  Events: any[] = [];
  calendarOptions: CalendarOptions = {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    initialView: 'dayGridMonth',
    weekends: true,
    editable: true,
    selectable: true,
    selectMirror: true,
    dayMaxEvents: true
  };

  constructor(private httpClient: HttpClient) {}

  onDateClick(res: any) {
    alert('Clicked on date : ' + res.dateStr);
  }

  ngOnInit() {
    setTimeout(() => {
      return this.httpClient
        .get('http://localhost:8888/event.php')
        .subscribe((res: any) => {
          this.Events.push(res);
          console.log(this.Events);
        });
    }, 2200);

    setTimeout(() => {
      this.calendarOptions = {
        initialView: 'dayGridMonth',
        dateClick: this.onDateClick.bind(this),
        events: this.Events,
      };
    }, 2500);
  }
}

Open app.component.html file and add the given below code.

<div class="container">
  <full-calendar [options]="calendarOptions"></full-calendar>
</div>

Ultimately, for the demo purpose we need to create a PHP file so make sure your PHP development server is running after that create event.php file and place the following code in the file.

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

$calendarEvents = array('title' => 'Event name', 'start' => '2021-04-11');

echo json_encode($calendarEvents);

Start Development Server

Finally, we need to start the angular development server using the ng command, so execute the below command.

ng serve

Start browser and type the given url to run the app.

http://localhost:4200

Conclusion

Angular full calendar tutorial is over. In general, in this tutorial, we tried to understand the process of installing and setting up the full calendar plugin that allows us to create a basic calendar for creating events in the angular app.

We hope you liked this guide and share it with others.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Redux Handle API Calls with Thunk Middleware Tutorial

In this post, we will learn how to work with HTTP requests in the Redux…

24 hours ago

Node AJAX Retrieve Records from MySQL Database Tutorial

MySQL is a relational database management system based on SQL – Structured Query Language, and…

4 days ago

React Manage REST API State Globally with Context API Tutorial

React Js Handle Rest API data globally with Context and useState hook tutorial. In this…

7 days ago

How to Delete Data from MySQL Database using Node Js

Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how…

1 week ago

Node Import CSV File Data to MySQL Database with HTML Form

In this tutorial, you will discover how to import CSV file into MySQL database using…

2 weeks ago

How to Handle Global State in React js using Context API

React Js Global state management with createContext hook example; In this tutorial, we will help…

2 weeks ago