Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

119
Views
Fullcalendar.io - wrong date range highlighted from json

I am having a problem displaying events in my calendar. I'm taking data from an events.json file and adding an event. It displays one day too short for me. For example, the event 09.08-15.08 is displayed only until 14.08. 08.09-09.10 is correct, 24.09-26.09 is too short 01.09-05.09 is too short etc.

Why is this happening? And how to fix it?

Here is live preview of problem: https://mawk.bieda.it/

Here is my code:

<script>
    document.addEventListener('DOMContentLoaded', function () {

        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {

            /*locale: 'pl',*/
            firstDay: 1,
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'prevYear,nextYear'
            },
            validRange: {
                start: '2021-01-01',
                end: '2022-01-01'
            },
            selectable: true,
            select: function (info) {
                alert('Selected ' + info.startStr + ' to ' + info.endStr);
            },
            events: {
                url: '/events.json',
                extraParams: function () {
                    return {
                        cachebuster: new Date().valueOf()
                    };
                }
            },

        });

        calendar.render();
    });
</script>

<div id='calendar' style="height: 600px; width: 600px; margin: auto;"></div>

This is event.json:

[
    {
    "title": "09.08-15.08",
    "start": "2021-08-09",
    "end": "2021-08-15"
    },
    {
    "title": "08.09-09.10",
    "start": "2021-09-08",
    "end": "2021-09-10"
    },
    {
    "title": "24.09-26.09",
    "start": "2021-09-24",
    "end": "2021-09-26"
    },
    {
    "title": "01.09-05.09",
    "start": "2021-09-01",
    "end": "2021-09-05"
    },
    {
    "title": "28.09-03.10",
    "start": "2021-09-28",
    "end": "2021-10-03"
    },
    {
    "title": "01.12-03.10",
    "start": "2021-12-01",
    "end": "2021-12-31"
    }
    ]
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

As per the official documentation: enter image description here

So if you want it to behave as if the end date is inclusive you have to set the end date to one day later.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!