Angular fullcalendar show custom text in each cell
Here is the code snippet and please use carefully:
1. Very first, here are common basics steps to add angular 10 application on your machine:
npm install -g @angular/cli
ng new angularfullcalendar // Set Angular 10 Application on your pc
cd angularfullcalendar // Go inside project folder
ng serve // Run project
http://localhost:4200/ //Check working Local server
Â
2. Now run below commands to set fullcalendar modules modules into your angular 10 application:
npm install --save @fullcalendar/angular @fullcalendar/daygrid
npm i @fullcalendar/interaction
Â
3. Add below code into your app.module.ts file:
...
import { FullCalendarModule } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
FullCalendarModule.registerPlugins([
dayGridPlugin,
interactionPlugin
]);
...
imports: [
...
FullCalendarModule
],
...
Â
5. Now add below code into your app.component.ts file:
...
import { CalendarOptions } from '@fullcalendar/angular'; // useful for typechecking
export class AppComponent {
...
calendarOptions: CalendarOptions = {
initialView: 'dayGridMonth',
dayCellContent: this.handleDayRender.bind(this), // bind is important!
events: [
{ title: 'event 1', date: '2020-06-27' },
{ title: 'event 2', date: '2020-06-30' }
]
};handleDayRender(arg)
{
let customHtml = "Therichpost";
let mystring = arg.dayNumberText;
return mystring+customHtml;
}
}
Â
6. Now add below code into app.component.html file:
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 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.
2 comments
how to apply drop down in this full calendar
https://therichpost.com/fullcalendar-with-select-year-and-month-dropdown/