How to render the Calendar with week numbers in Angular Calendar

31 Aug 20261 minute to read

You can display weekNumber in the Calendar by setting the weekNumber property to true.

When week numbers are enabled, an additional column is displayed alongside the calendar dates, showing the corresponding weekNumber for each week.

The following example demonstrates how to render the Calendar with weekNumber.

app.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CalendarModule } from '@syncfusion/ej2-angular-calendars'




import { Component } from '@angular/core';

@Component({
imports: [
        
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
        <!-- Sets the weekNumber -->
        <ejs-calendar [value]='dateValue' weekNumber='true'></ejs-calendar>
        `
})

export class AppComponent {
    public dateValue: Date = new Date();
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));