Inline calendar

Inline mode renders the calendar directly in the page instead of a popup — useful for dashboards and booking flows where the calendar should always be visible.

The calendar below the input is rendered on page load and stays visible. Combine it with range or multiple mode if needed.

Code

<input id="picker">
<script>
  flatpickr("#picker", { inline: true });
</script>

← Back to the full demo · Home · Guide