complex

Calendar

A date field component that allows users to enter and edit date.

Preview

A preview of the Calendar component with interactive controls.

Preview Code
Interactive

Installation

Add the Calendar component to your project.

Bash
ng g @ng-cn/core:c calendar

Usage

Import and use the Calendar component in your Angular application.

Template TypeScript
template.html
<div class="flex justify-center">
  <Calendar
    [(selected)]="date"
    class="rounded-md border shadow-sm"
  />
</div>

Examples

Explore different variations and use cases for the Calendar component.

Basic

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
selected Date — The selected date.
mode 'single' | 'multiple' | 'range' 'single' The selection mode.
class string — Additional CSS classes to apply.