Outside Days

Fill the first and last rows with days of the neighbouring months. This page documents @pglejzer/datepicker-ui, the companion of timepicker-ui.

Selectable outside days

#

ui.outsideDays: true shows the days of the previous and next month in the first and last rows. They can be selected like any other day.

Selectable

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  ui: { outsideDays: true },
6}).create();

Dimmed days and fixed weeks

#

With { selectable: false } the outside days are dimmed and inert. ui.fixedWeeks always renders six rows, so the calendar keeps its height from month to month.

Inert and fixed

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  ui: { outsideDays: { selectable: false }, fixedWeeks: true },
6}).create();