Customizing Header of Calendar

UI Components for Vue
Post Reply
LukasS
Posts: 2
Joined: 12 Jan 2022, 09:04

12 Jan 2022, 09:13

I'm trying to create a custom header for the Calendar Widget and want to get rid of the default navigator. I tied to set

Code: Select all

display: none;
for

Code: Select all

.p-datepicker .p-datepicker-header .p-datepicker-prev, .p-datepicker .p-datepicker-header .p-datepicker-next
and

Code: Select all

.p-datepicker-title
but noting changed. Editing these classes in the browser let them disappear.

Code: Select all

<style>

    * :deep(.p-datepicker-prev, .p-datepicker-title) {
        display: none !important;
    }

    * :deep(.p-datepicker .p-datepicker-header .p-datepicker-prev,
            .p-datepicker .p-datepicker-header .p-datepicker-next) {
        display: none !important;
    }

</style>
Can anyone tell why that isn't working?

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

24 Jan 2022, 08:50

You need to use scoped css

```
<style scoped>
::v-deep(.p-calendar .p-datepicker .p-datepicker-header) {
display: none;
}
</style>
```

LukasS
Posts: 2
Joined: 12 Jan 2022, 09:04

24 Jan 2022, 16:29

tugce.kucukoglu wrote:
24 Jan 2022, 08:50
You need to use scoped css

```
<style scoped>
::v-deep(.p-calendar .p-datepicker .p-datepicker-header) {
display: none;
}
</style>
```
That doesn't do anything for me. Any ideas what the problem is?

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests