Angular 10FullCalendarJavascript

Angular 10 FullCalendar with Dynamic Events

Angular 9, Angular 10

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 10 FullCalendar with Dynamic Events.

Post Working:

In this post, I am implementing javascript fullcalendar into my angular 10 application and events are coming form php json.

Very first, you need to update to angular version to 10 and with below link you can do that:

Update Angular version to 10

Here is the code snippet and please use carefully:

1. Now run below commands to set fullcalendar modules into your angular 10 application:

npm install --save @fullcalendar/angular @fullcalendar/daygrid
npm i @fullcalendar/interaction

 

2. Now you need to add below code into your app.module.ts file:

...
import { HttpClientModule } from '@angular/common/http';
import { FullCalendarModule } from '@fullcalendar/angular'; 
import dayGridPlugin from '@fullcalendar/daygrid'; 
import interactionPlugin from '@fullcalendar/interaction'; 

FullCalendarModule.registerPlugins([ 
  dayGridPlugin,
  interactionPlugin
]);

...
  imports: [
        ...
        BrowserModule,
  FullCalendarModule,
  HttpClientModule
  ]
...

 

3. Now you need to add below code into your app.component.ts file:

I have used settimeout because API data comes little bit slower and I need to show events also so I used settimeout

...
import { CalendarOptions } from '@fullcalendar/angular'; // useful for typechecking
import { HttpClient } from '@angular/common/http';
...
export class AppComponent {
  ...
  posts = [];
  calendarOptions: CalendarOptions;
  constructor(private http: HttpClient) { }
  handleDateClick(arg) {
    alert('date click! ' + arg.dateStr)
  }
  ngOnInit(){
  setTimeout(() => {
        //Api call to get data from php file
  return this.http.get('http://localhost/mypage.php').subscribe(data => {
       this.posts.push(data);
       console.log(this.posts);
  });
  }, 2000);
  setTimeout(() => {
     this.calendarOptions = {
    initialView: 'dayGridMonth',
    dateClick: this.handleDateClick.bind(this), // bind is important!
    events: this.posts
    };
  }, 3000);
       
   }
}

 

4. Now you need to add below code into your app.component.html file:

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

 

5. Finally here is the code for mypage.php 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");
$events = array('title' => 'This is your','start' => '2020-06-29');
echo json_encode($events);

 

This is it and if you have any kind of query then please video above or you can comment below.

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

6 Comments

Leave a Reply

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