How to occupy all the days in fullCalendar? - javascript

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.

Related

Change the event display on fullcalendar - Full duration should not be highlighted

I have a very specific use case.
The customer would like these types of timeslots available on the calendar:
08:30
08:30
08:30
08:45
09:45
10:00
10:00
So three appointments can be made for 08:30, only 1 for 08:45, only 1 for 9:45 and 2 for 10:00.
These appointments can be of variable durations.
I have therefore set the AgendaDay grid view, to show a label in 15 minute intervals.
I plan to add a comment on a particular timeslot, saying that only 3 appointments can be booked here. And, I will make the inbetween timeslots unavailable to book. Not sure on the best way to do this but I will figure that part out.
Where I am getting stuck, is that I would need the event\booking to only display at the time of the booking, regardless of the duration of the appointment, i.e if a booking is made at 08:30, only the 08:30 - 08:45 line should be highlighted, even if the appointment is 2 ours long. I do not want a big block taking over the following time slots. I hope that makes sense.
I have tried eventDisplay: 'list-item', but this is not working and I need it to display in the same way for all views, i.e. day, week and month
I have tried googling and am unable to find a solution.
Am I perhaps missing something obvious? Or does anyone have any thoughts please?
Thank,
Regards,
LJR

How do I make my business hours appear on weekends?

I am using the premium scheduler plugin, and have my resources created with business hours set up with the following implementation: https://fullcalendar.io/docs/businessHours-per-resource
This works fine, and I am only displaying one day at a time, so I have not included the daysOfWeek attribute within the object.
My issue is that when I am on a day that is a Saturday or Sunday, the business hours do not render. The entire day is greyed out as if the resource is unavailable that day, which in my case is not true.
Is there some attribute I am missing on the calendar model? Something like showBusinessHoursOnWeekends: true?
You mentioned you didn't include the daysOfWeek setting for your business hours. You said you did this because "I am only displaying one day at a time". However this makes no sense. The daysOfWeek setting specifies which days of the week the business hours apply to. It has no relationship to how many days your calendar's view is displaying simultaneously. FullCalendar still needs to know which calendar days to show business hours for, and which not to, so that when the user moves to the next day, it knows what to show.
If you don't include daysOfWeek, fullCalendar defaults to assuming Monday-Friday. (This is not documented, but the behaviour is observable by simply removing the setting from any existing businessHours definition.).
If we set up a simple demo using a businesshours where the same hours apply 7 days a week we can see that in all views, the business hours are shown correctly all days. Demo: https://codepen.io/ADyson82/pen/OJyGGeJ .
Adding this one line of code is all you need to do to solve your problem:
daysOfWeek: [ 0, 1, 2, 3, 4, 5, 6 ],

Custom sorter for two values on same column

I have a column in sapui5 table where I am using two values to be displayed in an HBox; "date" and "time". Moreover, in leading property field, I have defined "date" field.
I have a personalization box for this table, where it provides sorting functionality based on "date" field (since "date" is defined in leading property, and one can only have single leading property for a column).
Date sorting-> works fine and as expected.
Issue is, for same dates, I cannot sort further based on time. So in the picture below, I should get 22:01 first, and then other 22:56 data. This is not happening.
I want to know if there is any way I can implement more than one condition in p13n sorting? If yes, how? I tried to find also some CDS annotations which can be used but found none.
Thanks in advance.
I found the issue. Actually, SAP backend has two date formats for 12'o clock; 00:00 & 24:00.
Ideally, 00:00 means 12'o clock at the start of the day & 24:00 means 12'o clock at the end of the day.
However, SAPUI5 right now does not support 24:00 in sorting. (You can also not select 24:00 as time in date picker, the max you can select is 23:59).
Hence, sorting in my case was correct, how ever it was seeming wrong because 24:00 is converted to 00:00 by UI5.
There is no direct solution provided by UI5. What I did was to reformat the time to 24:00 in formatter.js.

jQuery ui datepicker, select range of whole weeks only

I need to create a jQuery ui datepicker that will let users choose a start week of the year, and an ending week of the year. IE: Always Sunday - Saturday. Is this possible?
DatePicker can restrict a user's selection, but only as far as restricting the user between two dates (minDate and maxDate options). As far as I'm aware, there's no built in functionality that can restrict selection to only Sundays or Saturdays.
DatePicker does however have a means of calculating the week of a user's selection with the following snippet of code:
$.datepicker.iso8601Week(new Date(dateText))
You can see how this could be utilised in the following jsFiddle (read below, first).
The only problem with this is that the ISO-week always starts with a Monday. So even though in the demo above I have set Sunday to be the first day of the week, if you try selecting the date Wed 7th March 2012 you'll see in the datapicker it shows as week 9, where the ISO-week will return 10. I left it in on purpose to show you this pitfall.
Although this doesn't provide a direct solution to your problem, hopefully it'll help in determining if you should use DatePicker at all to produce your desired functionality.
edit
Actually, just found this question which might be of use to you, looks like it's possible : Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?

duration and repeat

I'm trying to put the logic together for this and it seems like I cant get no where. I have my repeat all set depending on week(s). But what about duration? Let's say someone is schedule for 2 days (duration) for every week (repeat). How would I put this together depending on two given dates?
http://jsbin.com/usori3/15/edit
Hopefully this page will have all the answers Javascript date object. You can add days to a date to get a new date (2 days for your schedule) then add another 5 days (to complete the week) to start the repeat. Compare that date to your end date to see if you've finished. As Daniels says in the comments, it would be good if you could be a little more specific, but I hope that answers your question or at least points you in the right direction. It may even be worth looking at JQUERY to see if there's a plug in for the date handling that may help you further.

Categories

Resources