Base solution for your next web application
Open Closed

Angular Primeng FullCalendar #9002


User avatar
0
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)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    I have tried it on https://primefaces.org/primeng/showcase/#/fullcalendarand 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 ?

    Thanks,

  • User Avatar
    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();
    
    constructor(
        injector: Injector,
        private _calendarServiceProxy: CalendarEventServiceProxy
    
    ) {
        super(injector);
    }
    
    ngOnDestroy(): void {
    
    }
    
    addEvent(calendarEvent: CalendarEventDto): void {
        this.events = [...this.events, {
            title: calendarEvent.title, 
            start: calendarEvent.start.toDate(),
            description: calendarEvent.description,
            allDay: calendarEvent.isFullDay
        }];
        console.log('nr items in events = ' + this.events.length);
    };
    
    
    ngOnInit(): void {
        this.events = 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.addEvent(input);
            }
            );
        });
    
    
        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">
    `

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

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

  • User Avatar
    0
    rvanwoezik created

    here is my calendar.component.less

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

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

  • User Avatar
    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;
    }