How to limit selection to x successive slots - javascript

I'm trying to use FullCalendar in my first web app. What I'd like to do is to make a selectConstraint that would allow selection of x successive slots but not x+1. E.g it would be possible to select 4*30 minutes times but not 5*30 minutes anymore. Is there a easy way to do this? Other option would be to allow selection but then unselect ones which go over this but it's not very nice..

Related

How to dynamically change a field depending on a unique date formula

I'm working on a work schedule of sorts, a feature that I'm trying to create would be one that can be setup initial and would not need to be touched ever again. However I'm not sure where to even start; I have a weekly schedule with three different fields, a middle field that is unique and requires no attention and a day/night field. My user is able to drag users into these fields and set that they are expected to working during that period. However as my user has different shifts that sometimes overlap I'm looking to color code each of the shifts of which there is a total of five, the shifts go on a pattern of working: 2 nights, than 2 days off, than 3 days working and lastly than 2 days off. What would be the best approach of mapping this as I cannot simply put that Monday nights are color X as the by the time next weeks comes around the shift would be starting on Wednesday, along side this some shifts will be working at the same time so the color coding should not cover the entire day but only a limited number of entries (2). My initial idea was to try using Hashmap or something of the sort but I'm uncertain how I would structure it to achieve what I'm looking for..
Drag and drop experience would be nice but I assume not mandatory, so can try to use standard features. Im not sure which user is using this - the worker doing the shift, or a manager allocating workers to the shifts? If is for a manager - If you created a 'shift' object and had shifts represented as records you'd be able to create list views of those shifts ie. 'next n days','this month' etc. Then you could use bulk action within the list view to assign a user to multiple shift records at a time. Would be reasonably efficient and quick to build. Just a thought... (and I couldnt follow what you meant about color coding sorry.)

React fullcalendar change selectAllow behaviour

I'm working on a calendar view that will allow user to make a reservation for a specific day and time. My problem is current behaviour of selectAllow function.
I want to restrict the user to be able to select max 2 slots (60 minutes in that example), and if he selects more, the selection should stay at the maximum possible time range, instead of disappearing and showing the not-allowed cursor. Would that be possible?
A fiddle for better visualization:
https://codesandbox.io/s/fullcalendar-forked-vm3k5y
Try to select more than 2 slots in a single day.

multiple timepicker range in chronological order for taking input from userin webpage jquery or any other

i want a UI for the web application so that the user can select time range in chronological order. like the
my requirement is as follows
1) i need the rows to be added dynamically
2) Need to have the time range check so that added time slot is not displayed for the next row for selection, so if first row is 00:00 to 00:10 the user should not be able to select time less than 00:10 in the below row
3) for the time interval the user will be select for the start time and end time, but for the overall table it should be within 24 hours (one day, ie 00:00 to 23:59)
i googled a lot, but could not find any jquery or any other script for achieving the implementation of UI and the corresponding time range selection. Can someone point out how to achieve this with any jquery or other java script library ????
thanks for the help, as i am new to these it will be a great help if someone can help me
thanks
Dino

What's the cleanest way to allow a user to specify a range of date / time stamps in html / javascript?

I have a simple javascript which displays data on a canvas between two timestamps.
Most of the time, my users are likely to want to quickly navigate to a specific range of dates / times but sometimes thwy will also want to explicitly state a range.
Is there libraries etc. which could be used for this or should I just roll my own?
I've found the solution with timepicker.

jQuery FullCalendar: Can I highlight some time ranges so that users know they are selectable?

I have an application in which the selectable time ranges are variable. That is, in the week view, for monday I may want the user to only be able to select times from 12:00 to 14:00h. On thursday only from 17:00h to 19:00h and so forth.
I know I can handle the select event to constrain the user but I would like to present a visual indication of that time ranges are selectable. I also know I can use minTime and maxTime to limit the time tables but I need the weekView, in which time ranges are variable.
I searched the documentation and the web and found nothing.
Any suggestion?
The weekView (as opposed to the agendaWeek) has no grid of times, so how would you choose where to display the time ranges?
If you mean the agendaWeek the structure of the HTML makes what you want to do very difficult as essentially its made of two superimposed tables, one with the columns and another with the rows (for the different time blocks of half hour or whatever). The only way to do what you want would be to superimpose divs of the right size on top of that matrix. I can give you some hints if you want to attempt that!

Categories

Resources