I just create a full calendar with vuetify using v-calendar based on documentation
But i have trouble to disabled date. Example: " i want to disable all sunday."
Any idea?
Thank You.
It's quite tricky, though if you want to disable the "day" button in calendar monthly view, you can use day-label slot.
<template #day-label="{ date }">
<v-btn
fab
small
:disabled="isSunday(date)"
>
<span v-text="day" />
</v-btn>
</template>
#bill.gates answer is correct. You should be able to disable all sundays with this prop:
:disabled-dates="{ weekdays: [1] }"
[1] stands for sunday as it is the first day of the week. Maybe you should review your code and remove the other props to check if there is one causing conflict.
Yea with this prop:
:disabled-dates='{ weekdays: [1, 7] }'
This should for example disable saturday and sunday.
Related
I started to use vuetify 3 beta, I know it is not stable according to the documentation but I still tried.
<v-text-field placeholder="Type a name" class="v-field__outlined" outlined></v-text-field>
End result is the basic vuetify text field.
How do I fix this, any help is appreciated!
The styles are no longer individual prop values.
Styling options are now set via a prop called variant
variant="outlined"
It is also no longer possible to mix the different styles and rounded appears to be missing so far.
https://next.vuetifyjs.com/en/components/text-fields/#variant
I am writing an automation test that checks user's ability to schedule an appointment via the calendar. Some dates on the calendar are disabled (aria-disabled="true" ), some are enabled and available for selection (aria-disabled="false"). Depending on when the test is running, the disabled/enabled status of each date is going to change. How do I use Cypress to select the first date button that is not disabled?
Here's what the button's HTML look like, just in case:
<button class="calendar-date" aria-label="Thursday July 28th, 2022" aria-pressed="false" aria-disabled="false" tabindex="-1" type="button" data-datestring="ThuJul282022">
28
</button>
You can filter the buttons
as a chained command
cy.get('button.calendar-date')
.filter('[aria-disabled="false"]') // buttons not disabled
.eq(0) // first one
.click()
as part of the selector
cy.get('button.calendar-date[aria-disabled="false"]') // buttons not disabled
.eq(0) // first one
.click()
An alternative to Fody's is to use .first(), which is just syntactic sugar for .eq(0).
cy.get('button.calendar-date[aria-disabled="false"]')
.first()
.click();
An alternative is to use :eq(0) pseudo selector.
There was a :first as well, but it's now deprecated.
cy.get('button.calendar-date[aria-disabled="false"]:eq(0)')
.click();
Is it even possible to search in expand slot in v-data-table?
According to my test below it doesn't work, try to search expandData property in items
<template slot="expand" slot-scope="props">
{{ props.item.expandData }}
</template>
codepen test
What should I look further for next step in case if need this kind of search for my project?
Thanks in advance
Do you know where can i find an implementation of the super select of Google Data studio with the "Only" to select only that element ?
you can also filter results , super handy if the list is long :
There is a feature request for select-all functionality, and apparently it will be possible using to-be-implemented scoped-slot called prepend-item.
So currently you will need some workaround.
Updated codepen with prepend-item slot which came in version 1.2:
https://codepen.io/anon/pen/EdVpmY
(must look into filtering more so I'll update if something changes)
Note prepend-item is also part of the parent v-list component, so we can't easily fix controls to the top.
<template slot="prepend-item">
<v-list-tile #click.stop="selected = selectedAll ? [] : states.slice()">
<v-list-tile-action>
<v-icon :color="selected.length > 0 ? 'indigo darken-4' : ''">{{ icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-title>Select All</v-list-tile-title>
</v-list-tile>
<v-divider class="mt-2"></v-divider>
<v-list-tile class="search-tile">
<v-text-field v-model="q" prepend-inner-icon="search" class="pt-0"></v-text-field>
</v-list-tile>
</template>
With regards to select-only functionality, you can use already supported scoped-slot item (see scoped slots in API docs) , and add select-only button yourself:
<v-select v-model="selected"
multiple
>
<template slot="item" slot-scope="data">
<v-list-tile-content>
<v-list-tile-title>
{{ data.item }}
</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action class="hidden">
<v-btn #click.stop="selected = [data.item]">ONLY</v-btn>
</v-list-tile-action>
</template>
</v-select>
Codepen, note that some CSS is added as well.
Expanded codepen with select-all workaround using watch, and one of the items is "All". So if we want array of selected without "All" we can do something like return this.selected.filter(v => v !== "All") in computed property or wherever it's needed.
As much as I can see this is a custom component. The one you are showing is probable made with angular + material like in this example: https://stackblitz.com/edit/angular-material-select-multi-c6vtux
So I think that you probably will end needing a component like vue-multiselect, that is fully featured and probably will accomplish what you need and more, the only thing is that you will need to work on it to use material styles.
https://github.com/shentao/vue-multiselect
https://vue-multiselect.js.org
I guess, that if you need more features, you might be able to customize the template https://vue-multiselect.js.org/#sub-custom-option-template
Now check ¨Custom configuration¨, there you will find some examples that will show you you can actually do something like the "only" with some effort.
This is the most complete component I have found for vuejs to handle multi select.
I hope it helps.
It's a feature that hasn't been implemented. Ask you desire feature HERE.
Hope it help you.
I want to change next example:
http://livedemo.exadel.com/richfaces-demo/richfaces/calendar.jsf?tab=organizer&cid=1157294
to have ability to set up weekends and hollydays.
And I have q few questions:
1) why I could use data.shortDescription/data.description in the next code:
<div>
<h:outputText value="{data.shortDescription.escapeHTML()}" />
</div>
<div>
<h:outputText value="{data.description.escapeHTML()}"/>
</div>
Can I use something else to show the text in the current date?
I want to add boolean isDayOff field to CalendarDataModelItemImpl, but I don't know, how I will retrieve it and show, and also save.
How can I set up or cancel weekends using richfaces Calendar (maybe using dataModel maybe not)
Could anyone give me some ideas or example?
Also I need to show this new weekends with red color.
You can change the style of each day, using the dayStyleClass attribute. It should point to a javascript function, that takes an argument day and returns a css class selector. Check the "client side disable/styling" tab of the examples.