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
src/components/Menubar/DesktopMenubar.tsx
+3 -3
View File
@@ -6,11 +6,11 @@ import { AppListMenu } from './AppListMenu'
import SearchBar from './EventSearchBar'
import { MainTitle } from './MainTitle'
import { SharedMenubarProps } from './Menubar'
import { NavigationControls } from './NavigationControls'
import { NavigationControls } from './components/NavigationControls'
import { SelectView } from './SelectView'
import { UserMenu } from './UserMenu'
export function DesktopMenubar({
export const DesktopMenubar: React.FC<SharedMenubarProps> = ({
calendarRef,
currentView,
isIframe,
@@ -29,7 +29,7 @@ export function DesktopMenubar({
user,
userMenuAnchorEl,
onUserMenuClose
}: SharedMenubarProps) {
}) => {
const { t } = useI18n()
return (
src/components/Menubar/Menubar.styl
+1
View File
@@ -39,6 +39,7 @@
width 100%
z-index 1100
height 60px
min-height 60px
background-color #fff
.menubar-item
src/components/Menubar/Menubar.tsx
+23 -11
View File
@@ -11,6 +11,7 @@ import { useI18n } from 'twake-i18n'
import { DesktopMenubar } from './DesktopMenubar'
import './Menubar.styl'
import { TabletMenubar } from './TabletMenubar'
import { MobileMenubar } from './MobileMenuBar'
export type AppIconProps = {
name: string
@@ -64,7 +65,7 @@ export const Menubar: React.FC<MenubarProps> = ({
null
)
const dispatch = useAppDispatch()
const { isTablet } = useScreenSizeDetection()
const { isTablet, isTooSmall: isMobile } = useScreenSizeDetection()
useEffect(() => {
const resetMenuAnchorsOnResize = (): void => {
@@ -84,9 +85,9 @@ export const Menubar: React.FC<MenubarProps> = ({
return null
}
const handleNavigation = async (action: 'prev' | 'next' | 'today') => {
const handleNavigation = (action: 'prev' | 'next' | 'today'): void => {
if (!calendarRef.current) return
await dispatch(setView('calendar'))
dispatch(setView('calendar'))
switch (action) {
case 'prev':
calendarRef.current.prev()
@@ -106,31 +107,31 @@ export const Menubar: React.FC<MenubarProps> = ({
}
}
const handleViewChange = async (view: string) => {
const handleViewChange = (view: string): void => {
// Notify parent about view change
if (onViewChange) {
onViewChange(view)
}
}
const handleAppMenuOpen = (event: React.MouseEvent<HTMLElement>) =>
const handleAppMenuOpen = (event: React.MouseEvent<HTMLElement>): void =>
setAnchorEl(event.currentTarget)
const handleAppMenuClose = () => setAnchorEl(null)
const handleAppMenuClose = (): void => setAnchorEl(null)
const handleUserMenuOpen = (event: React.MouseEvent<HTMLElement>) =>
const handleUserMenuOpen = (event: React.MouseEvent<HTMLElement>): void =>
setUserMenuAnchorEl(event.currentTarget)
const handleUserMenuClose = () => {
const handleUserMenuClose = (): void => {
setUserMenuAnchorEl(null)
}
const handleSettingsClick = () => {
const handleSettingsClick = (): void => {
dispatch(setView('settings'))
handleUserMenuClose()
}
const handleLogoutClick = async () => {
const handleLogoutClick = async (): Promise<void> => {
const logoutUrl = await Logout()
sessionStorage.removeItem('tokenSet')
redirectTo(logoutUrl.href)
@@ -161,11 +162,22 @@ export const Menubar: React.FC<MenubarProps> = ({
onUserMenuOpen: handleUserMenuOpen,
onUserMenuClose: handleUserMenuClose,
onSettingsClick: handleSettingsClick,
onLogoutClick: handleLogoutClick,
onLogoutClick: () => void handleLogoutClick(),
onNavigate: handleNavigation,
user
}
if (isMobile) {
return (
<MobileMenubar
calendarRef={calendarRef}
currentDate={currentDate}
onDateChange={onDateChange}
handleNavigation={handleNavigation}
/>
)
}
return isTablet ? (
<TabletMenubar {...sharedProps} />
) : (
src/components/Menubar/MobileMenuBar.tsx
+87
View File
@@ -0,0 +1,87 @@
import { CalendarApi } from '@fullcalendar/core'
import { IconButton, Stack } from '@linagora/twake-mui'
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'
import React, { useState } from 'react'
import { useI18n } from 'twake-i18n'
import SearchBar from './EventSearchBar'
import './Menubar.styl'
import { DatePickerMobile } from './components/DatePickerMobile'
import { Typography } from '@mui/material'
import { SmallNavigationControls } from './components/SmallNavigationControls'
export type MobileMenubarProps = {
calendarRef: React.RefObject<CalendarApi | null>
currentDate: Date
onDateChange?: (date: Date) => void
handleNavigation: (action: 'prev' | 'next' | 'today') => void
}
export const MobileMenubar: React.FC<MobileMenubarProps> = ({
calendarRef,
currentDate,
onDateChange,
handleNavigation
}) => {
const { t } = useI18n()
const [openDatePicker, setOpenDatePicker] = useState(false)
// Use i18n for month names instead of date-fns
const monthIndex = currentDate.getMonth()
const year = currentDate.getFullYear()
const monthName = t(`months.standalone.${monthIndex}`)
const dateLabel = `${monthName} ${year}`
return (
<>
<header className="menubar">
<div className="left-menu">
<div className="menu-items">
<SmallNavigationControls onNavigate={handleNavigation} />
</div>
<div className="menu-items">
<Stack direction="row" className="current-date-time">
<Typography
sx={{ lineHeight: 'unset' }}
onClick={() => setOpenDatePicker(prev => !prev)}
>
{dateLabel}
</Typography>
<IconButton
size="small"
onClick={() => setOpenDatePicker(prev => !prev)}
aria-label={
openDatePicker
? t('menubar.hideDatePicker')
: t('menubar.showDatePicker')
}
title={
openDatePicker
? t('menubar.hideDatePicker')
: t('menubar.showDatePicker')
}
aria-expanded={openDatePicker}
>
{openDatePicker ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
</IconButton>
</Stack>
</div>
</div>
<div className="right-menu">
<div className="search-container">
<SearchBar />
</div>
</div>
</header>
{openDatePicker ? (
<DatePickerMobile
calendarRef={calendarRef}
currentDate={currentDate}
onDateChange={onDateChange}
/>
) : null}
</>
)
}
src/components/Menubar/TabletMenubar.tsx
+5 -36
View File
@@ -1,16 +1,14 @@
import { IconButton, Stack } from '@linagora/twake-mui'
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
import ChevronRightIcon from '@mui/icons-material/ChevronRight'
import { IconButton } from '@linagora/twake-mui'
import MenuIcon from '@mui/icons-material/Menu'
import RefreshIcon from '@mui/icons-material/Refresh'
import TodayIcon from '@mui/icons-material/Today'
import { useI18n } from 'twake-i18n'
import SearchBar from './EventSearchBar'
import { MainTitle } from './MainTitle'
import { SharedMenubarProps } from './Menubar'
import { UserMenu } from './UserMenu'
import { SmallNavigationControls } from './components/SmallNavigationControls'
export function TabletMenubar({
export const TabletMenubar: React.FC<SharedMenubarProps> = ({
calendarRef,
currentView,
isIframe,
@@ -26,7 +24,7 @@ export function TabletMenubar({
onUserMenuClose,
onViewChange,
onDateChange
}: SharedMenubarProps) {
}: SharedMenubarProps) => {
const { t } = useI18n()
return (
@@ -52,36 +50,7 @@ export function TabletMenubar({
)}
<div className="menu-items" style={{ marginLeft: 0 }}>
<div className="navigation-controls">
<Stack direction="row">
<IconButton
onClick={() => onNavigate('prev')}
aria-label={t('menubar.prev')}
title={t('menubar.prev')}
>
<ChevronLeftIcon sx={{ height: 20 }} />
</IconButton>
<IconButton
color="primary"
sx={{
border: '1px solid',
borderRadius: '12px'
}}
onClick={() => onNavigate('today')}
aria-label={t('menubar.today')}
title={t('menubar.today')}
>
<TodayIcon />
</IconButton>
<IconButton
onClick={() => onNavigate('next')}
aria-label={t('menubar.next')}
title={t('menubar.next')}
>
<ChevronRightIcon sx={{ height: 20 }} />
</IconButton>
</Stack>
</div>
<SmallNavigationControls onNavigate={onNavigate} />
</div>
<div className="menu-items">
src/components/Menubar/components/DatePickerMobile.tsx
+93
View File
@@ -0,0 +1,93 @@
import { CalendarApi } from '@fullcalendar/core'
import { useTheme } from '@linagora/twake-mui'
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker'
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
import React from 'react'
import { useI18n } from 'twake-i18n'
import dayjs from 'dayjs'
import { PickerValue } from '@mui/x-date-pickers/internals'
import { MonthSelector } from './MonthSelector'
export type DatePickerMobileProps = {
calendarRef: React.RefObject<CalendarApi | null>
currentDate: Date
onDateChange?: (date: Date) => void
}
export const DatePickerMobile: React.FC<DatePickerMobileProps> = ({
calendarRef,
currentDate,
onDateChange
}) => {
const { t, lang } = useI18n()
const theme = useTheme()
const onChangeDate = (newDate: PickerValue): void => {
if (newDate && calendarRef.current) {
const d = newDate.toDate()
calendarRef.current.gotoDate(d)
onDateChange?.(d)
}
}
const onMonthChange = (monthIndex: number): void => {
if (!calendarRef.current) return
const currentCalendarDate = calendarRef.current.getDate()
const year = currentCalendarDate.getFullYear()
const lastDayOfMonth = new Date(year, monthIndex + 1, 0).getDate()
const clampedDay = Math.min(currentCalendarDate.getDate(), lastDayOfMonth)
onChangeDate(dayjs(new Date(year, monthIndex, clampedDay)))
}
return (
<LocalizationProvider
key={lang}
dateAdapter={AdapterDayjs}
adapterLocale={lang ?? 'en'}
localeText={{
okButtonLabel: t('common.ok'),
cancelButtonLabel: t('common.cancel'),
todayButtonLabel: t('menubar.today')
}}
>
<StaticDatePicker
value={dayjs(currentDate)}
onChange={onChangeDate}
showDaysOutsideCurrentMonth
slots={{ calendarHeader: () => null, actionBar: () => null }}
sx={{ width: '100%', marginTop: '10px' }}
slotProps={{
toolbar: { hidden: true },
layout: {
sx: {
'.MuiDateCalendar-root': {
width: '100%',
margin: 0,
maxWidth: 'unset',
maxHeight: 'unset',
height: '400px'
},
'.MuiDayCalendar-header': {
width: '100%',
justifyContent: 'space-around'
},
'.MuiDayCalendar-weekContainer': {
width: '100%',
justifyContent: 'space-around'
}
}
},
day: {
sx: {
'&.MuiPickersDay-dayOutsideMonth': {
color: theme.palette.grey[500]
}
}
}
}}
/>
<MonthSelector currentDate={currentDate} onMonthChange={onMonthChange} />
</LocalizationProvider>
)
}
src/components/Menubar/components/MonthSelector.tsx
+63
View File
@@ -0,0 +1,63 @@
import { Box, Button, radius } from '@linagora/twake-mui'
import React, { useEffect, useRef } from 'react'
import { useI18n } from 'twake-i18n'
export type MonthSelectorProps = {
currentDate: Date
onMonthChange: (monthIndex: number) => void
}
export const MonthSelector: React.FC<MonthSelectorProps> = ({
currentDate,
onMonthChange
}) => {
const { t } = useI18n()
const monthScrollRef = useRef<HTMLDivElement>(null)
useEffect(() => {
const container = monthScrollRef.current
if (!container) return
const selectedIndex = currentDate.getMonth()
const button = container.children[selectedIndex] as HTMLElement | undefined
if (button) {
button.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center'
})
}
}, [currentDate])
return (
<Box
ref={monthScrollRef}
sx={{
display: 'flex',
overflowX: 'auto',
gap: 2,
px: 2,
py: 1,
scrollbarWidth: 'none',
'&::-webkit-scrollbar': { display: 'none' },
backgroundColor: '#FFF'
}}
>
{Array.from({ length: 12 }).map((_, i) => {
const isSelected = currentDate.getMonth() === i
return (
<Button
key={i}
size="large"
variant={isSelected ? 'contained' : 'outlined'}
sx={{
borderRadius: radius.md
}}
onClick={() => onMonthChange(i)}
>
{t(`months.short.${i}`)}
</Button>
)
})}
</Box>
)
}
src/components/Menubar/NavigationControls.tsx → src/components/Menubar/components/NavigationControls.tsx
+2 -4
View File
@@ -3,11 +3,9 @@ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
import ChevronRightIcon from '@mui/icons-material/ChevronRight'
import { useI18n } from 'twake-i18n'
export function NavigationControls({
onNavigate
}: {
export const NavigationControls: React.FC<{
onNavigate: (action: 'today' | 'next' | 'prev') => void
}) {
}> = ({ onNavigate }) => {
const { t } = useI18n()
return (
<div className="navigation-controls">
src/components/Menubar/components/SmallNavigationControls.tsx
+44
View File
@@ -0,0 +1,44 @@
import { IconButton, Stack } from '@linagora/twake-mui'
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
import ChevronRightIcon from '@mui/icons-material/ChevronRight'
import TodayIcon from '@mui/icons-material/Today'
import { useI18n } from 'twake-i18n'
export const SmallNavigationControls: React.FC<{
onNavigate: (action: 'today' | 'next' | 'prev') => void
}> = ({ onNavigate }) => {
const { t } = useI18n()
return (
<div className="navigation-controls">
<Stack direction="row">
<IconButton
onClick={() => onNavigate('prev')}
aria-label={t('menubar.prev')}
title={t('menubar.prev')}
>
<ChevronLeftIcon sx={{ height: 20 }} />
</IconButton>
<IconButton
color="primary"
aria-label={t('menubar.today')}
title={t('menubar.today')}
sx={{
border: '1px solid',
borderRadius: '12px'
}}
onClick={() => onNavigate('today')}
>
<TodayIcon />
</IconButton>
<IconButton
onClick={() => onNavigate('next')}
aria-label={t('menubar.next')}
title={t('menubar.next')}
>
<ChevronRightIcon sx={{ height: 20 }} />
</IconButton>
</Stack>
</div>
)
}