1

I am having problem with showing last day of event on calendar itself, i searched all Stack Overflow and google and but didn't found any working solution to this.

Format of date is YYYY-MM-DD, ex. 2021-03-20

JSON output on calendar for "dddddddddddddddd" event, this is just for example, issue of last day not showing is on all events not just one.

allDay: true
color: "#f9cb9c"
description: ""
end: "2021-03-21"
event_employees: "2,5,6,7,38"
event_vehicle: "2"
id: "35"
start: "2021-03-15"
title: "dddddddddddddddd"

Here is calendar code

document.addEventListener('DOMContentLoaded', function() {
calendarEl = document.getElementById('calendar');
    calendar = new FullCalendar.Calendar(calendarEl, {
        themeSystem: 'bootstrap',
        headerToolbar: {
            left: 'prev today',
            center: 'title',
            right: 'next'
        },
        locale: 'hr',
        initialView: 'dayGridMonth',
        editable: true,
        selectable: true,
        droppable: true, // this allows things to be dropped onto the calendar
        dayMaxEvents: true, // when too many events in a day, show the popover

        eventDidMount: function(info) {
            $(info.el).tooltip({
                title: info.event.extendedProps.description,
                container: 'body',
                placement: 'top',
                trigger: 'hover',
                html: true,
                template: '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
            });
        },
        events: 'get_events.php',
        views: {
            dayGridMonth: {
                titleFormat: {
                        month: 'long',
                    year: 'numeric'
                }
            }
        }
    });

    calendar.render();
});

get_events.php

$query = $pdo->prepare("SELECT * FROM events");
$query->execute();
$result = $query->fetchAll(PDO::FETCH_ASSOC);

$data = array();

foreach ($result as $val) {
    $data[] = array(
        'id' => $val['id'],
        'title' => $val['title'],
        'start' => date('Y-m-d', strtotime($val['start_event'])),   // date output format 2021-03-20
        'end' => date('Y-m-d', strtotime($val['end_event'])),       // date output format 2021-03-20
        'color' => $val['event_color'],
        'description' => $val['event_description'] == null ? '' : $val['event_description'],
        'event_vehicle' => $val['event_vehicle'],
        'event_employees' => $val['event_employees'],
        'allDay' => true // all day is true for every event
    );
}

echo json_encode($data);

Here is image with json output in console enter image description here

ADyson
  • 57,178
  • 14
  • 51
  • 63
Mario
  • 518
  • 2
  • 19
  • 1
    This behaviour is already explained in the documentation. See https://fullcalendar.io/docs/event-object - read the section about the "end" parameter, especially the part where it explains about end dates being **exclusive**. The example given covers your exact scenario. P.s. this has definitely been asked before on stackoverflow, too. – ADyson Mar 20 '21 at 11:21
  • https://stackoverflow.com/questions/32705149/fullcalendar-not-showing-the-correct-end-date/ is just one example – ADyson Mar 20 '21 at 11:27
  • @ADyson adding +1 day is not and option i also tried to changed date to "2021-03-22T11:30:00" but this doesn't change anything even with "nextDayThreshold:00:00:00 or 00:00" in calendar options, i played a lot with dates but seems none of them are working. Main reason for this is if i add 1 day it display event but then when i edit event i have wrong date in event on edit. – Mario Mar 20 '21 at 11:38
  • `adding +1 day is not and option`... Why not exactly? That **is** your option, unless you want to start re-writing the internal source code of fullCalendar. You can always keep the "real" date in a separate extended property, for the purpose of editing. – ADyson Mar 20 '21 at 11:55
  • @ADyson see for example when i am making new event https://prnt.sc/10qsu7h, dates are taken on select function from `var start_date = moment(info.startStr).format("YYYY-MM-DD");` and `var end_date = moment(info.endStr).format("YYYY-MM-DD");` you can see on "end date" it added + 1 day, but after it is saved in database it is saved - 1 day but then showing - 1 day more, that is what is confuses me. When i go on edit date is correct but only in here https://prnt.sc/10qsxqu and not in calendar. – Mario Mar 20 '21 at 12:09
  • I don't know what you actually selected on the calendar there, and I don't know your saving process, and I don't know exactly what got saved in the database. So it's very hard for me to comment on what's happening there. Sounds like the subject of a new stackoverflow question, perhaps. – ADyson Mar 20 '21 at 12:29
  • That was on selected date range event just to show you how dates there are working, this is for example when i select date range from 15 - 21.03 console output "startdate: 2021-03-15, enddate: 2021-03-22" so you see here it adding one day on end date but it doesn't draw 21 or 22 after event is added it draws 20-03 for end. – Mario Mar 20 '21 at 12:42
  • Again, unless you show the relevant code I can't help you with that. – ADyson Mar 20 '21 at 12:54
  • 1
    @ADyson No problem i understand now, just i need to show on client side exact date, for example if client select end date 21.03 i must add 22.03 and save it like that, when they want to edit event i just read in form -1 day, thanks this helped me to understand :) – Mario Mar 20 '21 at 12:59

0 Answers0