Dark
This will only make sense if your browser is currently in light mode.
Alignment
You can use the properties date-header, date-align and weekday-align to manipulate how the header area looks.
Cell Width
You can specify the cell-width property to make your calendar overrun it’s horizontal boundaries.
The calendar goes into a special sticky mode when this happens so you can scroll vertically and/or horizontally.
Date Type
Disabled Before After
All days before and after the current day have been disabled with the properties disabled-before and disabled-after.
Disabled Days
The example anchors its date to a visible week and disables a short run of visible days with the disabled-days property.
The first example uses an array of dates to disable each specific date.
The second example uses the object form with from, to, color, and textColor to create a reservation-style disabled range.
Disabled Weekdays
The weekends have been disabled with the disabled-weekdays property.
Drag and Drop
Drag any items in the list to a calendar interval or the top header.
TIP
Don’t use css border to outline a cell. It won’t look right because the calendar is already using the borders and some are explicitly turned off.
Instead use box-shadow to create an inset like this box-shadow: inset 0 0 0 1px rgba(0,140,200,.8).
First Day Monday
Five Day Workweek
Focusable/Hoverable
TIP
If the property focus-type contains weekday, you can also use the Enter or Space keys for date selection.
Interval Count
Interval Height
Interval Minutes (15)
Interval Minutes (30)
Interval Start
Locale
Modify Intervals
Using the proerties interval-minutes, interval-start and interval-count, you can control how the calendar looks in terms of the range of intervals.
This has been a difficult concept for some to grasp.
Basically, think of a base interval as 1, which is 60 minutes. To display a full day, the interval count would be set to 24. Say you want the calendar to start at 06:00 in the morning, so you set interval start to 6. What happens now, is the intervals start at 6am, but the last 6 intervals got pushed into the next day. In this case, you must remove 6 from the count, thereby making interval count 18 (24 - 6).
Now, we change interval minutes to 15 (for 15 minute segmented intervals). That means, there are 4 times the number of intervals to deal with for each hour. A full day would then be 96 (24h x 4). Starting at 06:00 means interval start would be 24 (6h * 4), which also means we need to remove that number off the end to prevent bleed-over onto the next day. The interval count then becomes 72 (96 - 24).
Navigation
This example uses the use-navigation property along with the focusable and focus-type properties.
If the calendar has focus you can use the ← and → keys on your keyboard for navigation.
On the intervals, you can use Tab and Shift+Tab for navigation.
No Active Date
No Header
No Scroll
When the property no-scroll is used, you must provide an outter div that has overflow: auto to control the scrolling.
TIP
Note that the date header now scrolls with the rest of the calendar.
Now
The current date has been set to tomorrow via the now property.
Selected Intervals
Selection
The example below uses the selected-start-end-dates property in conjunction with mouse events to select interval ranges.
TIP
Try toggling the Mobile selection to see how selection can be changed.
Slot - Column Header
Slot - Day Body
This example uses both the day-body and head-day-event slots.
You can click the head-day-event badges which will call the calendar’s scrolltoTime method.