improved time select and calendar
This commit is contained in:
@@ -83,8 +83,21 @@ function CalendarApp() {
|
|||||||
const [newPostDialogOpen, setNewPostDialogOpen] = useState(false);
|
const [newPostDialogOpen, setNewPostDialogOpen] = useState(false);
|
||||||
const [date, setDate] = useState<Date>(today);
|
const [date, setDate] = useState<Date>(today);
|
||||||
const [selected, setSelected] = useState<string | null | undefined>(null);
|
const [selected, setSelected] = useState<string | null | undefined>(null);
|
||||||
|
const [scrollY, setScrollY] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
window.scrollTo(0, scrollY);
|
||||||
|
}, 10);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
clearInterval(interval);
|
||||||
|
}, 300);
|
||||||
|
}, [scrollY]);
|
||||||
|
|
||||||
const handleDialog: MouseEventHandler<HTMLSpanElement> = (event) => {
|
const handleDialog: MouseEventHandler<HTMLSpanElement> = (event) => {
|
||||||
|
setScrollY(window.scrollY);
|
||||||
|
|
||||||
const target = event.target as HTMLElement;
|
const target = event.target as HTMLElement;
|
||||||
|
|
||||||
if (target.className === 'sx__time-grid-event-time') {
|
if (target.className === 'sx__time-grid-event-time') {
|
||||||
|
|||||||
@@ -17,14 +17,16 @@ const TimeSelect: React.FC<TimeSelectProps> = ({
|
|||||||
setDate,
|
setDate,
|
||||||
className,
|
className,
|
||||||
}) => {
|
}) => {
|
||||||
const times = Array.from({ length: 24 }, (_, h) =>
|
const times = ['00:00'].concat(
|
||||||
|
Array.from({ length: 23 }, (_, h) =>
|
||||||
[0, 15, 30, 45].map(
|
[0, 15, 30, 45].map(
|
||||||
(m) =>
|
(m) =>
|
||||||
`${(h + 1).toString().padStart(2, '0')}:${m
|
`${(h + 1).toString().padStart(2, '0')}:${m
|
||||||
.toString()
|
.toString()
|
||||||
.padStart(2, '0')}`
|
.padStart(2, '0')}`
|
||||||
)
|
)
|
||||||
).flat();
|
).flat()
|
||||||
|
);
|
||||||
|
|
||||||
const currentHour = date.getHours().toString().padStart(2, '0');
|
const currentHour = date.getHours().toString().padStart(2, '0');
|
||||||
const currentMinute = date.getMinutes();
|
const currentMinute = date.getMinutes();
|
||||||
@@ -39,8 +41,9 @@ const TimeSelect: React.FC<TimeSelectProps> = ({
|
|||||||
|
|
||||||
const handleTimeChange = (newTime: string) => {
|
const handleTimeChange = (newTime: string) => {
|
||||||
const [hour, minute] = newTime.split(':').map(Number);
|
const [hour, minute] = newTime.split(':').map(Number);
|
||||||
|
console.log(hour, minute);
|
||||||
const newDate = new Date(date);
|
const newDate = new Date(date);
|
||||||
newDate.setHours(hour, minute, 0, 0);
|
newDate.setHours(hour === 24 ? 0 : hour, minute, 0, 0);
|
||||||
setDate(newDate);
|
setDate(newDate);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user