QCalendarTask renders task rows against a calendar timeline. The left side holds task metadata and hierarchy, while the date cells show task activity, logged time, or progress across the visible range.

Use this calendar for project planning, timesheets, roadmaps, work breakdowns, and reporting views where users need to compare task rows against dates. It is especially helpful when tasks have child rows, custom heights, or summary footer rows.

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.

Date Type

Use date-type when task calendar dates need to match the format used by your task data. This keeps task ranges anchored to the intended date values.

Dark

Use the Toggle Dark Mode control to compare the task calendar in light and dark styling without changing the global site theme.

Alignment

You can use the properties date-header, date-align and weekday-align to manipulate how the header area looks.

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 month 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.

Focusable Hoverable

Locale

Locale controls generated date and weekday labels. Use it when task timelines should match the language and regional formatting of your app.

Month

Month mode shows task progress across a month-oriented timeline. Use it when users need a wider planning view than a single week.

No Active Date

Use no-active-date when the model date should not be highlighted in the task calendar. This keeps timeline overviews from implying a selected day.

No Weekends

Use no-weekends when task planning should focus on business days only. This removes weekend columns from the visible timeline.

Now

The current date has been set to tomorrow via the now property.

Scroll to Date

Use scrollToDate() when a task timeline renders more dates than fit in its viewport. The target must already be in the rendered range; scrolling does not change the model value or load another range. The optional second argument is the animation duration in milliseconds. The method returns false when the date is invalid or outside 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 renders the current quarter and scrolls horizontally to a selected date within it.

Theme

The theme example shows how task calendar CSS variables can be customized without changing task layout or behavior.

Week

Week mode focuses the task timeline on a shorter planning window. It is useful when users need to review detailed work for the current week.

Recipes

Children

Colored Weekends

Custom Height

You can have each task row have it’s own specific height by including a height key (as a number of pixels, without the px) in each task object. For example:

;[
  {
    title: 'Task 2',
    key: 'TSK-592',
    height: 40,
    logged: [
      { date: '2021-03-06', logged: 3.5 },
      { date: '2021-03-08', logged: 4.0 },
    ],
  },
  {
    title: 'Task 3',
    key: 'TSK-593',
    logged: [
      { date: '2021-03-10', logged: 9 },
      { date: '2021-03-11', logged: 4.8 },
    ],
    expanded: false,
    children: [
      {
        title: 'Subtask 3.1',
        key: 'TSK-593.1',
        height: 40,
        logged: [
          { date: '2021-03-10', logged: 4.5 },
          { date: '2021-03-11', logged: 2.4 },
        ],
      },
      {
        title: 'Subtask 3.2',
        key: 'TSK-593.2',
        height: 40,
        logged: [
          { date: '2021-03-10', logged: 4.5 },
          { date: '2021-03-11', logged: 2.4 },
        ],
      },
    ],
  },
]

Multiple Footer Rows

Pass multiple items to model-footer when the summary area needs more than one row. Each footer model item is rendered as its own row and is passed to the footer-task and footer-day slots so the row can calculate a different value, such as logged hours and entry counts.

Title Rows

Gantt-like Planning

Use QCalendarTask for Gantt-like planning views when each row represents a work item and each date column represents a point in the schedule. This recipe uses the days slot to draw continuous bars and milestones over the task grid while QCalendarTask still owns the task labels, date headers, scrolling, and row layout.

Timesheet

Use QCalendarTask as a dense timesheet when each row represents a work item and each date cell stores the logged time for that item. This recipe combines task slots, day slots, footer totals, fixed cell widths, weekend shading, and a selected-day outline to create a month-period worklog 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

Task views keep rows stable while day cells move across a date range. Use the adapter-aware day-cell scope fields to show native labels or look up native-keyed work items.