CalendoPro

Minimal Inline Calendar

Compact, keyboard-accessible calendar for forms and dashboards

Light Theme

Selected: None

Dark Theme

Selected: None

Custom Color (Emerald)

Selected: None

Week Starts Monday

Selected: None

⌨️ Keyboard Navigation

← → Navigate days

↑ ↓ Navigate weeks

Enter Select date

Tab Focus calendar

Form Integration Example

Full Name

Email Address

Date of Birth

Appointment Date

Usage Example

                // Initialize Inline Calendar

                const inline = new CalendoPro.Inline('#my-calendar', {

                  theme: 'light',

                  startDay: 0, // 0 = Sunday

                  showHeader: true,

                  minDate: '2025-01-01',

                  maxDate: '2025-12-31',

                  onDateSelect: (data) => {

                    document.getElementById('my-input').value = data.formatted;

                  }

                });

                // Get/Set value programmatically

                inline.getValue(); // Returns 'YYYY-MM-DD'

                inline.setValue('2025-06-15');

📏

Compact Size

Minimal footprint, perfect for tight spaces.

⌨️

Keyboard Accessible

Full keyboard navigation support.

🎨

Themeable

Light, dark, and custom color themes.

📋

Form Ready

Easy integration with any form.