JS Calendar
Scroll through four practical configurations, each shown as its own section so the page reads cleanly from top to bottom on desktop and mobile.
Demo 01
The default setup with keyboard support, mouse interaction, and the standard component behavior. This is the clean reference version for everyday use.
Use this example as the baseline when checking the component’s default behavior.
Demo 02
This configuration constrains the picker to a fixed window. It is useful for booking periods, fiscal-year forms, or any workflow with strict date limits.
Dates outside the allowed range stay unavailable to the user.
Demo 03
Blocked days remain unselectable, while important dates get visual emphasis. This is useful for availability planning, scheduling, and business-event marking.
Highlighted days stand out visually, while disabled days cannot be selected.
Demo 04
This example wires the picker into live UI feedback. When a date is selected, the page immediately updates a status line below the input.
The output line updates as soon as the component fires its selection callback.