eduvia/workavia-calendar-front
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#679 day view without sidebar on mobile - look only

Browse Source
This commit is contained in:
lethemanh
2026-04-06 09:34:43 +07:00
parent fbb31e4a80
commit aa96a39b28
21 changed files with 664 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Calendar/Calendar.styl
+3
View File
@@ -87,6 +87,9 @@
align-items center
padding 0.5rem 0
font-family "Inter", sans-serif
gap 6px
&--mobile
flex-direction column-reverse !important
/* sidebar*/
.sidebar-calendar
src/components/Calendar/Calendar.tsx
+28 -14
View File
@@ -63,7 +63,7 @@ interface CalendarAppProps {
currentView: string
}
export default function CalendarApp({
const CalendarApp: React.FC<CalendarAppProps> = ({
calendarRef,
onDateChange,
onViewChange,
@@ -72,12 +72,12 @@ export default function CalendarApp({
onCloseSidebar,
setCurrentView,
currentView
}: CalendarAppProps): JSX.Element {
}: CalendarAppProps) => {
const [selectedDate, setSelectedDate] = useState(new Date())
const [debouncedDate, setDebouncedDate] = useState(new Date())
useEffect(() => {
const t = setTimeout(() => setDebouncedDate(selectedDate), 300)
return () => clearTimeout(t)
return (): void => clearTimeout(t)
}, [selectedDate])
const [selectedMiniDate, setSelectedMiniDate] = useState(new Date())
const userId = useAppSelector(state => state.user.userData?.openpaasId) ?? ''
@@ -93,7 +93,7 @@ export default function CalendarApp({
state => state.settings.hideDeclinedEvents
)
const { isTablet } = useScreenSizeDetection()
const { isTablet, isTooSmall: isMobile } = useScreenSizeDetection()
const hiddenDays = useMemo(() => {
if (!hideWorkingDays || !workingDays || workingDays.length === 0) return []
@@ -135,16 +135,16 @@ export default function CalendarApp({
useEffect(() => {
const handler = errorHandler.current
handler.setErrorCallback(setEventErrors)
return () => handler.setErrorCallback(() => {})
return (): void => handler.setErrorCallback(() => {})
}, [])
const handleErrorClose = () => {
const handleErrorClose = (): void => {
setEventErrors([])
errorHandler.current.clearAll()
}
useEffect(() => {
const updateSelectedCalendars = () => {
const updateSelectedCalendars = (): void => {
if (initialLoadRef.current && calendarIds.length > 0 && userId) {
const cached = localStorage.getItem('selectedCalendars')
if (cached && cached.length > 0) {
@@ -171,7 +171,7 @@ export default function CalendarApp({
}, [selectedCalendars, calendarIds.length])
useEffect(() => {
const updateSelectedCalendarsOnCalendarChange = () => {
const updateSelectedCalendarsOnCalendarChange = (): void => {
if (calendarIds.length === 0) return
const validCalendarIds = new Set(calendarIds)
setSelectedCalendars(prev => {
@@ -237,7 +237,13 @@ export default function CalendarApp({
// Listen for eventModalError event to reopen modal on API failure
useEffect(() => {
const handleEventModalError = (event: CustomEvent) => {
const handleEventModalError = (e: Event): void => {
const event = e as CustomEvent<{
type: 'create' | 'update'
eventId: string
calId: string
typeOfAction: string
}>
if (event.detail?.type === 'create') {
// Reopen create event modal
setAnchorEl(document.body)
@@ -286,7 +292,7 @@ export default function CalendarApp({
'eventModalError',
handleEventModalError as EventListener
)
return () => {
return (): void => {
window.removeEventListener(
'eventModalError',
handleEventModalError as EventListener
@@ -319,7 +325,7 @@ export default function CalendarApp({
calendarRef.current?.changeView(targetView)
}
})
return () => cancelAnimationFrame(id)
return (): void => cancelAnimationFrame(id)
}, [view, isTablet, currentView, calendarRef])
// Event handlers
const eventHandlers = useCalendarEventHandlers({
@@ -541,7 +547,9 @@ export default function CalendarApp({
.toUpperCase()
return (
<div className="fc-daygrid-day-top">
<div
className={`fc-daygrid-day-top ${isTablet || isMobile ? 'fc-daygrid-day-top--mobile' : ''}`}
>
<small>{weekDay}</small>
{arg.view.type !== CALENDAR_VIEWS.dayGridMonth && (
<span
@@ -559,8 +567,12 @@ export default function CalendarApp({
viewWillUnmount={viewHandlers.handleViewWillUnmount}
eventClick={eventHandlers.handleEventClick}
eventAllow={eventHandlers.handleEventAllow}
eventDrop={eventHandlers.handleEventDrop}
eventResize={eventHandlers.handleEventResize}
eventDrop={arg => {
void eventHandlers.handleEventDrop(arg)
}}
eventResize={arg => {
void eventHandlers.handleEventResize(arg)
}}
eventContent={viewHandlers.handleEventContent}
eventDidMount={viewHandlers.handleEventDidMount}
/>
@@ -599,3 +611,5 @@ export default function CalendarApp({
</main>
)
}
export default CalendarApp
src/components/Calendar/CalendarLayout.tsx
+14 -19
View File
@@ -12,7 +12,7 @@ import CalendarApp from './Calendar'
import { CALENDAR_VIEWS } from './utils/constants'
import { setView } from '@/features/Settings/SettingsSlice'
export default function CalendarLayout() {
export default function CalendarLayout(): JSX.Element {
const calendarRef = useRef<CalendarApi | null>(null)
const dispatch = useAppDispatch()
const error = useAppSelector(state => state.calendars.error)
@@ -20,33 +20,28 @@ export default function CalendarLayout() {
const tempcalendars = useAppSelector(state => state.calendars.templist)
const view = useAppSelector(state => state.settings.view)
const { isTablet } = useScreenSizeDetection()
const { isTablet, isTooSmall: isMobile } = useScreenSizeDetection()
const [openSidebar, setOpenSideBar] = useState(false)
const [currentDate, setCurrentDate] = useState<Date>(new Date())
const [currentView, setCurrentView] = useState<string>(
isTablet ? CALENDAR_VIEWS.timeGridDay : CALENDAR_VIEWS.timeGridWeek
isTablet || isMobile
? CALENDAR_VIEWS.timeGridDay
: CALENDAR_VIEWS.timeGridWeek
)
useEffect(() => {
const setView = () =>
setCurrentView(prev => {
if (
prev !== CALENDAR_VIEWS.timeGridDay &&
prev !== CALENDAR_VIEWS.timeGridWeek
) {
return prev
}
return isTablet
const setView = (): void =>
setCurrentView(
isTablet || isMobile
? CALENDAR_VIEWS.timeGridDay
: CALENDAR_VIEWS.timeGridWeek
})
)
setView()
}, [isTablet])
}, [isTablet, isMobile])
const isInIframe = useMemo(() => new CozyBridge().isInIframe(), [])
const handleRefresh = async () => {
const handleRefresh = async (): Promise<void> => {
// Get current calendar range
if (calendarRef.current) {
const view = calendarRef.current.view
@@ -69,7 +64,7 @@ export default function CalendarLayout() {
}
}
const handleDateChange = (date: Date) => {
const handleDateChange = (date: Date): void => {
setCurrentDate(date)
}
@@ -96,14 +91,14 @@ export default function CalendarLayout() {
}
// Cleanup on unmount
return () => {
return (): void => {
document.body.classList.remove('fullscreen-view')
}
}, [view])
const menubarProps: MenubarProps = {
calendarRef,
onRefresh: handleRefresh,
onRefresh: () => void handleRefresh(),
currentDate,
onDateChange: handleDateChange,
currentView,
src/components/Calendar/CustomCalendar.styl
+9 -1
View File
@@ -32,7 +32,6 @@ a.fc-timegrid-axis-cushion
.fc-daygrid-day-top .fc-daygrid-day-number,
span.fc-daygrid-day-number
color #243b55
margin 0 6px 0 0
font-family Roboto
font-size 28px
font-style normal
@@ -75,6 +74,15 @@ span.fc-daygrid-day-number.current-date
span.fc-daygrid-day-number.current-date:after
background-color #FB9E3A
.fc-daygrid-day-top--mobile .fc-daygrid-day-number
font-size 22px
width 38px
line-height 29px
.fc-daygrid-day-top--mobile .fc-daygrid-day-number:after
width 36px
height 36px
td.fc-timegrid-slot.fc-timegrid-slot-label.fc-scrollgrid-shrink,
td.fc-timegrid-slot.fc-timegrid-slot-label.fc-timegrid-slot-minor
border 0
src/components/Calendar/Sidebar/SideBar.tsx
+8 -2
View File
@@ -21,8 +21,12 @@ export interface CalendarSidebarProps {
currentView: string
}
export default function Sidebar(sharedProps: CalendarSidebarProps) {
const { isTablet } = useScreenSizeDetection()
const Sidebar: React.FC<CalendarSidebarProps> = (
sharedProps: CalendarSidebarProps
) => {
const { isTablet, isTooSmall: isMobile } = useScreenSizeDetection()
if (isMobile) return null
return isTablet ? (
<TabletSidebar {...sharedProps} />
@@ -30,3 +34,5 @@ export default function Sidebar(sharedProps: CalendarSidebarProps) {
<DesktopSidebar {...sharedProps} />
)
}
export default Sidebar