I want to have a custom button that shows next/before month/year in PrimeVue. It has a calendar component but could not find the available method to implement the function.
Does anyone know how?
Thanks!
Related
i've implemented a v-calendar base on the vuetify docs , but i'm not able to disable the click event for the past days so the user can't create events in the past days , thanks
You need to check a event and if event start date < today, do return
But also you can do it before push to events
https://vuetifyjs.com/en/components/calendars/#drag-and-drop
I have a sporadic problem with Bootstrap Vue Modal.
I’m not that experienced with Vue and I’m not able to show the entire code because of my agreement with the project owner, also, it would be too much code to show anyway, so I’ll explain the issue. I’m hoping to get some hints to see what the issue can be because I’m out of ideas. So, here is the project info and issue I’m having:
I have created an event calendar.
The calendar shows month format and events are listed inside each day.
I stored year, month and day variable in the Vue instance data section.
I created a method that sets the calendar (setCalendar: function (year, month)).
I used “created” to setup the year, month and day as the current date when the page is loaded and vue is initialized and setCalendar.
I created Previous and Next buttons and next and previous functions which when clicked, the functions deducts (month--) or adds (month++) accordingly and sets the year, month and sets the calendar, (setCalendar).
I created <b-link v-b-modal="event.today_date + '-' + (index)"> and related modals <b-modal :id="event.today_date + '-' + (index)" :title="event.event_title"> for each <b-link>
When the page is initially loaded, the links to modals work perfectly, but for example, if I click on Previous button and load June calendar and events, and click on Next button to go back to July calendar and events, there will be one or two July <b-link> that links to June modals and the rest of <b-link> for July works fine. So, when I load June calendar and events and go back to July calendar and events, about 10% of July b-links, link to the June modals and of course when I click on those b-links, it does not load the modals because the modals do not exists in July calendar.
I can see this using Vue dev tools. When I click on a none working <b-link>, it links to a modal from the previous or next month. This is only affecting 10% of b-links and it only happens when I load the previous or next month calendar.
I appreciate if anyone can give me a clue as to what is causing this.
#Bert had the correct answer and solved the puzzle.
I used unique keys for all b-links and b-modals, and everything started working as it should.
I'm attempting to create something with a similar layout to this schedule page.
See attached screenshot also.
.
So what I need is:
- "Categories" across the top of the scheduler (Vertical dividers).
- "Timeslots (07:00 07:30, etc..)" down the left of the scheduler.
User's can then add events via modal screens and assign them "Timeslots" and "Categories".
They should then appear in the Schedule in the appropriate locations.
The above mentioned example appears to be using Dojo.
I found this calendar widget but am unsure of how to get it to represent "Categories" across the top when using the "Day" view.
Is this possible with the dojo calendar widget? (I've never worked with Dojo before)
Any suggestions as to other frameworks or example's that would provide me with this functionality would be very welcome also.
I've looked at JQuery's fullCalendar plugin and it doesn't seem to provide this functionality (Would be great if someone could prove me wrong!).
After looking at Dojo's widget documentation I think the Sub-Column display is what you are looking for. So each Calendar in this case will represent a category. http://livedocs.dojotoolkit.org/dojox/calendar#sub-columns.
I don't think FullCalendar is capable of the category layout, but I think its cool enough to request: http://arshaw.com/fullcalendar/wiki/Request-a-Feature/
Hope that helps!
Is there any way to use the Show Single Category feature within a calendar view?
The problem I have is that the first field in the view needs to be sorted based on the category that it will be searched with - but with a calendar view, the first field needs to be sorted in ascending order so that the calendar is created properly.
All i'm trying to do is populate a calendar and then make it possible to select a name from a list - which then shows only the appointments for that name in the calendar view.
Is anybody aware of any workarounds for this?
Thanks.
it is currently not possible to filter calenders. we have the same problem using the calendar from extension library in xpages.
I've already read all available documentation and I cannot find a solution.
I have a calendar outside of the grid which on click returns a date. All I need to do is filter my jqGrid based on that date. Can someone point me to the correct API method?
Thanks!
You could do the filtering server-side. Attach an event to the calendar such that when the date is changed, the grid will be reloaded by data from the server. When you do the reload, pass the date to the server so that it can do filtering based upon that date.
See reload-a-loaded-jqgrid-with-a-diffent-table-data for some pointers on how to reload the grid.
Perhaps my example here will help you:
How to filter the jqGrid data NOT using the built in search/filter box
(I do the same thing, but filter my jqGrid data based on a textbox value, outside of the jqGrid.)