* 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>
93 lines
3.3 KiB
TypeScript
93 lines
3.3 KiB
TypeScript
import dayjs from "@calcom/dayjs";
|
|
import { TimeRange } from "@calcom/types/schedule";
|
|
|
|
// By default starts on Sunday (Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday)
|
|
export function weekdayDates(weekStart = 0, startDate: Date, length = 6) {
|
|
const tmpStartDate = startDate;
|
|
while (tmpStartDate.getDay() !== weekStart) {
|
|
tmpStartDate.setDate(tmpStartDate.getDate() - 1);
|
|
}
|
|
return {
|
|
startDate: tmpStartDate,
|
|
endDate: new Date(tmpStartDate.getTime() + length * 24 * 60 * 60 * 1000),
|
|
};
|
|
}
|
|
export type GridCellToDateProps = {
|
|
day: Date;
|
|
gridCellIdx: number;
|
|
totalGridCells: number;
|
|
selectionLength: number;
|
|
startHour: number;
|
|
};
|
|
|
|
export function gridCellToDateTime({
|
|
day,
|
|
gridCellIdx,
|
|
totalGridCells,
|
|
selectionLength,
|
|
startHour,
|
|
}: GridCellToDateProps) {
|
|
// endHour - startHour = selectionLength
|
|
const minutesInSelection = (selectionLength + 1) * 60;
|
|
const minutesPerCell = minutesInSelection / totalGridCells;
|
|
const minutesIntoSelection = minutesPerCell * gridCellIdx;
|
|
|
|
// Add startHour since we use StartOfDay for day props. This could be improved by changing the getDaysBetweenDates function
|
|
// To handle the startHour+endHour
|
|
const cellDateTime = dayjs(day).add(minutesIntoSelection, "minutes").add(startHour, "hours");
|
|
return cellDateTime;
|
|
}
|
|
|
|
export function getDaysBetweenDates(dateFrom: Date, dateTo: Date) {
|
|
const dates = []; // this is as dayjs date
|
|
let startDate = dayjs(dateFrom).utc().hour(0).minute(0).second(0).millisecond(0);
|
|
dates.push(startDate);
|
|
const endDate = dayjs(dateTo).utc().hour(0).minute(0).second(0).millisecond(0);
|
|
while (startDate.isBefore(endDate)) {
|
|
dates.push(startDate.add(1, "day"));
|
|
startDate = startDate.add(1, "day");
|
|
}
|
|
return dates;
|
|
}
|
|
|
|
export function getHoursToDisplay(startHour: number, endHour: number) {
|
|
const dates = []; // this is as dayjs date
|
|
let startDate = dayjs("1970-01-01").utc().hour(startHour);
|
|
dates.push(startDate);
|
|
const endDate = dayjs("1970-01-01").utc().hour(endHour);
|
|
while (startDate.isBefore(endDate)) {
|
|
dates.push(startDate.add(1, "hour"));
|
|
startDate = startDate.add(1, "hour");
|
|
}
|
|
return dates;
|
|
}
|
|
|
|
export function mergeOverlappingDateRanges(dateRanges: TimeRange[]) {
|
|
//Sort the date ranges by start date
|
|
dateRanges.sort((a, b) => {
|
|
return a.start.getTime() - b.start.getTime();
|
|
});
|
|
//Create a new array to hold the merged date ranges
|
|
const mergedDateRanges = [];
|
|
//Loop through the date ranges
|
|
for (let i = 0; i < dateRanges.length; i++) {
|
|
//If the merged date ranges array is empty, add the first date range
|
|
if (mergedDateRanges.length === 0) {
|
|
mergedDateRanges.push(dateRanges[i]);
|
|
} else {
|
|
//Get the last date range in the merged date ranges array
|
|
const lastMergedDateRange = mergedDateRanges[mergedDateRanges.length - 1];
|
|
//Get the current date range
|
|
const currentDateRange = dateRanges[i];
|
|
//If the last merged date range overlaps with the current date range, merge them
|
|
if (lastMergedDateRange.end.getTime() >= currentDateRange.start.getTime()) {
|
|
lastMergedDateRange.end = currentDateRange.end;
|
|
} else {
|
|
//Otherwise, add the current date range to the merged date ranges array
|
|
mergedDateRanges.push(currentDateRange);
|
|
}
|
|
}
|
|
}
|
|
return mergedDateRanges;
|
|
}
|