Black Friday Sale!
Save up to 50% off any plans! Valid from 23 Nov to 30 Nov - Also valid for the existing customers
Open Closed

Angular Primeng FullCalendar #9002

rvanwoezik created

Hi i have used Primeng FullCalendar in my Core / Angular app, latest version.

The events in the calendar are unreadable grey font on blue blackground

To overrule the css i have added a .less file with

` .fc-unthemed .fc-event .fc-title, .fc-unthemed .fc-event-dot .fc-title { color: #ffffff !important;


It seems that the .less file isn't overruling it.

but without effect, what am i missing?

5 Answer(s)
  • 0
    ismcagdas created
    Support Team


    I have tried it on your style is working. It might be related to how you include it into your app. Could you share how do you include it into your app ?


  • 0
    rvanwoezik created

    Hi, this is how i have included in my app:

    in admin.module.ts import { FullCalendarModule } from 'primeng/fullcalendar'; NgModule({ imports: [ .... FullCalendarModule, here is my calendar.component.ts `import { Component, Injector, OnDestroy, OnInit, AfterViewChecked } from '@angular/core'; import { AppComponentBase } from '@shared/common/app-component-base'; import { appModuleAnimation } from '@shared/animations/routerTransition'; import dayGridPlugin from '@fullcalendar/daygrid'; import timeGridPlugin from '@fullcalendar/timegrid'; import interactionPlugin from '@fullcalendar/interaction';

    import { CalendarEventServiceProxy, CalendarEventDto } from '@shared/service-proxies/service-proxies'; import * as moment from 'moment';

    @Component({ templateUrl: './calendar.component.html', animations: [appModuleAnimation()], styleUrls: ['./calendar.component.less'] }) export class CalendarComponent extends AppComponentBase implements OnDestroy, OnInit, AfterViewChecked {

    events: any[];
    options: any;
    calendarEvent: CalendarEventDto = new CalendarEventDto();
        injector: Injector,
        private _calendarServiceProxy: CalendarEventServiceProxy
    ) {
    ngOnDestroy(): void {
    addEvent(calendarEvent: CalendarEventDto): void { = [, {
            title: calendarEvent.title, 
            start: calendarEvent.start.toDate(),
            description: calendarEvent.description,
            allDay: calendarEvent.isFullDay
        console.log('nr items in events = ' +;
    ngOnInit(): void { = new Array();
        this._calendarServiceProxy.getCalendarEvents().subscribe((result) => {
            console.log('nr items = ' + result.items.length);
            result.items.forEach((item) => {
                let input = new CalendarEventDto();
                input.start = item.start;
                input.end = item.end;
                input.title = item.title;
                input.isFullDay = item.isFullDay;
        this.options = {
            plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
            defaultDate: new Date(),
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,dayGridWeek,timeGridDay'
            minTime: "08:00:00",
            maxTime: "22:00:00",
            timeFormat: 'HH:mm',
            displayEventEnd: true,
            locale: "nl",
    ngAfterViewChecked(): void {

    }And this is a part of my calendar.component.html<div [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">

    <p-fullCalendar #fc [events]="events" [options]="options">

  • 0
    ismcagdas created
    Support Team


    Thanks, it seems fine. Could you also share calendar.component.less for us to reproduce this problem on our side ?

  • 0
    rvanwoezik created

    here is my calendar.component.less

    `body .fc .fc-event { background-color: #ffb822 !important; }

    .fc-title { color: #ffffff !important; }`

  • 0
    ismcagdas created
    Support Team

    Hi @rvanwoezik

    Thanks. It worked for me;

    You can try two things;

    1. If you haven't added your new less file to angular.json, you need to add it.
    2. Or, you can to add below css into your calendar.component.less;
    .fc-unthemed .fc-event .fc-title, .fc-unthemed .fc-event-dot .fc-title {
        color: #ffffff !important;