Components: Feature request: Enable/Disable label in calendar-body

[lordgit]

Bug, feature request, or proposal:

feature request

Disable label in calendar-body.html

Line 5: Line 22:

What is the expected behavior?

default enable, but could be disabled visibility.

What is the current behavior?

is alway visible

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

What is the use-case or motivation for changing an existing behavior?

We need this for customer request, wouldn't have label there

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Anguarl 6.0.8, Material 6.4.2

Is there anything else we should know?

[josephperrott]

You should be able to control the visibility of the label via css targeting the mat-calendar-body-label class.

[timruhle]

I would like this feature as well, or at least some guidance for the css. Here are the things I can achieve, neither or which are quite right.

As you can see in this example the first row doesn't align properly

.mat-calendar-body-label {
    display: none;
}

As you can see in this example there is a row of white space which I don't want

.mat-calendar-body-label {
    visibility: hidden;
}

[mihdemarko]

I would like this feature as well, or at least some guidance for the css. Here are the things I can achieve, neither or which are quite right.

As you can see in this example the first row doesn't align properly

.mat-calendar-body-label {
    display: none;
}

``

Hi, you should be more specific using css selectors.
.mat-calendar-body-label also creates free space in the beginning of calendar. Try this workaround:
[aria-hidden=true] .mat-calendar-body-label { display: none; }
This is for whole line label. And:
td.mat-calendar-body-label { visibility: hidden; }
This for partial line label.

[x1c0]

@mihdemarko unfortunately this is not enough since only using css to hide stuff is not taking in consideration when the height is calculated.. look how it looks here:

cool would be some input where we could hide the body

[Totati]

These selectors can be used for hiding the label, and not breaking the date positions.

.mat-calendar-body-label:not(:last-of-type) {
    visibility: hidden;
}
.mat-calendar-body-label:last-of-type {
    display: none;
}

I think the fix height is intentional, otherwise changing months would result in jumps. Imagine clicking a datepicker the bottom of the screen, it opens an overlay above the trigger. If the height is not fixed and you interact with the calendar it would jump down, or reveal space between the trigger and the calendar. I think neither of these scenarios are better than the current.

[x1c0]

Sure I understand that, since my intention is to remove 1 row of the table then it would be nice that, that change was taken into consideration when calculating the height (and this cannot be achieved by CSS only)

here I have a 6 rows month (the bigger possible) and still there is this last unnecessary table row:

[Totati]

Now I understand your problem. You have to override this value. Since it's a scss variable, but it's not a default one, you can't override it. You have to calculate your calendar height by hand like they did, and add a selector to your calendar like this:
.mat-datepicker-content .mat-calendar { height: 300px; }

[duxor]

You can try something like this (works for me - I have a custom dialog):

.datepicker-dialog { // custom class
    max-width: 700px !important;
    width: 100vw;
    position: absolute !important;

    .mat-calendar {
        width: 100vw;
        max-width: 100%;
        height: 100vw;
        max-height: 700px;
    }

    .mat-calendar-body-label:not(:last-of-type) {
        visibility: hidden;
    }

    .mat-calendar-body-label:last-of-type {
        display: none;
    }
}

[andrewseguin]

Sounds like this issue has been resolved using style overrides

[RkSabando]

Now I understand your problem. You have to override this value. Since it's a scss variable, but it's not a default one, you can't override it. You have to calculate your calendar height by hand like they did, and add a selector to your calendar like this:
.mat-datepicker-content .mat-calendar { height: 300px; }

use height:auto !important; instead

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}