Files
calendar/packages/features/calendars/weeklyview/utils/index.ts
T
sean-brydonGitHubJeroen ReumkenszomarsPeer Richelsenkodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
8fd5d6b5b5 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

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;
}