ng-bootstrap

Calendar

bs-calendar renders an accessible month-grid date picker with two-way [(selectedDate)] binding and full keyboard navigation.

Basic usage

Keyboard shortcuts
  • Tab — focus the previous-month button → calendar grid → next-month button
  • ← / → — previous / next day (rolls into adjacent months)
  • ↑ / ↓ — previous / next week
  • Home / End — first / last day of the focused week
  • PageUp / PageDown — previous / next month
  • Ctrl + PageUp / Ctrl + PageDown — previous / next year
  • Enter / Space — select the focused day
November 2026
Mon Tue Wed Thu Fri Sat Sun
44 1
45 2 3 4 5 6 7 8
46 9 10 11 12 13 14 15
47 16 17 18 19 20 21 22
48 23 24 25 26 27 28 29
49 30

Selected: Thu Nov 05 2026

  
    
      
        <bs-calendar [(selectedDate)]="selectedDate"></bs-calendar>
        
    

  
    
      
        import { Component, signal } from '@angular/core';
        
    
      
        import { BsCalendarComponent } from '@mintplayer/ng-bootstrap/calendar';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-calendar-demo',
        
    
      
          templateUrl: './my-calendar-demo.component.html',
        
    
      
          imports: [BsCalendarComponent],
        
    
      
        })
        
    
      
        export class MyCalendarDemoComponent {
        
    
      
          protected readonly selectedDate = signal<Date | null>(new Date());
        
    
      
        }