javascriptfullcalendarfullcalendar-scheduler

full Calender Extended bar issue

I am working on event calender using Full Calender. I am facing a problem when I add event it extend the bar between two dates. How to fix it here is the Image

enter image description here

nexgen_base.ajaxGetCall('/Schedule/GetAvailibilityData', 0, (response) => {
                debugger;
                var Calendar = FullCalendar.Calendar;
                var calendarEl = document.getElementById('calendar');
                var calendar = new Calendar(calendarEl, {
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay'
                    },
                    themeSystem: 'bootstrap',
                    eventClick: function (info) {
                        AvailiblityModel((info?.event?.extendedProps?.Id) || 0);
                    },
                    events: response,
                });
                calendar.on('dateClick', function (info) {
                    console.log('clicked on ' + info.dateStr);
                });
                calendar.render();


            });

Here is the response I am getting from api

Id: 29
IsBooked: false
allDay: false
backgroundColor: "#12c739"
borderColor: "#12c739"
color: null
display: "block"
end: "2021-05-19T13:30:00+05:00"
eventBackgroundColor: null
eventColor: null
start: "2021-05-19T01:00:00+05:00"
title: "01:00 AM To 01:30 PM"
Solution

  • The problem seems to be the time zone. I think you are converting time into local time zone and then binding it to the calendar. This way the time is converting from your server side and as well as on the calendar side as it is default behavior of the calendar to convert utc to local time zone. here is the link this may helps you

    https://fullcalendar.io/docs/timeZone