nice calendar
This commit is contained in:
parent
7e74d10e8e
commit
36463f8cbb
@ -85,13 +85,13 @@ const DAYS_IN_MONTH = [
|
||||
|
||||
];
|
||||
|
||||
const HEADER_HEIGHT = 52;
|
||||
const HEADER_HEIGHT = 35;
|
||||
|
||||
const DAY_COLUMN_WIDTH = 52;
|
||||
const DAY_COLUMN_WIDTH = 45;
|
||||
|
||||
const MIN_MONTH_WIDTH = 90;
|
||||
|
||||
const MIN_ROW_HEIGHT = 28;
|
||||
const MIN_ROW_HEIGHT = 17.5;
|
||||
|
||||
const DEFAULT_EVENT_COLOR = '#2563eb';
|
||||
|
||||
@ -99,7 +99,7 @@ const EVENT_BAR_WIDTH = 8;
|
||||
|
||||
const EVENT_LANE_GAP = 11;
|
||||
|
||||
const EVENT_LEFT_PADDING = 5;
|
||||
const EVENT_LEFT_PADDING = 3;
|
||||
|
||||
const CalendarPage = () => {
|
||||
const [requestError, setRequestError] = useState('');
|
||||
@ -1452,7 +1452,7 @@ const CalendarPage = () => {
|
||||
</>
|
||||
}
|
||||
>
|
||||
<CardContent className="flex min-h-0 flex-1 flex-col overflow-hidden p-4">
|
||||
<CardContent className="flex min-h-0 flex-1 flex-col overflow-hidden">
|
||||
{requestError && (
|
||||
<Alert variant="destructive" className="mb-3">
|
||||
<AlertDescription>{requestError}</AlertDescription>
|
||||
@ -1461,7 +1461,7 @@ const CalendarPage = () => {
|
||||
<Card className="flex min-h-0 flex-1 flex-col overflow-hidden p-0">
|
||||
<div
|
||||
ref={calendarRef}
|
||||
className="relative min-h-0 flex-1 overflow-auto p-0"
|
||||
className="relative min-h-0 flex-1 overflow-auto md:overflow-hidden p-0"
|
||||
style={{
|
||||
WebkitOverflowScrolling:
|
||||
'touch',
|
||||
@ -1679,8 +1679,8 @@ const CalendarPage = () => {
|
||||
left-1/2
|
||||
top-1/2
|
||||
flex
|
||||
h-6
|
||||
min-w-6
|
||||
h-[min(14px,calc(100%))]
|
||||
min-w-[min(14px,calc(100%))]
|
||||
-translate-x-1/2
|
||||
-translate-y-1/2
|
||||
items-center
|
||||
@ -1735,17 +1735,13 @@ const CalendarPage = () => {
|
||||
absolute
|
||||
z-20
|
||||
cursor-pointer
|
||||
rounded-full
|
||||
"
|
||||
style={{
|
||||
left: `${EVENT_LEFT_PADDING + laneOffset}px`,
|
||||
width: `${EVENT_BAR_WIDTH}px`,
|
||||
top: isStart
|
||||
? 'calc(50% - 3px)'
|
||||
: '-3px',
|
||||
bottom: isEnd
|
||||
? 'calc(50% - 3px)'
|
||||
: '-3px',
|
||||
top: isStart ? '2px' : '-1px',
|
||||
bottom: isEnd ? '2px' : '-1px',
|
||||
borderRadius: `${isStart ? '9999px' : '0'} ${isStart ? '9999px' : '0'} ${isEnd ? '9999px' : '0'} ${isEnd ? '9999px' : '0'}`,
|
||||
backgroundColor:
|
||||
eventColor,
|
||||
}}
|
||||
@ -1808,14 +1804,13 @@ const CalendarPage = () => {
|
||||
key={`single-${event.id}`}
|
||||
className="
|
||||
pointer-events-auto
|
||||
h-[18px]
|
||||
w-[18px]
|
||||
cursor-pointer
|
||||
rounded-full
|
||||
"
|
||||
style={{
|
||||
backgroundColor:
|
||||
eventColor,
|
||||
width: `${Math.min(12, Math.max(6, rowHeight * 0.9))}px`,
|
||||
height: `${Math.min(12, Math.max(6, rowHeight * 0.9))}px`,
|
||||
backgroundColor: eventColor,
|
||||
}}
|
||||
onPointerDown={(pointerEvent) => {
|
||||
pointerEvent.stopPropagation();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user