Dark
This will only make sense if your browser is currently in light mode.
3 Day
With the QCalendarDay calendar using the day view, any number of days can be set with the max-days property.
TIP
The first day displayed will always be today’s date or the initial date of the modelValue.
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.
This example also uses the max-days property.
Column Count
The column-count property allows for a single day to be displayed multiple times.
Column Count Plus
You can customize the display further via the head-day slot.
Custom Header
This example shows how you can build your own custom navigation bar.
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 day and disables that visible date 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).
Hour 12 Format
Interval Count
Interval Height
Interval Minutes (15)
Interval Minutes (30)
Interval Start
Locale
Max Days
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).
Month
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
The example below uses the selected-dates property in conjunction with mouse events to toggle 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.
Advanced
Mouse Wheel Resize and Move
This example uses the day-body slot to render interval events, then adds wheel handlers to resize, move, and zoom the day view.
Slot - Day Container (Show Current Time)
The example below uses the day-container slot to show a current time indicator absolutely positioned.
TIP
You might have to scroll down to the current time to see the example working.