expose event/eventSources/resources as top-level component inputs

Author: arshaw

CHANGELOG.md

@@ -1,6 +1,7 @@
 
 v6.0.0-beta.3
 -------------
+- FEATURE: expose event/eventSources/resources as top-level component inputs (#303)
 - FIX: remove fast-deep-equals because Angular prefers ESM for tree shaking (#421)
 
 

lib/src/full-calendar.component.spec.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FullCalendarComponent } from './full-calendar.component';
+import { CalendarOptions } from '@fullcalendar/core';
 import dayGridPlugin from '@fullcalendar/daygrid';
 
 const DEFAULT_OPTIONS = {
@@ -147,6 +148,57 @@ describe('HostComponent', () => {
 });
 
 
+// uses the separate `events` input
+
+@Component({
+  selector: 'full-calendar-test',
+  template: `
+    <full-calendar
+      [options]="calendarOptions"
+      [events]="events"
+    ></full-calendar>
+  `
+})
+class HostComponent2 {
+  calendarOptions: CalendarOptions = {
+    ...DEFAULT_OPTIONS,
+    eventDidMount: this.handleEventDidMount.bind(this)
+  };
+  events = [buildEvent()];
+  eventRenderCnt = 0;
+
+  handleEventDidMount() {
+    this.eventRenderCnt++;
+  }
+
+  addEventReset() {
+    this.events = this.events.concat([buildEvent()]);
+  }
+}
+
+describe('HostComponent2', () => {
+  let component: HostComponent2;
+  let fixture: ComponentFixture<HostComponent2>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FullCalendarComponent, HostComponent2]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HostComponent2);
+    component = fixture.componentInstance;
+    fixture.detectChanges(); // necessary for initializing change detection system
+  });
+
+  it('should render events', () => {
+    expect(component.eventRenderCnt).toBe(1);
+    component.addEventReset();
+    fixture.detectChanges();
+    expect(component.eventRenderCnt).toBe(3); // +2 (the two events were freshly rendered)
+  });
+})
+
+
 // some tests need a wrapper component with DEEP COMPARISON
 
 @Component({

lib/src/full-calendar.component.ts

@@ -13,6 +13,10 @@ import { deepEqual } from './fast-deep-equal';
 import { deepCopy, shallowCopy, mapHash } from './utils';
 import { OPTION_IS_DEEP } from './options';
 
+type CalendarOptionsLookup<OptionName> = OptionName extends keyof CalendarOptions
+  ? CalendarOptions[OptionName]
+  : unknown
+
 @Component({
   selector: 'full-calendar',
   template: '',
@@ -21,6 +25,9 @@ import { OPTION_IS_DEEP } from './options';
 export class FullCalendarComponent implements AfterViewInit, DoCheck, AfterContentChecked, OnDestroy {
 
   @Input() options?: CalendarOptions;
+  @Input() events?: CalendarOptionsLookup<'events'>;
+  @Input() eventSources?: CalendarOptionsLookup<'eventSources'>;
+  @Input() resources?: CalendarOptionsLookup<'resources'>;
   @Input() deepChangeDetection?: boolean;
 
   private calendar: Calendar | null = null;
@@ -31,7 +38,7 @@ export class FullCalendarComponent implements AfterViewInit, DoCheck, AfterConte
 
   ngAfterViewInit() {
     const { deepChangeDetection } = this;
-    const options = this.options || {};
+    const options = this.buildOptions();
 
     // initialize snapshot
     this.optionSnapshot = mapHash(options, (optionVal: any, optionName: string) => (
@@ -51,7 +58,7 @@ export class FullCalendarComponent implements AfterViewInit, DoCheck, AfterConte
   ngDoCheck() {
     if (this.calendar) { // not the initial render
       const { deepChangeDetection, optionSnapshot } = this;
-      const newOptions = this.options || {};
+      const newOptions = this.buildOptions();
       const newProcessedOptions: Record<string, any> = {};
       let anyChanges = false;
 
@@ -116,4 +123,20 @@ export class FullCalendarComponent implements AfterViewInit, DoCheck, AfterConte
     return this.calendar!;
   }
 
+  private buildOptions(): CalendarOptions {
+    const options = { ...this.options };
+
+    if (this.events !== undefined) {
+      (options as any).events = this.events;
+    }
+    if (this.eventSources !== undefined) {
+      (options as any).eventSources = this.eventSources;
+    }
+    if (this.resources !== undefined) {
+      (options as any).resources = this.resources;
+    }
+
+    return options;
+  }
+
 }