2

In full calendar 4.0, an event with the time : "start":"2020-JULY-09 23:40", occupies 2 cells july-08 and July-9th in month mode as in the attached image and in Day mode also the events in the previous day those are in between the time 22:00 to 24:00 are displayed in the next day 12:00 AM . How can we avoid this particularly in month mode, I even tried with start and end also, one of the forum suggested using eventsfterrender we can achieve this and this is a feature of fullcalendar. Please suggest.

enter image description here

ADyson
  • 57,178
  • 14
  • 51
  • 63
Prabha
  • 266
  • 4
  • 25

1 Answers1

0

You said

event with the time : "start":"2020-JULY-09 23:40"

and

those are in between the time 22:00 to 24:00

are being shown on the following day as well.

From what you've written it sounds like these events don't have defined end dates/times.

If you don't specify an end date, then fullCalendar will give your events a standard length (or duration) of time. As per https://fullcalendar.io/docs/defaultTimedEventDuration this time is set as 1 hour by default.

Hence any event with a start date of 23:00 or later would have a default end time which goes into the next day. (I'm not sure about the ones you say "from 22:00" - did you mean "23:00" perhaps?)

So to avoid this you can either change the defaultTimeEventDuration, or of course if you set specific end dates, you have a lot more control over the length of your events. (You already mentioned "I tried with start and end also" but unfortunately from your description it's not clear in that case what precisely you tried and what the effect was. However it will be possible to alter the behaviour if you want to, by adding end dates.)

ADyson
  • 57,178
  • 14
  • 51
  • 63
  • Hi @ADyson, thanks a lot, please refer the link: https://github.com/fullcalendar/fullcalendar/issues/4117, it's related to day view. Now I can resolve month view issue of an event displaying in 2 continuous days with the settings : defaultTimedEventDuration: '00:10', (here I'm giving 10 minutes, because mentioned event is at 23:40, If I give 01:00 for defaultTimedEventDuration, event displays in next day also) forceEventDuration: true, – Prabha Jul 02 '20 at 08:30
  • In that GitHub issue it seems it was using fullCalendar 3, where the default timed event duration was **2** hours, not 1 - see https://fullcalendar.io/docs/v3/defaultTimedEventDuration . So I don't think it's relevant in fullCalendar 4 and 5. – ADyson Jul 02 '20 at 08:44
  • nice, I confused while seeing thangnn86 comments on Jul 4, 2019 as he encountered this issue on version 4.0.2 – Prabha Jul 02 '20 at 08:47
  • well that was an early version of v4, so you could try yourself to verify if it's fixed in later versions I guess. And no-one else could reproduce it either As the comment shows, it seems to definitely be fixed in v5. Also that v4 report was just a screenshot with no code, so there's no real proof showing what the issue actually was. – ADyson Jul 02 '20 at 08:52
  • Hi, when I set defaultTimedEventDuration: '00:10', it works well in month mode to only display on the current day, but in day mode the event displayed as a short line due to the 15 minutes setting. – Prabha Jul 02 '20 at 10:05
  • You mean like this example? https://codepen.io/ADyson82/pen/gOPoaLr . That's inevitable as the event is shorter than the default slot duration. The height of an event is always directly proportional to the amount of time it lasts for (which is perfectly logical in a time-based grid, obviously). If that's the default length you want to use, then I suggest adjusting your slot duration to match. e.g. https://codepen.io/ADyson82/pen/GRoyprZ – ADyson Jul 02 '20 at 10:16
  • checked that yes. Yes If an event is in the range, 22:00 to 24:00, for example 2020-JULY-09 23:40, it occupies 2 days in month mode, and in day mode it display in the ealry hours(12:00AM) on next day 2020-JULY-09 12:00 AM to 1:00 AM. – Prabha Jul 02 '20 at 10:18
  • Sorry I don't get your point with your last comment. That sounds like the same as your original problem, and I've just shown in the answer how to fix it, and you've accepted the answer. So what are you trying to tell me now exactly? – ADyson Jul 02 '20 at 12:45
  • Setting defaultTimeEventDuration to 10 minutes resolved the actual issue I mentioned, but due to this in DAY mode the events length is minimized, so I reverted defaultTimeEventDuration:10 minutes option, and second try I already done as using both start and end with the same date values also not resolved the issue, now my point is how to stop the event not to occupy the second day in MONTH mode and next day start hours in DAY mode. sorry for the confusion. – Prabha Jul 02 '20 at 16:21
  • "due to this in DAY mode the events length is minimized"...yes but I already told you how to fix that – ADyson Jul 02 '20 at 17:31
  • Refer back to my earlier comment which starts with "You mean like this example"... that's where I explain how to deal with the event being shown in a box which is too small. – ADyson Jul 02 '20 at 18:21
  • Day view height increases with slotDuration: '00:10', other than this is there any option to not enter previous day events into next successive day. – Prabha Jul 02 '20 at 18:24
  • Well if you don't want that to happen, you could set the defaultTimedEventDuration to 15 minutes? Or 20 minutes? – ADyson Jul 02 '20 at 18:25
  • Or like I said before, you could set proper end dates on your events. You claim you tried this and it somehow didn't work, but you never showed any real example of what you did, or what exactly the problem was. – ADyson Jul 02 '20 at 18:25
  • To resolve the issue initially I given start and end attributes with the same value as below: id:1,title:"test","start":"2020-07-03 11:40","id":3780175,"end":"2020-07-03 11:40", if start and end are having the same values fullcalendar does not consider these as valid, so it simply ignores and events have been considered in the next day, so for the next trial in my code I just increase the start time by 5 minutes and as: id:1,title:"test","start":"2020-07-03 11:40","id":3780175,"end":"2020-07-03 11:45" ,this time I cam across the similar issue with ur suggestedapproach(in day it is less height) – Prabha Jul 02 '20 at 18:41
  • As of now I am clear with the issue, now I want to restrict all events to that particular day and not displaying in the next day (in all month, week, day view), in the github link, they mentioned that "It would be a new feature to have such events only show on the first day. You could try eventAfterRender to remove or hide the DOM element of the part you don't want." – Prabha Jul 02 '20 at 18:47
  • Ok. Again you could increase the length of the event to 20 minutes and it would show up fine in the day view (demo: https://codepen.io/ADyson82/pen/MWKrmEb). So why not just do that? P.S. The fundamental problem here seems to be that you don't know what duration your events have? An event must have a length of time, a start and finish. What are these events of yours which have no duration? What exactly do they represent? Are they maybe just reminders really, rather than things which will actually occur over a period of time? – ADyson Jul 02 '20 at 19:06