Calendar
You can edit 8 Components for free. Get premium for unlimited access.
A date field component that allows users to enter and edit date.
Figma
The Card component is used to group elements together and allows quick access to features.
1. Reference
This component inherits props from the Card.
2. Size
You can edit the size with the md or lg parameter.
Image 2.1 : Size md
Image 2.2 : Size lg
3. State
You can edit the state with the default, active or disabled parameter.
Image 3.1 : State default
Image 3.2 : State active
Image 3.3 : State disabled
4. Description
You can edit the description with the true or false parameter.
Image 4.1 : Description true
Image 4.2 : Description false
Preview
Preview
Code
DlCalendar.month(
year: 2026,
month: 2,
initialStartDay: 10,
initialEndDay: 14,
disabledDays: {27, 28},
pricesByDay: {
1: '\$120',
2: '\$110',
10: '\$180',
14: '\$210',
},
)Usage
Add this code example to your project to see how the component works.
DlCalendar.month(
year: 2026,
month: 2,
initialStartDay: 10,
initialEndDay: 16,
disabledDays: {27, 28},
pricesByDay: {
1: '\$120',
2: '\$110',
10: '\$180',
16: '\$210',
},
)API Reference
DlCalendar provides a responsive 7-column monthly calendar with interactive range selection, optional per-day prices, and automatic month-grid generation via a simple month(...) API.
Discover more content
You have questions or need help?
You want to try?
Save time and money?