Skip to content

Commit 0b70c31

Browse files
williammckwilliammck
committed
feat: Switch to react-big-calendar
1 parent 14bd474 commit 0b70c31

File tree

14 files changed

+475
-822
lines changed

14 files changed

+475
-822
lines changed

‎package-lock.json‎

Lines changed: 258 additions & 574 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
"@sentry/nextjs": "^9.24.0",
1616
"@tailwindcss/postcss": "^4.1.8",
1717
"@tailwindcss/typography": "^0.5.10",
18-
"@toast-ui/react-calendar": "^2.1.3",
1918
"classnames": "^2.5.1",
2019
"date-fns": "^3.6.0",
2120
"date-fns-tz": "^3.2.0",
@@ -29,6 +28,7 @@
2928
"postcss": "^8.4.36",
3029
"rc-slider": "^11.1.8",
3130
"react": "^19.1.0",
31+
"react-big-calendar": "^1.19.2",
3232
"react-calendar-heatmap": "^1.9.0",
3333
"react-data-table-component": "^7.6.2",
3434
"react-datepicker": "^8.4.0",
@@ -55,6 +55,7 @@
5555
"@types/geojson": "^7946.0.14",
5656
"@types/node": "^22.15.29",
5757
"@types/react": "^19.1.6",
58+
"@types/react-big-calendar": "^1.16.2",
5859
"@types/react-calendar-heatmap": "1.6.7",
5960
"@types/react-dom": "^19.1.5",
6061
"@types/react-html-parser": "^2.0.6",

‎src/app/dashboard/loa/Scheduler.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import React, { useState } from 'react';
44
import { LuCircleAlert } from 'react-icons/lu';
5-
import { TuiCalendar } from '@/components/Calendar';
5+
import { Calendar } from '@/components/Calendar';
66
import { ClientPortal } from '@/components/ClientPortal';
77
import { Alert, AlertTitle } from '@/components/Alert';
88
import { Button } from '@/components/Button';
@@ -14,9 +14,8 @@ export const Scheduler: React.FC = () => {
1414

1515
return (
1616
<>
17-
<TuiCalendar
18-
className="hidden lg:block"
19-
height="75vh"
17+
<Calendar
18+
className="hidden lg:block h-[75vh]"
2019
view="month"
2120
onSelectDateTime={({ start, end }) => {
2221
setDateRange({ start, end });

‎src/app/events/[id]/edit/EditEventForm.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export const EditEventForm: React.FC<EditEventFormProps> = ({ event }) => {
8787
showTimeSelect
8888
dateFormat="MMM d, yyyy HH:mm"
8989
selected={value}
90-
customInput={<TextInput label="Start (Zulu)" error={errors.start?.message} />}
90+
customInput={<TextInput label="Start (Local)" error={errors.start?.message} />}
9191
/>
9292
</div>
9393
)}
@@ -102,7 +102,7 @@ export const EditEventForm: React.FC<EditEventFormProps> = ({ event }) => {
102102
showTimeSelect
103103
dateFormat="MMM d, yyyy HH:mm"
104104
selected={value}
105-
customInput={<TextInput label="End (Zulu)" error={errors.end?.message} />}
105+
customInput={<TextInput label="End (Local)" error={errors.end?.message} />}
106106
/>
107107
</div>
108108
)}

‎src/app/events/new/NewEventModal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export const NewEventModal: React.FC<RequestTrainingModalProps> = ({ presets, st
7878
showTimeSelect
7979
dateFormat="MMM d, yyyy HH:mm"
8080
selected={value}
81-
customInput={<TextInput label="Start (Zulu)" error={errors.start?.message} />}
81+
customInput={<TextInput label="Start (Local)" error={errors.start?.message} />}
8282
/>
8383
</div>
8484
)}
@@ -93,7 +93,7 @@ export const NewEventModal: React.FC<RequestTrainingModalProps> = ({ presets, st
9393
showTimeSelect
9494
dateFormat="MMM d, yyyy HH:mm"
9595
selected={value}
96-
customInput={<TextInput label="End (Zulu)" error={errors.end?.message} />}
96+
customInput={<TextInput label="End (Local)" error={errors.end?.message} />}
9797
/>
9898
</div>
9999
)}

‎src/app/events/new/Scheduler.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import React, { useState } from 'react';
44
import { LuCircleAlert } from 'react-icons/lu';
5-
import { TuiCalendar } from '@/components/Calendar';
5+
import { Calendar } from '@/components/Calendar';
66
import type { SelectOption } from '@/components/Forms';
77
import { ClientPortal } from '@/components/ClientPortal';
88
import { Alert, AlertTitle } from '@/components/Alert';
@@ -19,11 +19,9 @@ export const Scheduler: React.FC<SchedulerProps> = ({ presets }) => {
1919

2020
return (
2121
<>
22-
<TuiCalendar
23-
className="hidden sm:block"
24-
height="75vh"
22+
<Calendar
23+
className="hidden sm:block h-[75vh]"
2524
view="week"
26-
week={{ taskView: false, eventView: ['time'] }}
2725
onSelectDateTime={({ start, end }) => {
2826
setDateRange({ start, end });
2927
setShowModal(true);

‎src/app/events/support/SupportForm.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export const SupportForm: React.FC = () => {
9797
selected={value}
9898
customInput={(
9999
<TextInput
100-
label="Start (Zulu)"
100+
label="Start (Local)"
101101
error={errors.start?.message}
102102
/>
103103
)}
@@ -118,7 +118,7 @@ export const SupportForm: React.FC = () => {
118118
selected={value}
119119
customInput={(
120120
<TextInput
121-
label="End (Zulu)"
121+
label="End (Local)"
122122
error={errors.end?.message}
123123
/>
124124
)}

‎src/app/globals.css‎

Lines changed: 79 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
@import "react-datepicker/dist/react-datepicker.css";
2-
@import "react-quill-new/dist/quill.snow.css";
3-
@import "react-calendar-heatmap/dist/styles.css";
4-
@import "rc-slider/assets/index.css";
5-
@import "mapbox-gl/dist/mapbox-gl.css";
6-
@import "@toast-ui/calendar/dist/toastui-calendar.min.css";
1+
@import "react-datepicker/dist/react-datepicker.css" layer(base);
2+
@import "react-quill-new/dist/quill.snow.css" layer(base);
3+
@import "react-calendar-heatmap/dist/styles.css" layer(base);
4+
@import "rc-slider/assets/index.css" layer(base);
5+
@import "mapbox-gl/dist/mapbox-gl.css" layer(base);
6+
@import "react-big-calendar/lib/css/react-big-calendar.css" layer(base);
77
@import "tailwindcss";
88

99
@plugin "@tailwindcss/typography";
@@ -57,6 +57,11 @@
5757
hr {
5858
@apply border-b border-slate-200 dark:border-zinc-600;
5959
}
60+
61+
button:not(:disabled),
62+
[role="button"]:not(:disabled) {
63+
@apply cursor-pointer;
64+
}
6065
}
6166

6267
@utility prose {
@@ -220,34 +225,82 @@
220225
@apply opacity-80!;
221226
}
222227

223-
.toastui-calendar-panel,
224-
.toastui-calendar-week,
225-
.toastui-calendar-column,
226-
.toastui-calendar-weekday-grid,
227-
.toastui-calendar-daygrid-cell,
228-
.toastui-calendar-gridline-half,
229-
.toastui-calendar-timegrid-hour-rows,
230-
.toastui-calendar-timezone-labels-slot,
231-
.toastui-calendar-timegrid-timezone-label {
232-
@apply dark:border-zinc-700!;
228+
.rbc-header,
229+
.rbc-month-row + .rbc-month-row,
230+
.rbc-day-bg + .rbc-day-bg,
231+
.rbc-timeslot-group,
232+
.rbc-time-view .rbc-allday-cell + .rbc-allday-cell,
233+
.rbc-time-content > * + * > *,
234+
.rbc-day-slot .rbc-time-slot {
235+
@apply border-zinc-200 dark:border-zinc-700;
233236
}
234237

235-
.toastui-calendar-timegrid-hour-rows,
236-
.toastui-calendar-timegrid-timezone-label {
237-
@apply bg-transparent!;
238+
.rbc-month-view,
239+
.rbc-time-view,
240+
.rbc-time-header,
241+
.rbc-time-header-content,
242+
.rbc-time-content,
243+
.rbc-time-gutter .rbc-timeslot-group {
244+
@apply border-0;
238245
}
239246

240-
.toastui-calendar-timezone-labels-slot {
241-
@apply dark:bg-zinc-900!;
247+
.rbc-timeslot-group {
248+
@apply min-h-12;
242249
}
243250

244-
.toastui-calendar-weekday-event,
245-
.toastui-calendar-weekday-event-title {
246-
@apply text-inherit!;
251+
.rbc-month-header,
252+
.rbc-time-header-cell {
253+
@apply min-h-8;
254+
}
255+
256+
.rbc-time-content {
257+
@apply border-t-2 border-zinc-200 dark:border-zinc-700;
258+
}
259+
260+
.rbc-header {
261+
@apply flex items-center text-zinc-400 text-left font-normal;
262+
}
263+
264+
.rbc-header + .rbc-header {
265+
@apply border-l-0;
266+
}
267+
268+
.rbc-today {
269+
@apply bg-sky-400/10;
270+
}
271+
272+
.rbc-current-time-indicator {
273+
@apply bg-sky-500;
274+
}
275+
276+
.rbc-date-cell,
277+
.rbc-time-slot {
278+
@apply text-zinc-700 dark:text-zinc-300;
279+
}
280+
281+
.rbc-off-range {
282+
@apply text-zinc-400 dark:text-zinc-600;
283+
}
284+
285+
.rbc-off-range-bg {
286+
@apply bg-transparent;
287+
}
288+
289+
.rbc-event:focus {
290+
@apply outline-0;
291+
}
292+
293+
.rbc-event-label,
294+
.rbc-event-content {
295+
@apply text-xs;
296+
}
297+
298+
.rbc-selected-cell {
299+
@apply bg-sky-500/20 border border-sky-500!;
247300
}
248301

249-
.toastui-calendar-event-time {
250-
@apply whitespace-normal break-words;
302+
.rbc-slot-selection {
303+
@apply bg-sky-500/20 border border-sky-500 text-sky-500;
251304
}
252305

253306
.mapboxgl-popup-content {

‎src/app/training/(dashboard)/request/RequestTrainingModal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const RequestTrainingModal: React.FC<RequestTrainingModalProps> = ({ star
6363
portalId="modal-container"
6464
dateFormat="MMM d, yyyy HH:mm"
6565
selected={value}
66-
customInput={<TextInput label="Start (Zulu)" error={errors.start?.message} />}
66+
customInput={<TextInput label="Start (Local)" error={errors.start?.message} />}
6767
/>
6868
</div>
6969
)}
@@ -79,7 +79,7 @@ export const RequestTrainingModal: React.FC<RequestTrainingModalProps> = ({ star
7979
portalId="modal-container"
8080
dateFormat="MMM d, yyyy HH:mm"
8181
selected={value}
82-
customInput={<TextInput label="End (Zulu)" error={errors.end?.message} />}
82+
customInput={<TextInput label="End (Local)" error={errors.end?.message} />}
8383
/>
8484
</div>
8585
)}

‎src/app/training/(dashboard)/request/Scheduler.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
import React, { useState } from 'react';
44
import { LuCircleAlert } from 'react-icons/lu';
5-
import { TuiCalendar } from '@/components/Calendar';
5+
import { Calendar } from '@/components/Calendar';
66
import { ClientPortal } from '@/components/ClientPortal';
77
import { Alert, AlertTitle } from '@/components/Alert';
88
import { Button } from '@/components/Button';
9-
import { eventObjectFromRequest } from '@/utils/calendar';
9+
import { calendarEventFromRequest } from '@/utils/calendar';
1010
import { type TrainingRequest } from '@/types/training';
1111
import { RequestTrainingModal } from './RequestTrainingModal';
1212

@@ -20,12 +20,10 @@ export const Scheduler: React.FC<SchedulerProps> = ({ requests }) => {
2020

2121
return (
2222
<>
23-
<TuiCalendar
24-
className="hidden sm:block"
25-
height="75vh"
23+
<Calendar
24+
className="hidden sm:block h-[75vh]"
2625
view="week"
27-
events={requests.map(eventObjectFromRequest)}
28-
week={{ taskView: false, eventView: ['time'] }}
26+
events={requests.map(calendarEventFromRequest)}
2927
onSelectDateTime={({ start, end }) => {
3028
setDateRange({ start, end });
3129
setShowModal(true);

0 commit comments

Comments
 (0)