Angular Primeng FullCalendar #9002

5 Answer(s)

• 

  0

  ismcagdas created 4 years ago

  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,

  Save Cancel
• 

  0

  rvanwoezik created 4 years ago

  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">

  `

  Save Cancel
• 

  0

  ismcagdas created 4 years ago

  Support Team

  Hi,

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

  Save Cancel
• 

  0

  rvanwoezik created 4 years ago

  here is my calendar.component.less

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

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

  Save Cancel
• 

  0

  ismcagdas created 4 years ago

  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;
  }
  

  Save Cancel