feat: Split datetime fields

- Replace single datetime-local field with 4 separate fields:

- Add helper functions:
  * splitDateTime(): Split datetime string into date and time parts
  * combineDateTime(): Combine date and time into datetime string

- Implement internal state management:
  * startDate, startTime, endDate, endTime internal states
  * Sync effects to update internal states from start/end props
  * Change handlers for each field that combine values and call parent handlers

- Fix test cases:
  * Update EventModal.test.tsx, EventUpdateModal.test.tsx to use new field labels
  * Change from 'Start'/'End' to 'Start Date'/'Start Time'/'End Time'/'End Date'

src/components/Calendar/utils/calendarColorsUtils.tsx

@@ -9,7 +9,7 @@ export function updateDarkColor(
   dispatch: ThunkDispatch<any, any, any>
 ) {
   Object.values(calendars).forEach((cal) => {
-    if (!cal?.color?.light) return;
+    if (!cal?.color?.light || typeof cal.color.light !== "string") return;
     const baseColor = cal.color.light;
 
     const isDefault = Object.values(defaultColors).find(
@@ -29,6 +29,10 @@ export function updateDarkColor(
 }
 
 export function getAccessiblePair(baseColor: string, theme: Theme): string {
+  if (typeof baseColor !== "string") {
+    return theme.palette.getContrastText("#000");
+  }
+
   const contrastToBlack = getContrastRatio(baseColor, "#000");
   const contrastToWhite = getContrastRatio(baseColor, "#fff");
   const isLight = contrastToBlack > contrastToWhite;