Merge pull request #11345 from ToolJet/fix/calendar-view

Fixed default calendar view not updating view on reload
This commit is contained in:
Johnson Cherian 2024-11-18 18:35:02 +05:30 committed by GitHub
commit 3168e19b24
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 8 deletions

View file

@ -596,7 +596,10 @@ export default function Grid({ gridWidth, currentLayout }) {
isDragOnTableORCalendar = tableElem.contains(e.inputEvent.target);
}
if (box?.component?.component === 'Calendar') {
const calenderElem = e.target.querySelector('.rbc-month-view');
const calenderElem =
e.target.querySelector('.rbc-month-view') ||
e.target.querySelector('.rbc-time-view') ||
e.target.querySelector('.rbc-day-view');
isDragOnTableORCalendar = calenderElem.contains(e.inputEvent.target);
}

View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { Calendar as ReactCalendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
@ -54,7 +54,7 @@ export const Calendar = function ({
const [currentDate, setCurrentDate] = useState(defaultDate);
const [eventPopoverOptions, setEventPopoverOptions] = useState({ show: false });
const [defaultView, setDefaultValue] = useState(allowedCalendarViews[0]);
const isInitialRender = useRef(true);
const eventPropGetter = (event) => {
const backgroundColor = event.color;
@ -100,10 +100,10 @@ export const Calendar = function ({
const view = allowedCalendarViews.includes(properties.defaultView)
? properties.defaultView
: allowedCalendarViews[0];
if (currentView !== view) {
setDefaultValue(view);
if (currentView !== view || isInitialRender.current) {
setExposedVariable('currentView', view);
setCurrentView(view);
isInitialRender.current = false;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [properties.defaultView]);
@ -145,10 +145,9 @@ export const Calendar = function ({
endAccessor="end"
style={style}
views={allowedCalendarViews}
defaultView={defaultView}
view={defaultView}
defaultView={properties.defaultView || allowedCalendarViews[0]}
view={currentView}
onView={(view) => {
setDefaultValue(view);
setExposedVariable('currentView', view);
setCurrentView(view);
fireEvent('onCalendarViewChange');