Toolbar
Beta

Calendar Navigator

The FktCalendarNavigator component provides an interactive calendar header with navigation controls and modal-based date selection. It displays the current month/year and allows users to navigate between dates with modal overlays for detailed selection.

Import

import {FktCalendarNavigatorComponent} from "frakton-ng/calendar-navigator";

Month

Calendar navigator in month mode, allowing users to navigate through months and select specific months.

Year

Calendar navigator in year mode, allowing users to navigate through years and select specific years.

Month mode example

Comprehensive example showing month mode navigation with date selection and current date display.

Year mode example

Comprehensive example showing year mode navigation with year selection and current year display.

Dynamic mode example

Dynamic mode switching example showing how to toggle between month and year navigation modes.

Mode: month
Selected: Friday, November 28, 2025
Selected: {{ internalDate() | date:'fullDate' }}

Form integration example

Form integration example showing how to use calendar navigator with reactive forms and form validation.

Selected: Friday, November 28, 2025

Selected: {{ dateForm.selectedDate().value() | date:'fullDate' }}