-1

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"
  • It is designed and supposed to work this way. I don't understand what you mean by **how to fix?**. It seems fine in the image – Atheesh Thirumalairajan May 12 '21 at 08:11
  • the API response you've shown is clearly for a different event occurring on the 19th, not the one which you've shown in your screenshot, which spans the 11th and 12th. We can't tell you if there's an issue if you don't show relevant data. Please edit the question with the correct data. (And in future please double-check everything before you post your question!) – ADyson May 12 '21 at 09:50

1 Answers1

0

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

Kamran Khan
  • 1,042
  • 10
  • 21