What am I currently working on?
- I am in the process of developing a horizontally scrollable tab component to select dates within a month
- For this project, I have decided to utilize the Material UI library
Issues Encountered
- The dates before the 14th Sunday are not displaying on the site (as indicated in the image below)
- The initial tab should showcase the first day of the month but instead shows the 14th Sunday
- While inspecting the browser elements tab, all tabs are present but they do not appear on the screen
Mobile Viewport (Unable to Scroll Before the 14th)
https://i.stack.imgur.com/zVeYh.png
Desktops Viewport (No Scrolling Allowed Before the 7th)
https://i.stack.imgur.com/LCPYk.png
Elements tab
https://i.stack.imgur.com/JAmEM.png
Highlighted code snippet presumed to be causing the issue:
export default function DayScrollView() {
const [activeDate, setActiveDate] = useContext(dateContext)
const [dates, setDates] = useState(getDatesInMonth(activeDate))
return (
<Box sx={
{
overflowX: 'scroll',
scrollbarWidth: 'none',
'-ms-overflow-style': 'none',
'&::-webkit-scrollbar': {
display: 'none',
},
}
}>
<Tabs defaultValue={0}>
<StyledTabsList>
{dates.map((date, index) => {
console.log(`${date.getDate()} ${date.toLocaleString('default', { weekday: 'short' })}`)
return (
<StyledTab key={date.toDateString()} value={date.toDateString()} onClick={() => setActiveDate(date)}>
<Typography variant='subtitle1'>{date.toLocaleString('default', { weekday: 'short' })}</Typography>
<Typography variant='h5'>{date.getDate()}</Typography>
</StyledTab>
)
})}
</StyledTabsList>
</Tabs>
<Box mr={10} sx={{ width: 20 }} />
</Box>
);
}
Complete Component Code
import { useContext, useState } from 'react';
import * as React from 'react';
import { styled } from '@mui/system';
import Tabs from '@mui/base/Tabs';
import TabsList from '@mui/base/TabsList';
import TabPanel from '@mui/base/TabPanel';
import { buttonClasses } from '@mui/base/Button';
import Tab, { tabClasses } from '@mui/base/Tab';
import { Box, Typography } from '@mui/material';
import getDatesInMonth from '@/utils/getDatesInMonth';
import { dateContext } from '@/pages/mob';
export default function DayScrollView() {
const [activeDate, setActiveDate] = useContext(dateContext)
const [dates, setDates] = useState(getDatesInMonth(activeDate))
return (
<Box sx={
{
overflowX: 'scroll',
scrollbarWidth: 'none',
'-ms-overflow-style': 'none',
'&::-webkit-scrollbar': {
display: 'none',
},
}
}>
<Tabs defaultValue={0}>
<StyledTabsList>
{dates.map((date, index) => {
console.log(date)
return (
<StyledTab key={index} value={index} onClick={() => setActiveDate(date)}>
<Typography variant='subtitle1'>{date.toLocaleString('default', { weekday: 'short' })}</Typography>
<Typography variant='h5'>{date.getDate()}</Typography>
</StyledTab>
)
})}
</StyledTabsList>
</Tabs>
<Box mr={10} sx={{ width: 20 }} />
</Box>
);
}
const StyledTab = styled(Tab)`
.... some css styles
`;
const StyledTabPanel = styled(TabPanel)(
({ theme }) => `
width: 100%;
... more styles
`,
);
const StyledTabsList = styled(TabsList)(
({ theme }) => `
padding-right: 1rem;
background: transparent;
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
align-content: space-between;
`,
);
getDatesInMonth()
function getDatesInMonth(date) {
const year = date.getFullYear();
const month = date.getMonth();
const numDays = new Date(year, month + 1, 0).getDate();
const dates = [];
for (let i = 1; i <= numDays; i++) {
dates.push(new Date(year, month, i));
}
return dates;
}
- If further information is required, please leave a comment.
- If you found this helpful, consider upvoting and sharing the question with others who may be able to assist.