QCalendarDay renders one or more days as a vertical time-grid. It is the best fit when users need to see how events line up against hours, intervals, and the current time within a focused schedule.
Use this calendar for appointment books, daily planning, room bookings, service dispatch boards, and any workflow where start time, duration, and overlap matter more than a broad month overview.
Scroll Events
Listen to @scroll for live updates from the internal scroll area and @scrollend for one update after scrolling settles. Both events receive a CalendarScrollEvent object with the native event, scrolling target, scrollLeft, scrollTop, scrollWidth, scrollHeight, clientWidth, and clientHeight.
When no-scroll is enabled, listen for scroll events on the external scrolling element instead.
Date Type
Use date-type when the day calendar should interpret the model date in a specific way. This is helpful when integrating with data sources that normalize dates before passing them into the calendar.
Dark
Use the Toggle Dark Mode control to compare the day calendar in light and dark styling without changing the global site theme.
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 extend beyond its 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.
Scroll to Date
Use the scrollToDate() method to bring a date that is already rendered in a wide calendar into view without changing the model value or rendered range. The optional second argument controls the animation duration in milliseconds. The method returns false when the date is invalid or is not part of the rendered range; those requests are not retained. A valid request made from a parent’s onMounted() while date columns are still registering is completed after the current render flush.
This example uses the day calendar’s month view with fixed-width date columns.
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.
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.
Hour 24 Format
Use hour24-format when interval labels should display with 24-hour time. This is common for scheduling, operations, and internationalized apps.
Locale
Locale controls generated date and weekday labels. Use it when the calendar needs to follow the same language and regional formatting as the rest of the app.
Max Days
Use max-days to render multiple consecutive day columns from a single day-view calendar. This is a good fit for compact multi-day schedules where a full week would be too wide.
Month
This example switches the day calendar into a month-like display through the wrapper mode. It is useful when comparing behavior shared across calendar modes.
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
Use no-active-date when focus or selection should not visually mark the model date. This keeps read-only schedules from looking like the user has chosen a day.
No Header
Use no-header when the surrounding UI already provides date context or custom navigation. The calendar body still renders intervals, but the built-in header is removed.
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.
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.
Theme
The theme example shows how calendar CSS variables can be overridden to create a custom look while keeping the same calendar markup and behavior.
Transitions
Transitions animate movement between day ranges. They are most helpful when users need a visual cue that Prev and Next moved the calendar through time.
Intervals
Interval Count
interval-count is the number of interval rows the calendar renders. It is not an hour value by itself; it is counted in whatever unit interval-minutes defines.
With the default interval-minutes of 60, each interval is one hour, so interval-count="4" renders four one-hour rows. If interval-minutes is 30, the same count renders four half-hour rows, or two hours total.
Use this formula when planning the visible range:
visible hours = interval-count * interval-minutes / 60
Interval Height
Interval Minutes (15)
Interval Minutes (30)
Interval Start
interval-start is the number of intervals to skip from midnight before rendering the first row. It uses the same unit as interval-minutes.
In this example, interval-minutes="30" means each interval is 30 minutes. interval-start="18" skips 18 half-hour intervals:
18 * 30 minutes = 540 minutes = 9:00 AM
interval-count still controls how many rows render after that start point. Here, interval-count="16" renders 16 half-hour rows, so the visible range is 9:00 AM through 5:00 PM.
Modify Intervals
Using the properties 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).
Selected Intervals
The example below uses the selected-dates property with mouse events to toggle individual time intervals. Click an interval to select it, and click it again to remove it from the selected list.
Slots
Column Header
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.
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.
Head Day
Head Day (Event)
Head Intervals
Recipes
Custom Header
This example shows how you can build your own custom navigation bar.
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).
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.
Server Data
This recipe keeps the calendar empty until you click Load visible range. The button simulates waiting for a server response, then fills the visible calendar with data returned for the current range.
Calendar Adapters
Day views use Timestamp calendar adapters for date-bearing values and expose native slot metadata when headers, badges, or native-keyed events need native calendar dates.