Custom placing of multiple time-axes in fullcalendar weekly view - javascript

I know that its possible to have multiple time-axes in fullcalendar. In the default settings (for v2.1.1), there are two time axes, with the second one appearing after the sixth day.
Is it possible for me to set the appearance of axes to be more frequent - say, after every 2 days? Or, if I were to somehow have a week with custom number of days (3,4,5,etc), to have the second time-axis in the middle of the week.
The current state of things, and the behaviour I'm after are displayed below.
Current behaviour:
Desired behaviour:
I've looked at the fullcalendar.js file, but have no idea what to change.

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.

How to occupy all the days in fullCalendar?

A query for those who have used fullCalendar. I use version 3 of fullCalendar.
I have the dates (the step without hour:minute) start 2020-06-01 end 2020-06-03
But I'm only occupying 2 days as seen in the picture, instead of 3 days [1,3]. I don't know why this happens.
I understand that by default you may be taking the time as 00:00 and this is giving "that problem".
The question would then be, if you need a configuration that takes the full day on the last day, and I don't know if such a configuration will exist?
This is covered in the documentation. End dates are exclusive - see https://fullcalendar.io/docs/v3/event-object .
This means your event is actually considered to end at 2020-06-02 23:59:59. Therefore it doesn't actually occur on 2020-06-03 and so is not shown on that date.
The workaround, if you wish to show it on that day, is to add one day to your end date.

Angularjs & bootstrap Datepicker, disable dates dynamically

I need to implement the following:
2 Datepickers with 2 consecutive months. The user can select a start- and an end-date.
Here is the tricky part that I can't figure out:
After selecting the start date I must enable/disable various dates.
From what I understand the disabled date are only fired once and the min-max only lets me select one range. However I need to disable/enable a multitude of dates.
I am very new to angular so I can't quite make heads or tails of the source yet.
I hope this is clear enough.
Also open to suggestions for a different datepicker directive that let's me do this. (Needs to able to default to open)

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