# Calendar

Source: https://lumeo.nativ.sh/components/calendar

# Calendar

A date picker calendar component for selecting dates.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Calendar />

## When to Use

-   Displaying a visual calendar for date selection and browsing
-   Event scheduling interfaces where users pick start and end dates
-   Date range visualization such as booking check-in and check-out

Preview Code

Default

June 2026

Su

Mo

Tu

We

Th

Fr

Sa

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

Preview Code

Date Range Display

Check-in

June 2026

Su

Mo

Tu

We

Th

Fr

Sa

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

Preview Code

Pre-selected Date

June 2026

Su

Mo

Tu

We

Th

Fr

Sa

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

Preview Code

Min & Max Date

June 2026

Su

Mo

Tu

We

Th

Fr

Sa

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

Selectable range: May 28 — Jul 4, 2026

Preview Code

Booking calendar — disable + tooltip + badge

June 2026

Su

Mo

Tu

We

Th

Fr

Sa

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

Hover any day for the tooltip; the badge dot indicates booking status — green = available, amber = partial, red = sold out, grey = closed.

Preview Code

Date Range

June 2026

Su

Mo

Tu

We

Th

Fr

Sa

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

Pick a start date

**Mobile (rc.52).** Swipe left or right on the day grid to navigate between months — vertical page scroll is preserved. Nav chevrons are 44×44 px on mobile (`h-11 w-11 sm:h-7 sm:w-7`). Set `SwipeEnabled="false"` to opt out.

## API Reference

### Calendar

Prop

Type

Default

Description

Value

DateOnly?

null

The currently selected date. Use with @bind-Value for two-way binding.

ValueChanged

EventCallback<DateOnly?>

—

Callback invoked when the selected date changes.

MinDate

DateOnly?

null

The earliest selectable date. Dates before this are disabled.

MaxDate

DateOnly?

null

The latest selectable date. Dates after this are disabled.

IsRange

bool

false

Enables date range selection mode.

RangeStart

DateOnly?

null

The start of the selected date range. Use with @bind-RangeStart.

RangeStartChanged

EventCallback<DateOnly?>

—

Callback invoked when the range start changes.

RangeEnd

DateOnly?

null

The end of the selected date range. Use with @bind-RangeEnd.

RangeEndChanged

EventCallback<DateOnly?>

—

Callback invoked when the range end changes.

NumberOfMonths

int

1

Number of months to display side by side.

ShowWeekNumbers

bool

false

Displays ISO week numbers alongside the calendar rows.

ShowYearPicker

bool

false

Enables the year picker view.

InitialView

Calendar.CalendarView

Days

Initial calendar view. Values: `Calendar.CalendarView.Days`, `Months`, `Years`.

IsDateDisabled

Func<DateTime, bool>?

null

Custom function to disable specific dates.

DateClass

Func<DateTime, string>?

null

Custom function to add CSS classes to specific dates.

DateTooltip

Func<DateTime, string?>?

null

Per-date tooltip text rendered as the day cell's `title` attribute (native browser tooltip on hover). Return null/empty for no tooltip.

rc.20

DateBadge

Func<DateTime, RenderFragment?>?

null

Per-date indicator slot rendered absolutely positioned in the bottom-right of the day cell — status dots, count badges, icons. Non-interactive (pointer-events-none) so clicks still hit the day button.

rc.20

SwipeEnabled

bool

true

Enables swipe-left/right on the day grid to navigate months on touch devices. Set to false to disable.

FirstDayOfWeek

DayOfWeek

Sunday

The first day of the week in the calendar grid.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

## Related Components

-   [DatePicker](/components/date-picker) — For selecting dates via an input field with a calendar dropdown