I want to have a component in which I select a range of hours from the 24 hours a day of the weekend has, like this :
it was taken from here: https://github.com/clobucks/week-hours-picker
I want to know if there is a library that emulates this behavior, because as I want to use this in a vue.js 2.6 app and what I've shown here is made in javascript I dont' t know what is the best way to figure it out this
Related
Is there some component from npm for using in VueJS for a timepicker with a unique list, instead of having 2 list, one for the hour and one for the minutes?
I need something like this:
Not like this (Vue-timepicker):
Nor this (https://bootstrap-vue.org/docs/components/form-input):
Nor this (https://bootstrap-vue.org/docs/components/time):
I searched and I found a couple components like Vue-timepicker
https://phoenixwong.github.io/vue2-timepicker/#hourRange
but the user experience is horrible in my case. I dont want the user has to click multiple times to select a time. Even, I need the possibility to type the hour and minute directly without making a selection.
I found a similar component, but it is pay-mode
https://www.syncfusion.com/vue-components/vue-timepicker#:~:text=The%20Vue%20Time%20Picker%20is,directly%20in%20the%20text%20box.
I'm trying to implement new custom language in Vuetify, I want to translate vuetify datepicker months to my custom language. Is there a way to achieve this?
As clearly stated in the documentation
The date picker supports internationalization through the JavaScript Date object. Specify a BCP 47 language tag using the locale prop, and then set the first day of the week with the first-day-of-week prop
Specifically it is using Intl.DateTimeFormat to get localized month/date names. So the list of locales is not limited to the list of Vuetify localisations specified here and depends on the browser.
If you need something really special, lets say Klingon, you can override methods used to format dates via props - specifically month-format, header-date-format and title-date-format
See both variants in the demo
I'm currently making a resource management tool where I need to draw events on a calendar like Google Calendar does. I'm making this calendar in Vue and I have also tried to implement the new Vuetify calendar component but I can't get it to work the way I want so I started to make it on my own.
Now my question:
Is there any vue dependency available that lets you draw events (rectangles) on a calendar?
Vuetify's calendar gives You almost full control of the calendar including day squares (You call them rectangles) via scoped slots. You can make Your own layout and logic.
If this is not enough for You, try checking out Vue-Full-Calendar (https://github.com/CroudTech/vue-fullcalendar) or Toast UI Calendar (https://ui.toast.com/tui-calendar/) - my personal favorite.
I'm learning Vue and Vuetify right now. And I want to develop a Calendar tool combining Vuetify with Laravel.
With v-calendar it is possible to render multiple 'event-indicators'
See example
With Vuetify 'one' event indicator is possible (example), but I don't know how to manage to make it two or even three. Is there any solution for this?
Yes we can, just pass an array for all the colors you want to assign on a particular date, using the allowed-dates prop. It has been included in the vuetify examples as well.
Refer: https://vuetifyjs.com/en/components/date-pickers/#date-pickers-events
Yeah had a play around with it but doesn't seem you can get it to display multiple events as it is :( You can submit it as a feature though here and they're usually quite quick to respond if it's possible or not. Sorry I can't help any other way.
I taught myself Vue.js a couple of days ago in the evening and already created my first application yesterday which will soon be used by tens of thousands of users on a daily basis. The original was made with HandleBars and jQuery.
The only thing I couldn't get to work as of yet is the following piece of code:
$(".conversation-container").animate({ scrollTop: $(".conversation-container").prop("scrollHeight") }, 10);
I tried with the following:
var container = this.$el.querySelector(".conversation-container");
container.scrollTop = container.scrollHeight;
but unfortunately that didn't provide the same behavior.
Anyone can help me out to accomplish this so I can take jQuery out of the page and go solely Vue.js?
There is no one liner solution to get smooth scroll animations in vanilla JavaScript. If you want pointers on how to attain the same behavior please reference this answer:
Cross browser JavaScript (not jQuery...) scroll to top animation