Alignment
You can use the properties date-header, date-align and weekday-align to manipulate how the header area looks.
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 },
],
},
],
},
]TIP
If the task-min-height is more than your custom height, then you won’t see the custom height work. Either set task-min-height to a lower value or to 0 (for auto).
Dark
This will only make sense if your browser is currently in light mode.
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 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
TIP
If the property focus-type contains weekday, you can also use the Enter or Space keys for date selection.
Locale
Month
Multiple Footer Rows
No Active Date
No Weekends
Now
The current date has been set to tomorrow via the now property.