Home Angular 8 Angular 9 – how to show dynamic events in fullcalendar?

Angular 9 – how to show dynamic events in fullcalendar?

by therichpost
Published: Last Updated on 16 comments
angular 9 - how to show dynamic event in fullcalendar

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 – how to show dynamic events in fullcalendar?

Angular 9 has just arrived and I like it. I also like Javascript Fullcalendar because of its good features.

You can check my more posts related to Angular 9.

In this post example, I am getting dynamic events from my 
php code file by custom made json events data and my 
main motto is to get dynamic events and I am done :).

Here is the working code and please follow carefully:

1. Here are the some basic commands to download fresh Angular 9 setup, fullcalendar and jquery on your local machine:

$ npm install -g @angular/cli       //Setup Angular9 atmosphere
$ ng new angularlatest9            //Install New Angular App

/**You need to update your Nodejs also for this verison**/

$ cd angularlatest9               //Go inside the Angular 8 Project

$ npm install jquery –save       //Add jquery module

$ npm i fullcalendar             //Add fullcalendar module

$ npm i moment                  //Add momentjs library

$ ng serve                     //Run your Angular 8 Project

2. Here is the code, you need to add into your angular.json file in root folder for including fullcalendar and jquery libraries:

"styles": [
            "scripts": ["node_modules/jquery/dist/jquery.min.js",

3. Here is the code, you need to add into your src/app/app.module.ts file:

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

//HttP for Rest API's
import { HttpClientModule } from '@angular/common/http';
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

4. Here is the code, you need to add into your src/app/app.component.ts file:

In this, I am calling data from mypage.php file with http client.
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
declare var $: any;
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'easyfullcalendar';
  posts: any;
  constructor(private http: HttpClient) { }
  getItems() {
   return this.http.get('http://localhost/mypage.php').subscribe(data => {
       this.posts = data;
       setTimeout(() => {
                        header: {
                            left   : 'prev,next today',
                            center : 'title',
                            right  : 'month,agendaWeek,agendaDay'
                        navLinks   : true,
                        editable   : true,
                        eventLimit : true,
                        events: [this.posts],  // request to load current events

     }, 100);


5. Finally, here is the code for you src/app/app.component.html file:

<div id="calendar"></div>

6. Finally here is the code for mypage.php file and you need to add this into you xampp:

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");
$events = array('title' => 'This is your','start' => '2019-07-15');
echo json_encode($events);

7. Now run below command into your terminal and follow the below link:

ng serve

// you will get this link and run that link into your browser

This is it and if you have any query related to this post then please let me know.

Jassa Jatt,

Thank you

You may also like


Anton July 11, 2020 - 2:13 pm

This doesn’t work when I use the PHP backend to retrieve stuff from database and to show on calendar. Can I send u my code pls?

Abhishek July 30, 2020 - 12:21 pm

How to show dynamic data in week view ?

Ajay Malhotra July 30, 2020 - 12:24 pm

Simple, you can change the view to week view.

Abhishek July 30, 2020 - 12:37 pm

Thanks for your quick reply. When I click on the next and prev button, I need an API call in which I have to pass the start date and endDate of that week.

Ajay Malhotra July 30, 2020 - 12:41 pm

Okay for this, I will share you post link with proper code snippet, may be I will share tomorrow.

Abhishek July 30, 2020 - 12:46 pm

Again I would like to thank you for your very quick response. I am stuck with this issue from the morning and could not be able to find a solution. It would really great if you will share it tomorrow. Thanks a ton again.

Ajay Malhotra July 30, 2020 - 12:47 pm

You are welcome and I will share tomorrow.

Abhishek July 30, 2020 - 12:50 pm

Will wait for your post. Thank you.

Abhishek July 31, 2020 - 4:29 am

Hi Ajay, Very Good Morning, Any Update regarding the same?

Abhishek July 31, 2020 - 4:28 am

Hi Ajay, Very good morning. Any update ?

Ajay Malhotra July 31, 2020 - 5:05 am

Good Morning and I will update you.

Abhishek July 31, 2020 - 10:34 am

Hi Ajay, If you could let me know how much time it will take. Thanks

Abhishek August 4, 2020 - 6:05 am

Hi Ajay, Do I expect answer of my question by today?

Abhishek Pathak August 15, 2020 - 11:14 am

Hi Ajay, any luck or you have given up on this one?

Ajay Malhotra August 15, 2020 - 11:45 am

Hi, I did not give up, I was busy and I will update you soon.


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.