Home Angular 10 Angular 10 FullCalendar with Dynamic Events

Angular 10 FullCalendar with Dynamic Events

by therichpost
Published: Last Updated on 34 comments
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

Angular Full Calendar

Here is the code snippet for Angular 10 FullCalendar with Dynamic Events 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);

Now we are done friends. If you have any kind of query or suggestion or requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.
I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

You may also like

34 comments

EagerAngularLearner July 11, 2020 - 1:13 pm

This is good! Can you show how to get events for angular 10 with php and mysql?

Reply
Karen July 12, 2020 - 7:42 am

Thank you for this. Worked great.

Reply
Ajay Malhotra July 12, 2020 - 7:50 am

You are welcome karen.

Reply
EagerAngularLearner July 12, 2020 - 10:18 am

I don’t understant how this would get data from mysql table? It is static, right?

Reply
Ajay Malhotra July 12, 2020 - 5:55 pm

Its dynamic, means getting data via api..This is working demo. you can also get data from mysql and change to json data like i did. I just told you logic.

Thanks

Reply
Hiro August 7, 2020 - 8:00 am

wonderful thank god

i wondering the build error
node_modules/@fullcalendar/common/vdom.d.ts:11:24 – error TS2304: Cannot find name ‘FullCalendarVDom’.

instruct through primeng and fullcalendar.io pages, but doesn’t work.

i wondering for full 3 days.

Change the code shown on this page, calendar appeared successfully.

Reply
Ajay Malhotra August 7, 2020 - 8:02 am

Great!!

Reply
sankar September 23, 2020 - 6:06 am

nice

Reply
Ajay Malhotra September 23, 2020 - 6:24 am

Thanks

Reply
vinoth November 6, 2020 - 5:49 am

dynamic events not show in calender.please help me

Reply
vinoth November 6, 2020 - 5:57 am

this is my code:
setTimeout(() => {
this.http.get(‘url’).subscribe(res => {
console.log(res);
if(res[‘status’] == ‘success’){

let data = res[‘data’];
if(data == ”){
}else{
alert(‘test’);
let bhd = [];
data.forEach(b => {
let bd = moment(b.booking_date,’DD-MM-YYYY’).format(‘YYYY-MM-DD’);
this.bookhalldata.push({title:b.purpose,date:bd});
});

}

}
},error => {
console.log(error);
if(error[‘error’]){
this.toastr.error(error[‘error’].message, ‘Error’, {
progressBar:true
});
return;
}

});
},2000);

setTimeout(() => {
this.loadEvents();
},3000);

loadEvents() {
this.calendarOptions = {initialView : ‘dayGridMonth’,dateClick : this.handleDateClick.bind(this),
events : this.bookhalldata
}
};

Reply
Ajay Malhotra November 6, 2020 - 6:00 am

Hi, did you get response from API?

Reply
vinoth November 6, 2020 - 6:04 am

yes.

Reply
Ajay Malhotra November 6, 2020 - 6:05 am

Okay, then there must be minor issue to set events.

Reply
vinoth November 6, 2020 - 6:08 am

static event data show in calendar.but api data not show

Reply
Ajay Malhotra November 6, 2020 - 8:42 am

Api data should also show.

Reply
vinoth November 6, 2020 - 9:01 am

api data response:
{“status”:”success”,”data”:[{“id”:”2″,”user_id”:”10″,”name”:””,”email”:””,”mobile”:””,”purpose”:”sports event”,”booking_date”:”10-11-2020″,”start_time”:”9:59 PM”,”end_time”:”10:59 PM”,”location”:””,”created_at”:”2020-11-04 19:59:34″,”updated_at”:”2020-11-04 19:59:34″}]}

i have sent above my code

Reply
Ajay Malhotra November 6, 2020 - 9:22 am

You missed the title and start parameters.

Reply
vinoth November 6, 2020 - 9:17 am

data are push in calendarOptions events.but not show in calendar
{
dateClick: ƒ ()
events: Array(2)
0: {title: “event 1”, date: “2020-11-10”}
1: {title: “sports event”, date: “2020-11-10”}
length: 2
__proto__: Array(0)
initialView: “dayGridMonth”
}

Reply
vinoth November 6, 2020 - 9:34 am

i changing key when push array

Reply
Alejandro Rojano December 22, 2020 - 4:53 pm

Hello Ajay i´m looking for this kind of calendar schedule, but i want to ask you, if there are the options to change through the weeks, monts or years?

Reply
Ajay Malhotra December 22, 2020 - 5:08 pm

Yes and I will update you with new post. Stay Tuned.
Thanks

Reply
Harshu February 3, 2021 - 12:54 pm

Hi i want to dynamic event with dynamic header i mean to say i want date using start and end date so can you please let me how i can manage custom header for previous next options

Reply
Ajay Malhotra February 3, 2021 - 5:11 pm

Yes we can.

Reply
Samyak Nayak March 16, 2021 - 1:23 pm

How to make it working with Java Springboot?

Reply
Ajay Malhotra March 17, 2021 - 5:05 am

Will update you soon.

Reply
SAM April 9, 2021 - 5:50 am

How to nowrap the content i want to display whole content in calendar

Reply
Ajay Malhotra April 9, 2021 - 5:53 am

With css, you can do that.

Reply
sashtra September 16, 2021 - 11:21 am

Hi, How to add day, week, Monthly view in this calendar

Reply
Ajay Malhotra September 16, 2021 - 11:28 am

Hi you can check my update posts related this. Thanks.
https://therichpost.com/angular-12-fullcalendar-working-demo/

Reply
Amit Kumar June 28, 2022 - 11:38 am

hi Ajay, I want to implement CRUD operation on full-calendar using ASP.Net Core Web API(in backend) can you please help me

Reply
Rachita November 8, 2021 - 7:11 am

Hey, can anyone help how to show the event details once clicked on the event shown in the calendar?

Reply
Ajay Malhotra November 8, 2021 - 7:14 am

yes and I made post on that, you can check that.

Reply

Leave a Comment

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