fullcalendar · medbenmakhlouf · Jun 14, 2025 · Jun 14, 2025 · Jun 14, 2025 · Jun 14, 2025
diff --git a/README.md b/README.md
@@ -13,33 +13,12 @@ npm install @fullcalendar/angular @fullcalendar/core @fullcalendar/daygrid
 
 ## Usage
 
-First, connect `FullCalendarModule` to your app module:
-
-```js
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { FullCalendarModule } from '@fullcalendar/angular';
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    FullCalendarModule // register FullCalendar with your app
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
-
-Then, use the `full-calendar` component, supplying an [options](https://fullcalendar.io/docs#toc) object:
+Use the `full-calendar` component, supplying an [options](https://fullcalendar.io/docs#toc) object:
 
 ```js
 import { Component } from '@angular/core';
 import { CalendarOptions } from '@fullcalendar/core';
+import { FullCalendarComponent } from '@fullcalendar/angular';
 import dayGridPlugin from '@fullcalendar/daygrid';
 
 @Component({
@@ -50,6 +29,8 @@ import dayGridPlugin from '@fullcalendar/daygrid';
       <full-calendar [options]="calendarOptions"></full-calendar>
     </div>
   `,
+  standalone: true,
+  imports: [FullCalendarComponent],
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
@@ -77,7 +58,7 @@ You can even supply nested templates:
 
 ## Supported Angular Versions
 
-`@fullcalendar/angular` version 6 supports Angular 12 - 20
+`@fullcalendar/angular` version 7 supports Angular 17 - 20
 
 ## Links
 

diff --git a/angular.json b/angular.json
@@ -95,18 +95,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "app:build:production"
+              "buildTarget": "app:build:production"
             },
             "development": {
-              "browserTarget": "app:build:development"
+              "buildTarget": "app:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "app:build"
+            "buildTarget": "app:build"
           }
         },
         "test": {
@@ -125,5 +125,7 @@
       }
     }
   },
-  "defaultProject": "lib"
+  "cli": {
+    "analytics": false
+  }
 }
diff --git a/app/.browserslistrc b/app/.browserslistrc
diff --git a/app/src/app.component.html b/app/src/app.component.html
@@ -1,11 +1,12 @@
 <button (click)="updateHeader()" id="updateHeader">Update header</button>
 <button (click)="updateEvents()" id="updateEvents">Update events</button>
-<full-calendar
-  *ngIf="calendarOptions"
-  #fullcalendar
-  [options]="calendarOptions"
->
-  <ng-template #eventContent let-arg>
-    <b>{{ arg.event.title }}</b> - {{ arg.event.start.getDate() }}
-  </ng-template>
-</full-calendar>
+@if (calendarOptions) {
+  <full-calendar
+    #fullcalendar
+    [options]="calendarOptions"
+    >
+    <ng-template #eventContent let-arg>
+      <b>{{ arg.event.title }}</b> - {{ arg.event.start.getDate() }}
+    </ng-template>
+  </full-calendar>
+}
diff --git a/app/src/app.component.spec.ts b/app/src/app.component.spec.ts
@@ -1,21 +1,7 @@
 import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
-import { FullCalendarModule } from '@fullcalendar/angular';
 
 describe('AppComponent', () => {
-  beforeEach(async () => {
-    TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule,
-        FullCalendarModule
-      ],
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  });
-
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;

diff --git a/app/src/app.component.ts b/app/src/app.component.ts
@@ -7,7 +7,9 @@ import { FullCalendarComponent } from '@fullcalendar/angular';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
+  standalone: true,
+  imports: [FullCalendarComponent]
 })
 export class AppComponent implements OnInit {
 

diff --git a/app/src/app.module.ts b/app/src/app.module.ts
diff --git a/app/src/main.ts b/app/src/main.ts
@@ -1,12 +1,12 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 
-import { AppModule } from './app.module';
+import { AppComponent } from './app.component';
 import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {providers: [ importProvidersFrom(BrowserModule)] })
   .catch(err => console.error(err));
diff --git a/app/src/test.ts b/app/src/test.ts
@@ -7,20 +7,8 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    <T>(id: string): T;
-    keys(): string[];
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting(),
 );
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
diff --git a/lib/.browserslistrc b/lib/.browserslistrc
diff --git a/lib/package.json b/lib/package.json
@@ -20,8 +20,8 @@
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/common": "12 - 20",
-    "@angular/core": "12 - 20",
+    "@angular/common": "17 - 20",
+    "@angular/core": "17 - 20",
     "@fullcalendar/core": "~6.1.19"
   }
 }
diff --git a/lib/src/full-calendar.component.html b/lib/src/full-calendar.component.html
@@ -1,12 +1,14 @@
 <offscreen-fragment>
-  <transport-container *ngFor="let customRendering of customRenderings; trackBy:trackCustomRendering"
-    [inPlaceOf]="customRendering.containerEl"
-    [reportEl]="customRendering.reportNewContainerEl"
-    [elTag]="customRendering.elTag"
-    [elClasses]="customRendering.elClasses"
-    [elStyle]="customRendering.elStyle"
-    [elAttrs]="customRendering.elAttrs"
-    [template]="customRendering.generatorMeta"
-    [renderProps]="customRendering.renderProps"
-  ></transport-container>
+  @for (customRendering of customRenderings; track trackCustomRendering($index, customRendering)) {
+    <transport-container
+      [inPlaceOf]="customRendering.containerEl"
+      [reportEl]="customRendering.reportNewContainerEl"
+      [elTag]="customRendering.elTag"
+      [elClasses]="customRendering.elClasses"
+      [elStyle]="customRendering.elStyle"
+      [elAttrs]="customRendering.elAttrs"
+      [template]="customRendering.generatorMeta"
+      [renderProps]="customRendering.renderProps"
+    />
+  }
 </offscreen-fragment>