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

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

Related

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.

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 ],

Primeface's scheduler. How to change the background color of weekend day using javascript?

This is a question related to the scheduler object of Primefaces. I want to change the css of the scheduler object but I do not know how to do. I have searched everywhere in the internet but I am not manage to find the answer.
In my country, the majority race is Muslim. We have 13 states and they can be divided into two:
1) States which have Friday and Saturday as weekend.
2) States which have Saturday and Sunday as weekend. (This is like what happens in America)
I have added a drop-down for state.
If user selects #1, there will be new background colour in the column of Friday and Saturday.
If user selects #2, there will be new background colour in the colomn of Saturday and Sunday.
Can I know how to achieve this? Thank you.
Jimmy

Google Analytics Unique Visitors by DAY doesn't match by WEEK

When I'm checking unique visitors per DAY I see the following pretty-steady graph:
However, when I change the time-span to WEEK, I see this hugh drop:
Same thing happens when evaluating the exported CSV files. The SUM(7days) just doesn't add up to WEEK values. How can this be?
can you check the selected date range?
I would make sure that the date-range selected has the same days as starting and ending days.
For example: If you are looking at July - August data, it would make sense to pick those two for example:
Jul 7, 2013
Aug 24, 2013
You end up with full 7 weeks (Sunday to Saturday) and then the chart should (provided there are no peaks/drops in traffic) show display a straight line:
Hope this helps!
Petr
This phenomenon is explained by Avinash over here:
http://www.kaushik.net/avinash/standard-metrics-revisited-6-daily-weekly-monthly-unique-visitors/
If the same user comes back every day, he is counted in each of the daily views (total of 7 for the week). But when you switch to a weekly view, those same seven daily visits only count as one unique visit on a weekly basis. Thus, your overall numbers look less impressive as you expand the time tracking period.

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