1 NPM Install

Install the smart-webcomponents-angular package:

npm install smart-webcomponents-angular

2 Register styles

Add the default Smart UI stylesheet to angular.json -> projects -> <your-project> -> architect -> build -> options -> styles (merge with existing entries):

"styles": [
		"node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
	]

Add optional theme CSS from the same package after smart.default.css if you use Bootstrap, Fluent, or other bundled themes.

3 Import the Angular module

Import CalendarModule from smart-webcomponents-angular/calendar: use @Component.imports for standalone, or add it to your AppModule (or feature module) imports array for NgModule apps.

import { CalendarModule } from 'smart-webcomponents-angular/calendar';

4 Root component (standalone)

Add CalendarModule to your root standalone component (src/app/app.ts). Snippet from Smart UI demos (paths normalized to app.html / App where applicable):

 import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ButtonComponent } from 'smart-webcomponents-angular/button';
import { CalendarComponent } from 'smart-webcomponents-angular/calendar';

import { ButtonModule } from 'smart-webcomponents-angular/button';import { CalendarModule } from 'smart-webcomponents-angular/calendar';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ ButtonModule, CalendarModule ],
  templateUrl: './app.html',
  styleUrl: './app.css'
})

export class App implements AfterViewInit, OnInit {
	@ViewChild('calendar', { read: CalendarComponent, static: false }) calendar!: CalendarComponent;
	@ViewChild('calendar2', { read: CalendarComponent, static: false }) calendar2!: CalendarComponent;
	@ViewChild('calendar3', { read: CalendarComponent, static: false }) calendar3!: CalendarComponent;
	@ViewChild('calendar4', { read: CalendarComponent, static: false }) calendar4!: CalendarComponent;


	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
	}

	init(): void {
		// init code.

		// Your code here.

	}
}

Boot the app with bootstrapApplication from src/main.ts and an ApplicationConfig in src/app/app.config.ts as generated by the CLI.

5 Template (standalone)

Use your markup in src/app/app.html (or inline template). Bind properties and events on smart-calendar as needed:

 <div class="smart-demo-container">
    <div id="materialPicker">
        <section>
            <h2>Smart.Calendar</h2>
            <div>
                <h2>Allow users to enter dates easily and visually. You can customize date formats, language, layout,
                    animations, selection modes and much more with the smartCalendar.</h2>
                <div class="module"></div>
            </div>
        </section>
        <section id="datePickers">
            <h2>Date pickers</h2>
            <div class="module">
                <p>The selected day is indicated by a filled circle. The current day is indicated
                    by a different color and type weight.</p>
                <p>Swipe left to right to navigate through the months. Touch the year in
                    the title bar to transition to the year view.</p>
            </div>
            <div class="module">
                <div>
                    <smart-calendar #calendar selection-mode="one" view="portrait" hide-other-month-days
                        [viewSections]='["title", "header", "footer"]' displayModeView="list"
                        footerTemplate="templateWithButtons"></smart-calendar>
                </div>
                <br />
                <p>Date and year picker: portrait, month display mode</p>
            </div>
            <div class="module">
                <div>
                    <smart-calendar #calendar2 selection-mode="one" view="portrait" hide-other-month-days
                        [viewSections]='["title", "header", "footer"]' displayModeView="list" displayMode="decade"
                        footerTemplate="templateWithButtons"></smart-calendar>
                </div>
                <br />
                <p>Date and year picker:portrait, decade display mode.</p>
            </div>
            <div class="module">
                <p>The picker has a landscape view as well to suite the different screen
                    orientations.</p>
            </div>
            <div class="module">
                <smart-calendar #calendar3 selection-mode="one" view="landscape" hide-other-month-days
                    [viewSections]='["title", "header", "footer"]' displayModeView="list"
                    footerTemplate="templateWithButtons"></smart-calendar>
                <br />
                <p>Date picker: landscape, month display mode</p>
            </div>
            <div class="module">
                <smart-calendar #calendar4 selection-mode="one" view="landscape" hide-other-month-days
                    [viewSections]='["title", "header", "footer"]' displayModeView="list" displayMode="decade"
                    footerTemplate="templateWithButtons"></smart-calendar>
                <br />
                <p>Date picker: landscape, decade display mode.</p>
            </div>
        </section>
    </div>

6 NgModule bootstrap (also supported)

Same npm package and angular.json styles as steps 1-2. Put CalendarModule on your NgModule.imports instead of @Component.imports, and bootstrap with bootstrapModule(AppModule).

The demo sources bundled for this widget use standalone only (there is no app.module.ts in that folder). NgModule is fully supported: put CalendarModule from smart-webcomponents-angular/calendar on NgModule.imports, make your root component non-standalone (remove standalone: true and move widget modules from @Component.imports to the module), and bootstrap with platformBrowserDynamic().bootstrapModule(AppModule).

Minimal main.ts + app.module.ts pairing (adjust paths to match your CLI layout):

src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule).catch((err) => console.error(err));

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CalendarModule } from 'smart-webcomponents-angular/calendar';

@NgModule({
	declarations: [ AppComponent ],
	imports: [ BrowserModule, CalendarModule ],
	bootstrap: [ AppComponent ]
})
export class AppModule { }

Reuse the template and class logic from steps 4-5 in AppComponent, configured for declarations + NgModule.imports instead of a standalone @Component.