locked
Fullcalendar not wrapping event correctly when Event end time smaller than start time RRS feed

  • Question

  • User2108892867 posted

    Hello everyone, I have this plunker:

    http://plnkr.co/edit/m0WYUalu9ztrdXL1

    Here is the events array:

    events: [
    
            //At run time, this APEX Repeat will reneder the array elements for the events array
             {
                title: "Birmingham Comic Con1",
                start: new Date('2014-11-21T09:00'),
                end: new Date('2014-11-22T08:00'),
                allDay: false,
                id: 1
            },
            {
                title: "Birmingham Comic Con1",
                start: new Date('2014-11-21T09:00'),
                end: new Date('2014-11-22T09:10'),
                allDay: false,
                id: 2
            }
          ]

    If you checked the event id 1, the wrapping on the calendar ended on 21st. Visually it's confusing because I think it should expand to 22nd with 08:00am as the end time. Did I miss something? Any reasons why it's doing that? 

    Thanks. 

    Wednesday, June 10, 2020 2:18 AM

Answers

  • User2108892867 posted

    I finally found the reason. It's because of one property call nextDayThreshold. Here is the explanation. 

    https://fullcalendar.io/docs/v3/nextDayThreshold

    For some reason fullcalendar v.3 the threshold is set to 09:00:00 instead of 00:00:00. So we have to manually add 

    nextDayThreshold: '00:00:00'

    make it appear correctly.

    Hope it would help others too.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 11, 2020 4:33 AM

All replies

  • User-719153870 posted

    Hi asplearning,

    Seems in version 2.3.3, the fullCalendar takes every 24 hours as a day. Which means, in your case, 2014-11-21T09:00 to 2014-11-22T08:00 is 23 hours which is not enough to be recognized as a whole day and that's why you can see the visual confusion.

    Update to the latest version shall fix this issue. Please check Getting Started.

    Below is a demo i built to test this:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title><link href="Scripts/fullcalendar-4.4.2/packages/core/main.css" rel="stylesheet" />
        <link href='Scripts/fullcalendar-4.4.2/packages/core/main.css' rel='stylesheet' />
        <link href='Scripts/fullcalendar-4.4.2/packages/daygrid/main.css' rel='stylesheet' />
        <link href='Scripts/fullcalendar-4.4.2/packages/timegrid/main.css' rel='stylesheet' />
        <link href='Scripts/fullcalendar-4.4.2/packages/list/main.css' rel='stylesheet' />
        <script src='Scripts/fullcalendar-4.4.2/packages/core/main.js'></script>
        <script src='Scripts/fullcalendar-4.4.2/packages/interaction/main.js'></script>
        <script src='Scripts/fullcalendar-4.4.2/packages/daygrid/main.js'></script>
        <script src='Scripts/fullcalendar-4.4.2/packages/timegrid/main.js'></script>
        <script src='Scripts/fullcalendar-4.4.2/packages/list/main.js'></script>
        <script>
    
            document.addEventListener('DOMContentLoaded', function () {
                var calendarEl = document.getElementById('calendar');
    
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                    },
                    defaultDate: '2014-11-20', 
                    navLinks: true, // can click day/week names to navigate views
                    businessHours: true, // display business hours
                    displayEventEnd: true,
                    editable: true,
                    events: [
                        {
                        title: "Event 1",
                        start: new Date('2014-11-21T09:00'),
                        end: new Date('2014-11-22T08:00'),
                        allDay: false,
                        id: 1
                    },
                        {
                            title: "EVent 2",
                            start: new Date('2014-11-21T09:00'),
                            end: new Date('2014-11-22T09:10'),
                            allDay: false,
                            id: 2
                        }
                    ]
                });
    
                calendar.render();
            });
    
        </script>
        <style>
            body {
                margin: 40px 10px;
                padding: 0;
                font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
                font-size: 14px;
            }
    
            #calendar {
                max-width: 900px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <form id="form1">
        <div id='calendar'></div>
        </form>
    </body>
    </html>

    Here's the result of this demo:

    Best Regard,

    Yang Shen

    Wednesday, June 10, 2020 7:31 AM
  • User2108892867 posted

    Thank you for your reply Yang Shen. I can't update the library cause that's going to break my code. For now, I just handle it manually by adding one day if the end time is smaller than start time. 

    Wednesday, June 10, 2020 11:03 AM
  • User2108892867 posted

    Hello Yang Shen, sorry to come back again. I found something odd. It seems that the 24 hours you mentioned doesn't seem to be the case. Please check this plunker

    http://plnkr.co/edit/DmixA1VMQ7MBjIwB

    So here is the array:

     {
                title: "Test 1",
                start: new Date('2014-11-21T07:00'),
                end: new Date('2014-11-22T08:00'),
                allDay: false,
                id: 1
            },
            {
                title: "Test 2",
                start: new Date('2014-11-21T09:00'),
                end: new Date('2014-11-22T09:00'),
                allDay:false,
                id: 1
            },
              {
                title: "Test 3",
                start: new Date('2014-11-21T06:00'),
                end: new Date('2014-11-22T07:00'),
                allDay: false,
                id: 1
            }

    In test 1 although the end time is greater than start time, visually it still doesn't show the date correctly. Not sure if there is a bug in the library. Sorry I can't really update the library cause I use fullcalendar together with angular. 

    Thanks 

    Thursday, June 11, 2020 4:01 AM
  • User2108892867 posted

    I finally found the reason. It's because of one property call nextDayThreshold. Here is the explanation. 

    https://fullcalendar.io/docs/v3/nextDayThreshold

    For some reason fullcalendar v.3 the threshold is set to 09:00:00 instead of 00:00:00. So we have to manually add 

    nextDayThreshold: '00:00:00'

    make it appear correctly.

    Hope it would help others too.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 11, 2020 4:33 AM
  • User-719153870 posted

    Hi asplearning,

    Glad to know this issue has been resolved!

    If updating the fullCalendar is not avaailabe, then i think this manual way must be the corrct way.

    Would you please mark those posts that could help solve this thread's issue? This could help those who met the same issue find the solution much easier.

    Thanks,

    Yang Shen

    Thursday, June 11, 2020 5:53 AM