Angular 9 – how to show dynamic events in fullcalendar?

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": [
              "src/styles.css",
              "node_modules/fullcalendar/dist/fullcalendar.min.css"
            ],
            "scripts": ["node_modules/jquery/dist/jquery.min.js",
            "node_modules/moment/min/moment.min.js",
            "node_modules/fullcalendar/dist/fullcalendar.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';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule
  ],
  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;
@Component({
  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(() => {
        $("#calendar").fullCalendar({  
                        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);
  });
   
}

  ngOnInit(){
  	   this.getItems();
       
   }
}

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:

<?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' => '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
localhost:4200

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

Jassa Jatt,

Thank you

Comments

16 responses to “Angular 9 – how to show dynamic events in fullcalendar?”

  1. Anton Avatar
    Anton

    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?

  2. Abhishek Avatar
    Abhishek

    How to show dynamic data in week view ?

  3. Ajay Malhotra Avatar

    Simple, you can change the view to week view.

  4. Abhishek Avatar
    Abhishek

    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.

  5. Ajay Malhotra Avatar

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

  6. Abhishek Avatar
    Abhishek

    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.

  7. Ajay Malhotra Avatar

    You are welcome and I will share tomorrow.
    Thanks

  8. Abhishek Avatar
    Abhishek

    Will wait for your post. Thank you.

  9. Abhishek Avatar
    Abhishek

    Hi Ajay, Very good morning. Any update ?

  10. Abhishek Avatar
    Abhishek

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

  11. Ajay Malhotra Avatar

    Good Morning and I will update you.

  12. Abhishek Avatar
    Abhishek

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

  13. Abhishek Avatar
    Abhishek

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

  14. Abhishek Pathak Avatar
    Abhishek Pathak

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

  15. Ajay Malhotra Avatar

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