cal.pub0.org/packages/features/calendars/weeklyview/components/currentTime/index.tsx

55 lines
1.9 KiB
TypeScript
Raw Normal View History

import { useEffect, useState, useRef } from "react";
Calendar Weekly Scheduler (#5653) * storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Inital state plannning * Inital state combined with passed in props * Start of UI work * Able to change dates? * Add dynamic hour props * Get grid system setup correctly * Show events on grid * Weird sizing issue but events placed correctly gridstart * CAL styled calendar event component * availability WIP ish * Blocking days! + Block days < today * Kinda working time line * Rename grid stop + formatting * Handle sorting events if required. * Add util for getting startDate bassed on weekday * Remove event stories for now * Implement gridstops per hour to be dyamic * New CSS Grid + offsetbased positoning * Fix weird Z-Index issues on hover * Implement blocklist again with new format * Side by side events working - styling needs work * New design of overlap * Overlapping? Working :O * Cleanup * WIP hover state * Werid border issue * fix translate issue * Kinda working with overflow * Fix overflow * Progressive date blocking * Cleanup * Fix double render of blocked list * WIP mobile implementaiton * Trying to fix CSS * Extract CSS to styles.css to allow media queries * Improve documentation - allow args to be changed in storybook * Fix hover showing even if disabled * WIP cols auto approach * Merge blocking dates * Fix zindex * Fix hover position * Fix Z-Index issues on hover and blocking events * Re add onclick handler * Fix overlapping blocking dates * Fix scaling for datevalues columns * Date values closer to DS * Blocked List Tidy up * Storybook + file tidy up * Little tidy up * Fix offsets * Remove event hover * Fix random bg-red-500 * Fix import * FIx blocking cells appearing above start Date * Fix truncation * Fix border overlap * Overlap a little nicer * Condtional 80% sizing * Nitpicks * Fix today height and top breaking * Add text left to time stamp * Support string dates * Add shalow to reduce re-renders * Rename to Calendar instead of scheduler * Fix 3 overlapping events * Fix merge type error * Fix destructuring * NITS * Move to features package Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-12-14 13:36:10 +00:00
import dayjs from "@calcom/dayjs";
import { useTimePreferences } from "@calcom/features/bookings/lib";
Calendar Weekly Scheduler (#5653) * storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Inital state plannning * Inital state combined with passed in props * Start of UI work * Able to change dates? * Add dynamic hour props * Get grid system setup correctly * Show events on grid * Weird sizing issue but events placed correctly gridstart * CAL styled calendar event component * availability WIP ish * Blocking days! + Block days < today * Kinda working time line * Rename grid stop + formatting * Handle sorting events if required. * Add util for getting startDate bassed on weekday * Remove event stories for now * Implement gridstops per hour to be dyamic * New CSS Grid + offsetbased positoning * Fix weird Z-Index issues on hover * Implement blocklist again with new format * Side by side events working - styling needs work * New design of overlap * Overlapping? Working :O * Cleanup * WIP hover state * Werid border issue * fix translate issue * Kinda working with overflow * Fix overflow * Progressive date blocking * Cleanup * Fix double render of blocked list * WIP mobile implementaiton * Trying to fix CSS * Extract CSS to styles.css to allow media queries * Improve documentation - allow args to be changed in storybook * Fix hover showing even if disabled * WIP cols auto approach * Merge blocking dates * Fix zindex * Fix hover position * Fix Z-Index issues on hover and blocking events * Re add onclick handler * Fix overlapping blocking dates * Fix scaling for datevalues columns * Date values closer to DS * Blocked List Tidy up * Storybook + file tidy up * Little tidy up * Fix offsets * Remove event hover * Fix random bg-red-500 * Fix import * FIx blocking cells appearing above start Date * Fix truncation * Fix border overlap * Overlap a little nicer * Condtional 80% sizing * Nitpicks * Fix today height and top breaking * Add text left to time stamp * Support string dates * Add shalow to reduce re-renders * Rename to Calendar instead of scheduler * Fix 3 overlapping events * Fix merge type error * Fix destructuring * NITS * Move to features package Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-12-14 13:36:10 +00:00
import { useCalendarStore } from "../../state/store";
export function CurrentTime() {
const currentTimeRef = useRef<HTMLDivElement>(null);
const [scrolledIntoView, setScrolledIntoView] = useState(false);
const [currentTimePos, setCurrentTimePos] = useState<number | null>(null);
Calendar Weekly Scheduler (#5653) * storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Inital state plannning * Inital state combined with passed in props * Start of UI work * Able to change dates? * Add dynamic hour props * Get grid system setup correctly * Show events on grid * Weird sizing issue but events placed correctly gridstart * CAL styled calendar event component * availability WIP ish * Blocking days! + Block days < today * Kinda working time line * Rename grid stop + formatting * Handle sorting events if required. * Add util for getting startDate bassed on weekday * Remove event stories for now * Implement gridstops per hour to be dyamic * New CSS Grid + offsetbased positoning * Fix weird Z-Index issues on hover * Implement blocklist again with new format * Side by side events working - styling needs work * New design of overlap * Overlapping? Working :O * Cleanup * WIP hover state * Werid border issue * fix translate issue * Kinda working with overflow * Fix overflow * Progressive date blocking * Cleanup * Fix double render of blocked list * WIP mobile implementaiton * Trying to fix CSS * Extract CSS to styles.css to allow media queries * Improve documentation - allow args to be changed in storybook * Fix hover showing even if disabled * WIP cols auto approach * Merge blocking dates * Fix zindex * Fix hover position * Fix Z-Index issues on hover and blocking events * Re add onclick handler * Fix overlapping blocking dates * Fix scaling for datevalues columns * Date values closer to DS * Blocked List Tidy up * Storybook + file tidy up * Little tidy up * Fix offsets * Remove event hover * Fix random bg-red-500 * Fix import * FIx blocking cells appearing above start Date * Fix truncation * Fix border overlap * Overlap a little nicer * Condtional 80% sizing * Nitpicks * Fix today height and top breaking * Add text left to time stamp * Support string dates * Add shalow to reduce re-renders * Rename to Calendar instead of scheduler * Fix 3 overlapping events * Fix merge type error * Fix destructuring * NITS * Move to features package Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-12-14 13:36:10 +00:00
const { startHour, endHour } = useCalendarStore((state) => ({
startHour: state.startHour || 0,
endHour: state.endHour || 23,
}));
const { timeFormat } = useTimePreferences();
Calendar Weekly Scheduler (#5653) * storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Inital state plannning * Inital state combined with passed in props * Start of UI work * Able to change dates? * Add dynamic hour props * Get grid system setup correctly * Show events on grid * Weird sizing issue but events placed correctly gridstart * CAL styled calendar event component * availability WIP ish * Blocking days! + Block days < today * Kinda working time line * Rename grid stop + formatting * Handle sorting events if required. * Add util for getting startDate bassed on weekday * Remove event stories for now * Implement gridstops per hour to be dyamic * New CSS Grid + offsetbased positoning * Fix weird Z-Index issues on hover * Implement blocklist again with new format * Side by side events working - styling needs work * New design of overlap * Overlapping? Working :O * Cleanup * WIP hover state * Werid border issue * fix translate issue * Kinda working with overflow * Fix overflow * Progressive date blocking * Cleanup * Fix double render of blocked list * WIP mobile implementaiton * Trying to fix CSS * Extract CSS to styles.css to allow media queries * Improve documentation - allow args to be changed in storybook * Fix hover showing even if disabled * WIP cols auto approach * Merge blocking dates * Fix zindex * Fix hover position * Fix Z-Index issues on hover and blocking events * Re add onclick handler * Fix overlapping blocking dates * Fix scaling for datevalues columns * Date values closer to DS * Blocked List Tidy up * Storybook + file tidy up * Little tidy up * Fix offsets * Remove event hover * Fix random bg-red-500 * Fix import * FIx blocking cells appearing above start Date * Fix truncation * Fix border overlap * Overlap a little nicer * Condtional 80% sizing * Nitpicks * Fix today height and top breaking * Add text left to time stamp * Support string dates * Add shalow to reduce re-renders * Rename to Calendar instead of scheduler * Fix 3 overlapping events * Fix merge type error * Fix destructuring * NITS * Move to features package Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-12-14 13:36:10 +00:00
useEffect(() => {
// Set the container scroll position based on the current time.
const currentHour = new Date().getHours();
Calendar Weekly Scheduler (#5653) * storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Inital state plannning * Inital state combined with passed in props * Start of UI work * Able to change dates? * Add dynamic hour props * Get grid system setup correctly * Show events on grid * Weird sizing issue but events placed correctly gridstart * CAL styled calendar event component * availability WIP ish * Blocking days! + Block days < today * Kinda working time line * Rename grid stop + formatting * Handle sorting events if required. * Add util for getting startDate bassed on weekday * Remove event stories for now * Implement gridstops per hour to be dyamic * New CSS Grid + offsetbased positoning * Fix weird Z-Index issues on hover * Implement blocklist again with new format * Side by side events working - styling needs work * New design of overlap * Overlapping? Working :O * Cleanup * WIP hover state * Werid border issue * fix translate issue * Kinda working with overflow * Fix overflow * Progressive date blocking * Cleanup * Fix double render of blocked list * WIP mobile implementaiton * Trying to fix CSS * Extract CSS to styles.css to allow media queries * Improve documentation - allow args to be changed in storybook * Fix hover showing even if disabled * WIP cols auto approach * Merge blocking dates * Fix zindex * Fix hover position * Fix Z-Index issues on hover and blocking events * Re add onclick handler * Fix overlapping blocking dates * Fix scaling for datevalues columns * Date values closer to DS * Blocked List Tidy up * Storybook + file tidy up * Little tidy up * Fix offsets * Remove event hover * Fix random bg-red-500 * Fix import * FIx blocking cells appearing above start Date * Fix truncation * Fix border overlap * Overlap a little nicer * Condtional 80% sizing * Nitpicks * Fix today height and top breaking * Add text left to time stamp * Support string dates * Add shalow to reduce re-renders * Rename to Calendar instead of scheduler * Fix 3 overlapping events * Fix merge type error * Fix destructuring * NITS * Move to features package Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-12-14 13:36:10 +00:00
let currentMinute = new Date().getHours() * 60;
currentMinute = currentMinute + new Date().getMinutes();
if (currentHour > endHour || currentHour < startHour) {
setCurrentTimePos(null);
Calendar Weekly Scheduler (#5653) * storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Inital state plannning * Inital state combined with passed in props * Start of UI work * Able to change dates? * Add dynamic hour props * Get grid system setup correctly * Show events on grid * Weird sizing issue but events placed correctly gridstart * CAL styled calendar event component * availability WIP ish * Blocking days! + Block days < today * Kinda working time line * Rename grid stop + formatting * Handle sorting events if required. * Add util for getting startDate bassed on weekday * Remove event stories for now * Implement gridstops per hour to be dyamic * New CSS Grid + offsetbased positoning * Fix weird Z-Index issues on hover * Implement blocklist again with new format * Side by side events working - styling needs work * New design of overlap * Overlapping? Working :O * Cleanup * WIP hover state * Werid border issue * fix translate issue * Kinda working with overflow * Fix overflow * Progressive date blocking * Cleanup * Fix double render of blocked list * WIP mobile implementaiton * Trying to fix CSS * Extract CSS to styles.css to allow media queries * Improve documentation - allow args to be changed in storybook * Fix hover showing even if disabled * WIP cols auto approach * Merge blocking dates * Fix zindex * Fix hover position * Fix Z-Index issues on hover and blocking events * Re add onclick handler * Fix overlapping blocking dates * Fix scaling for datevalues columns * Date values closer to DS * Blocked List Tidy up * Storybook + file tidy up * Little tidy up * Fix offsets * Remove event hover * Fix random bg-red-500 * Fix import * FIx blocking cells appearing above start Date * Fix truncation * Fix border overlap * Overlap a little nicer * Condtional 80% sizing * Nitpicks * Fix today height and top breaking * Add text left to time stamp * Support string dates * Add shalow to reduce re-renders * Rename to Calendar instead of scheduler * Fix 3 overlapping events * Fix merge type error * Fix destructuring * NITS * Move to features package Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-12-14 13:36:10 +00:00
}
const minutesFromStart = currentMinute - startHour * 60;
setCurrentTimePos(minutesFromStart);
if (!currentTimeRef.current || scrolledIntoView) return;
// Within a small timeout so element has time to render.
setTimeout(() => {
currentTimeRef?.current?.scrollIntoView({ block: "center" });
setScrolledIntoView(true);
}, 100);
Calendar Weekly Scheduler (#5653) * storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Inital state plannning * Inital state combined with passed in props * Start of UI work * Able to change dates? * Add dynamic hour props * Get grid system setup correctly * Show events on grid * Weird sizing issue but events placed correctly gridstart * CAL styled calendar event component * availability WIP ish * Blocking days! + Block days < today * Kinda working time line * Rename grid stop + formatting * Handle sorting events if required. * Add util for getting startDate bassed on weekday * Remove event stories for now * Implement gridstops per hour to be dyamic * New CSS Grid + offsetbased positoning * Fix weird Z-Index issues on hover * Implement blocklist again with new format * Side by side events working - styling needs work * New design of overlap * Overlapping? Working :O * Cleanup * WIP hover state * Werid border issue * fix translate issue * Kinda working with overflow * Fix overflow * Progressive date blocking * Cleanup * Fix double render of blocked list * WIP mobile implementaiton * Trying to fix CSS * Extract CSS to styles.css to allow media queries * Improve documentation - allow args to be changed in storybook * Fix hover showing even if disabled * WIP cols auto approach * Merge blocking dates * Fix zindex * Fix hover position * Fix Z-Index issues on hover and blocking events * Re add onclick handler * Fix overlapping blocking dates * Fix scaling for datevalues columns * Date values closer to DS * Blocked List Tidy up * Storybook + file tidy up * Little tidy up * Fix offsets * Remove event hover * Fix random bg-red-500 * Fix import * FIx blocking cells appearing above start Date * Fix truncation * Fix border overlap * Overlap a little nicer * Condtional 80% sizing * Nitpicks * Fix today height and top breaking * Add text left to time stamp * Support string dates * Add shalow to reduce re-renders * Rename to Calendar instead of scheduler * Fix 3 overlapping events * Fix merge type error * Fix destructuring * NITS * Move to features package Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-12-14 13:36:10 +00:00
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [startHour, endHour, scrolledIntoView]);
Calendar Weekly Scheduler (#5653) * storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Inital state plannning * Inital state combined with passed in props * Start of UI work * Able to change dates? * Add dynamic hour props * Get grid system setup correctly * Show events on grid * Weird sizing issue but events placed correctly gridstart * CAL styled calendar event component * availability WIP ish * Blocking days! + Block days < today * Kinda working time line * Rename grid stop + formatting * Handle sorting events if required. * Add util for getting startDate bassed on weekday * Remove event stories for now * Implement gridstops per hour to be dyamic * New CSS Grid + offsetbased positoning * Fix weird Z-Index issues on hover * Implement blocklist again with new format * Side by side events working - styling needs work * New design of overlap * Overlapping? Working :O * Cleanup * WIP hover state * Werid border issue * fix translate issue * Kinda working with overflow * Fix overflow * Progressive date blocking * Cleanup * Fix double render of blocked list * WIP mobile implementaiton * Trying to fix CSS * Extract CSS to styles.css to allow media queries * Improve documentation - allow args to be changed in storybook * Fix hover showing even if disabled * WIP cols auto approach * Merge blocking dates * Fix zindex * Fix hover position * Fix Z-Index issues on hover and blocking events * Re add onclick handler * Fix overlapping blocking dates * Fix scaling for datevalues columns * Date values closer to DS * Blocked List Tidy up * Storybook + file tidy up * Little tidy up * Fix offsets * Remove event hover * Fix random bg-red-500 * Fix import * FIx blocking cells appearing above start Date * Fix truncation * Fix border overlap * Overlap a little nicer * Condtional 80% sizing * Nitpicks * Fix today height and top breaking * Add text left to time stamp * Support string dates * Add shalow to reduce re-renders * Rename to Calendar instead of scheduler * Fix 3 overlapping events * Fix merge type error * Fix destructuring * NITS * Move to features package Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-12-14 13:36:10 +00:00
return (
<div
ref={currentTimeRef}
className="absolute top-0 z-40 flex h-px items-center justify-center text-xs"
Calendar Weekly Scheduler (#5653) * storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Inital state plannning * Inital state combined with passed in props * Start of UI work * Able to change dates? * Add dynamic hour props * Get grid system setup correctly * Show events on grid * Weird sizing issue but events placed correctly gridstart * CAL styled calendar event component * availability WIP ish * Blocking days! + Block days < today * Kinda working time line * Rename grid stop + formatting * Handle sorting events if required. * Add util for getting startDate bassed on weekday * Remove event stories for now * Implement gridstops per hour to be dyamic * New CSS Grid + offsetbased positoning * Fix weird Z-Index issues on hover * Implement blocklist again with new format * Side by side events working - styling needs work * New design of overlap * Overlapping? Working :O * Cleanup * WIP hover state * Werid border issue * fix translate issue * Kinda working with overflow * Fix overflow * Progressive date blocking * Cleanup * Fix double render of blocked list * WIP mobile implementaiton * Trying to fix CSS * Extract CSS to styles.css to allow media queries * Improve documentation - allow args to be changed in storybook * Fix hover showing even if disabled * WIP cols auto approach * Merge blocking dates * Fix zindex * Fix hover position * Fix Z-Index issues on hover and blocking events * Re add onclick handler * Fix overlapping blocking dates * Fix scaling for datevalues columns * Date values closer to DS * Blocked List Tidy up * Storybook + file tidy up * Little tidy up * Fix offsets * Remove event hover * Fix random bg-red-500 * Fix import * FIx blocking cells appearing above start Date * Fix truncation * Fix border overlap * Overlap a little nicer * Condtional 80% sizing * Nitpicks * Fix today height and top breaking * Add text left to time stamp * Support string dates * Add shalow to reduce re-renders * Rename to Calendar instead of scheduler * Fix 3 overlapping events * Fix merge type error * Fix destructuring * NITS * Move to features package Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-12-14 13:36:10 +00:00
aria-hidden="true"
style={{
top: `calc(${currentTimePos}*var(--one-minute-height) + var(--calendar-offset-top))`,
zIndex: 70,
}}>
<div className="w-14 pr-2 text-right">{dayjs().format(timeFormat)}</div>
<div className="bg-inverted h-3 w-px" />
<div className="bg-inverted h-px w-screen" />
Calendar Weekly Scheduler (#5653) * storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Inital state plannning * Inital state combined with passed in props * Start of UI work * Able to change dates? * Add dynamic hour props * Get grid system setup correctly * Show events on grid * Weird sizing issue but events placed correctly gridstart * CAL styled calendar event component * availability WIP ish * Blocking days! + Block days < today * Kinda working time line * Rename grid stop + formatting * Handle sorting events if required. * Add util for getting startDate bassed on weekday * Remove event stories for now * Implement gridstops per hour to be dyamic * New CSS Grid + offsetbased positoning * Fix weird Z-Index issues on hover * Implement blocklist again with new format * Side by side events working - styling needs work * New design of overlap * Overlapping? Working :O * Cleanup * WIP hover state * Werid border issue * fix translate issue * Kinda working with overflow * Fix overflow * Progressive date blocking * Cleanup * Fix double render of blocked list * WIP mobile implementaiton * Trying to fix CSS * Extract CSS to styles.css to allow media queries * Improve documentation - allow args to be changed in storybook * Fix hover showing even if disabled * WIP cols auto approach * Merge blocking dates * Fix zindex * Fix hover position * Fix Z-Index issues on hover and blocking events * Re add onclick handler * Fix overlapping blocking dates * Fix scaling for datevalues columns * Date values closer to DS * Blocked List Tidy up * Storybook + file tidy up * Little tidy up * Fix offsets * Remove event hover * Fix random bg-red-500 * Fix import * FIx blocking cells appearing above start Date * Fix truncation * Fix border overlap * Overlap a little nicer * Condtional 80% sizing * Nitpicks * Fix today height and top breaking * Add text left to time stamp * Support string dates * Add shalow to reduce re-renders * Rename to Calendar instead of scheduler * Fix 3 overlapping events * Fix merge type error * Fix destructuring * NITS * Move to features package Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-12-14 13:36:10 +00:00
</div>
);
}