CODEWITHSUNDEEP
eventsfullcalendarangular7customization
MVM
MVM

Reputation: 127

How To Customize Event Display in FullCalendar V4 in Angular

I'd like to customize what the events display in fullCalendar. Currently they only display the Title but I would like to know how to display additional fields of the event. Using FC-v4 angular 7 version.

Upvotes: 0

Views: 1492

Answers (1)

MVM
MVM

Reputation: 127

html

<full-calendar #calendar defaultView="dayGridMonth" style="background: white; padding: 5px" timeZone="UTC"
                (eventClick)="openTaskView($event)" (dateClick)="openDateView($event)" aspectRatio="1.8"
                [customButtons]="options.customButtons" [header]="{
                    center: 'title',
                    left: 'filter,dayGridMonth,timeGridWeek,timeGridDay',
                    right: 'prev, next today'
                }" [plugins]="calendarPlugins" [events]="selectedEvents" (eventRender)="calendarEventRender($event)" [selectable]="true"
                schedulerLicenseKey="GPL-My-Project-Is-Open-Source">
            </full-calendar>

comp.ts

calendarEventRender(info){
      if(info.event.extendedProps.batchId)
        info.el.text = " "+info.event.title+ " - "+ info.event.extendedProps.batch.name;
    }

Upvotes: 1

Related Questions