Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

121
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda