@stoker-platform/web-app 0.5.217 → 0.5.219

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @stoker-platform/web-app
 
+## 0.5.219
+
+### Patch Changes
+
+- Updated dependencies
+    - @stoker-platform/web-client@0.5.90
+
+## 0.5.218
+
+### Patch Changes
+
+- feat: add Calendar additional collections
+    - @stoker-platform/node-client@0.5.85
+    - @stoker-platform/utils@0.5.76
+    - @stoker-platform/web-client@0.5.89
+
 ## 0.5.217
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.217",
+    "version": "0.5.219",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
@@ -51,9 +51,9 @@
         "@radix-ui/react-tooltip": "^1.2.8",
         "@react-google-maps/api": "^2.20.8",
         "@sentry/react": "^10.56.0",
-        "@stoker-platform/node-client": "0.5.84",
-        "@stoker-platform/utils": "0.5.75",
-        "@stoker-platform/web-client": "0.5.88",
+        "@stoker-platform/node-client": "0.5.85",
+        "@stoker-platform/utils": "0.5.76",
+        "@stoker-platform/web-client": "0.5.90",
         "@tanstack/react-table": "^8.21.3",
         "@types/react": "18.3.13",
         "@types/react-dom": "18.3.1",

package/src/Calendar.tsx

@@ -93,6 +93,49 @@ function getInclusiveEnd(exclusiveEnd: Date, timezone: string): Date {
     return DateTime.fromJSDate(exclusiveEnd).setZone(timezone).startOf("day").minus({ days: 1 }).toJSDate()
 }
 
+const calendarConfigOverrideKeys: (keyof CalendarConfig)[] = [
+    "dataStart",
+    "dataEnd",
+    "dataStartOffset",
+    "dataEndOffset",
+    "fullCalendarLarge",
+    "fullCalendarSmall",
+    "roles",
+    "title",
+    "unscheduled",
+    "additionalCollections",
+]
+
+export function mergeCalendarConfig(main: CalendarConfig, additional: CalendarConfig): CalendarConfig {
+    const merged = { ...additional }
+    for (const key of calendarConfigOverrideKeys) {
+        // eslint-disable-next-line security/detect-object-injection
+        if (main[key] !== undefined) {
+            // eslint-disable-next-line security/detect-object-injection
+            ;(merged as Record<keyof CalendarConfig, unknown>)[key] = main[key]
+        }
+    }
+    return merged
+}
+
+function applyOptimisticUpdates(
+    records: StokerRecord[],
+    collectionOptimisticUpdates: StokerRecord[] | undefined,
+): StokerRecord[] {
+    if (!collectionOptimisticUpdates?.length) return records
+    const updatedRecords = cloneDeep(records)
+    collectionOptimisticUpdates.forEach((optimisticRecord) => {
+        const index = updatedRecords.findIndex((record) => record.id === optimisticRecord.id)
+        if (index !== -1) {
+            // eslint-disable-next-line security/detect-object-injection
+            updatedRecords[index] = optimisticRecord
+        } else {
+            updatedRecords.push(optimisticRecord)
+        }
+    })
+    return updatedRecords
+}
+
 function isAllDayEvent(record: StokerRecord, calendarConfig: CalendarConfig): boolean {
     if (calendarConfig.allDayField !== undefined) {
         return !!record[calendarConfig.allDayField]
@@ -137,11 +180,11 @@ function Row({
             ref={drag}
             tabIndex={0}
             onClick={() => {
-                goToRecord(collection, record)
+                goToRecord(collection, record, undefined, true)
             }}
             onKeyDown={(event) => {
                 if (event.key === "Enter" || event.key === " ") {
-                    goToRecord(collection, record)
+                    goToRecord(collection, record, undefined, true)
                 }
             }}
             className={className}
@@ -169,6 +212,18 @@ interface CalendarProps {
     unsubscribe: React.MutableRefObject<{ [key: string | number]: ((direction?: "first" | "last") => void)[] }>
     setOptimisticList: () => void
     canAddRecords: boolean
+    disableCreate: boolean
+    creatableCalendarCollections: StokerCollection[]
+    additionalOfflineUpdateDisabled: Record<StokerCollection, boolean> | undefined
+    additionalTitles:
+        | Record<
+              StokerCollection,
+              {
+                  collection: string
+                  record: string
+              }
+          >
+        | undefined
     onDateSelection?: (dateSelectionData: { startDate: Date; endDate?: Date }) => void
     backToStartKey: number
     relationList?: boolean
@@ -185,6 +240,10 @@ export function Calendar({
     unsubscribe,
     setOptimisticList,
     canAddRecords,
+    disableCreate,
+    creatableCalendarCollections,
+    additionalOfflineUpdateDisabled,
+    additionalTitles,
     onDateSelection,
     backToStartKey,
     relationList,
@@ -222,10 +281,12 @@ export function Calendar({
     const { optimisticUpdates, removeOptimisticUpdate, setOptimisticUpdate, removeCacheOptimistic } = useOptimistic()
     const { isGlobalLoading, setGlobalLoading } = useGlobalLoading()
     const [isInitialized, setIsInitialized] = useState(false)
+    const [mainCollectionLoaded, setMainCollectionLoaded] = useState(false)
+    const [additionalConfigLoaded, setAdditionalConfigLoaded] = useState(false)
 
     const [hasStartUpdateAccess, setHasStartUpdateAccess] = useState<boolean>(false)
     const [hasEndUpdateAccess, setHasEndUpdateAccess] = useState<boolean>(false)
-    const [hasReourceUpdateAccess, setHasReourceUpdateAccess] = useState<boolean>(false)
+    const [hasResourceUpdateAccess, setHasResourceUpdateAccess] = useState<boolean>(false)
 
     const [currentViewLarge, setCurrentViewLarge] = useState<string | undefined>(undefined)
     const [currentViewSmall, setCurrentViewSmall] = useState<string | undefined>(undefined)
@@ -234,6 +295,10 @@ export function Calendar({
     const [resources, setResources] = useState<Set<{ id: string; title: string; Collection_Path?: string }>>(new Set())
     const [unscheduledRecords, setUnscheduledRecords] = useState<StokerRecord[]>([])
     const [unscheduledLoading, setUnscheduledLoading] = useState<boolean>(true)
+    const [additionalLists, setAdditionalLists] = useState<Record<string, StokerRecord[]>>({})
+    const [additionalConfig, setAdditionalConfig] = useState<
+        Record<string, { config: CalendarConfig; recordTitleField: string }>
+    >({})
 
     const { filters, getFilterConstraints } = useFilters()
     const [rangeFilter, setRangeFilter] = useState<RangeFilter | undefined>(undefined)
@@ -465,8 +530,8 @@ export function Calendar({
                 setHasEndUpdateAccess(hasEndUpdateAccess && (!allDayField || hasAllDayUpdateAccess))
             }
             if (resourceField) {
-                const hasReourceUpdateAccess = !!canUpdateField(collection, resourceFieldSchema, permissions)
-                setHasReourceUpdateAccess(hasReourceUpdateAccess)
+                const hasResourceUpdateAccess = !!canUpdateField(collection, resourceFieldSchema, permissions)
+                setHasResourceUpdateAccess(hasResourceUpdateAccess)
             }
 
             setList({})
@@ -493,12 +558,21 @@ export function Calendar({
                     },
                 ],
             }).then(() => {
-                setIsInitialized(true)
+                setMainCollectionLoaded(true)
             })
         }
         initialize()
     }, [])
 
+    useEffect(() => {
+        if (!mainCollectionLoaded || !additionalConfigLoaded) return
+        if (list === undefined) return
+        const expectedAdditional = Object.keys(additionalConfig)
+        // eslint-disable-next-line security/detect-object-injection
+        if (expectedAdditional.some((collectionName) => additionalLists[collectionName] === undefined)) return
+        setIsInitialized(true)
+    }, [mainCollectionLoaded, additionalConfigLoaded, list, additionalLists, additionalConfig])
+
     useEffect(() => {
         let unscheduledListener: (() => void) | undefined
         if (!permissions?.Role) throw new Error("PERMISSION_DENIED")
@@ -550,6 +624,85 @@ export function Calendar({
         }
     }, [calendarConfig, filters])
 
+    useEffect(() => {
+        if (!calendarConfig || !permissions?.Role) return
+
+        if (relationList || !calendarConfig.additionalCollections?.length) {
+            setAdditionalConfigLoaded(true)
+            return
+        }
+
+        let cancelled = false
+        const listeners: (() => void)[] = []
+
+        const subscribeToAdditional = async () => {
+            const collectionsConfig: Record<string, { config: CalendarConfig; recordTitleField: string }> = {}
+
+            for (const collectionName of calendarConfig.additionalCollections || []) {
+                // eslint-disable-next-line security/detect-object-injection
+                const additionalSchema = schema.collections[collectionName]
+                const isPreloadCacheEnabledAdditional = preloadCacheEnabled(additionalSchema)
+                if (!additionalSchema || !isPreloadCacheEnabledAdditional) continue
+
+                const additionalCustomization = getCollectionConfigModule(collectionName)
+                const additionalConfig = (await getCachedConfigValue(additionalCustomization, [
+                    "collections",
+                    collectionName,
+                    "admin",
+                    "calendar",
+                ])) as CalendarConfig | undefined
+                if (!additionalConfig) continue
+
+                const mergedConfig = mergeCalendarConfig(calendarConfig, additionalConfig)
+                // eslint-disable-next-line security/detect-object-injection
+                collectionsConfig[collectionName] = {
+                    config: mergedConfig,
+                    recordTitleField: additionalSchema.recordTitleField,
+                }
+
+                const rangeConstraints: QueryConstraint[] = [
+                    where(mergedConfig.startField, ">=", Timestamp.fromDate(getMinDate())),
+                    where(mergedConfig.startField, "<=", Timestamp.fromDate(getMaxDate())),
+                ]
+
+                if (additionalSchema.softDelete) {
+                    rangeConstraints.push(where(additionalSchema.softDelete.archivedField, "==", false))
+                }
+
+                const result = await subscribeMany(
+                    [collectionName],
+                    (docs) => {
+                        setAdditionalLists((prev) => ({ ...prev, [collectionName]: docs }))
+                    },
+                    (error) => {
+                        console.error(error)
+                        // eslint-disable-next-line security/detect-object-injection
+                        setAdditionalLists((prev) => ({ ...prev, [collectionName]: prev[collectionName] || [] }))
+                    },
+                    {
+                        constraints: rangeConstraints,
+                    },
+                )
+                if (cancelled) {
+                    result.unsubscribe()
+                    return
+                }
+                listeners.push(result.unsubscribe)
+            }
+
+            if (cancelled) return
+            setAdditionalConfig(collectionsConfig)
+            setAdditionalConfigLoaded(true)
+        }
+
+        subscribeToAdditional()
+
+        return () => {
+            cancelled = true
+            listeners.forEach((unsubscribe) => unsubscribe())
+        }
+    }, [calendarConfig, rangeFilter, isPreloadCacheEnabled, permissions?.Role])
+
     const plugins = useMemo(
         () => [
             interactionPlugin,
@@ -638,17 +791,7 @@ export function Calendar({
 
     const events: EventInput[] = useMemo(() => {
         if (!calendarConfig || !recordTitleField || !permissions || !list) return []
-        const collectionOptimisticUpdates = optimisticUpdates?.get(labels.collection)
-        const updatedList = cloneDeep(list)
-        collectionOptimisticUpdates?.forEach((optimisticRecord) => {
-            const index = updatedList.findIndex((record) => record.id === optimisticRecord.id)
-            if (index !== -1) {
-                // eslint-disable-next-line security/detect-object-injection
-                updatedList[index] = optimisticRecord
-            } else {
-                updatedList.push(optimisticRecord)
-            }
-        })
+        const updatedList = applyOptimisticUpdates(list, optimisticUpdates?.get(labels.collection))
         const mainEvents = updatedList
             .filter(
                 (record) =>
@@ -667,7 +810,7 @@ export function Calendar({
                     start: record[calendarConfig.startField].toDate(),
                     startEditable: !isPendingServer && !isUpdateDisabled && hasStartUpdateAccess,
                     durationEditable: !isPendingServer && !isUpdateDisabled && hasEndUpdateAccess,
-                    resourceEditable: !isPendingServer && !isUpdateDisabled && hasReourceUpdateAccess,
+                    resourceEditable: !isPendingServer && !isUpdateDisabled && hasResourceUpdateAccess,
                 }
                 if (calendarConfig.endField && record[calendarConfig.endField]) {
                     const rawEnd = record[calendarConfig.endField].toDate()
@@ -695,6 +838,10 @@ export function Calendar({
                 if (color) {
                     event.color = color
                 }
+                event.extendedProps = {
+                    collection: labels.collection,
+                    recordId: record.id,
+                }
                 return event
             })
 
@@ -724,11 +871,101 @@ export function Calendar({
                             editable: false,
                             allDay: true,
                             color: "#6b7280",
+                            extendedProps: {
+                                collection: labels.collection,
+                                recordId: record.id,
+                            },
                         }
                         additionalEvents.push(event)
                     })
             })
         }
+
+        Object.entries(additionalConfig).forEach(([collectionName, collectionData]) => {
+            // eslint-disable-next-line security/detect-object-injection
+            const additionalSchema = schema.collections[collectionName]
+            // eslint-disable-next-line security/detect-object-injection
+            const additionalList = additionalLists[collectionName]
+            const isPreloadCacheEnabledAdditional = preloadCacheEnabled(additionalSchema)
+            if (relationList || !additionalSchema || !additionalList || !isPreloadCacheEnabledAdditional) return
+
+            const { config: mergedConfig, recordTitleField: additionalRecordTitleField } = collectionData
+            const updatedAdditionalList = applyOptimisticUpdates(additionalList, optimisticUpdates?.get(collectionName))
+
+            updatedAdditionalList
+                .filter(
+                    (record) =>
+                        record[mergedConfig.startField] &&
+                        (!mergedConfig.filterRecords || mergedConfig.filterRecords(record)),
+                )
+                .forEach((record) => {
+                    const title =
+                        tryFunction(mergedConfig.eventTitle, [record]) ||
+                        // eslint-disable-next-line security/detect-object-injection
+                        record[additionalRecordTitleField] ||
+                        record.id
+
+                    const isPendingServerAdditional = isGlobalLoading.get(record.id)?.server
+                    const isUpdateDisabledAdditional =
+                        connectionStatus === "offline" &&
+                        // eslint-disable-next-line security/detect-object-injection
+                        (additionalOfflineUpdateDisabled?.[collectionName] || serverWriteOnly)
+
+                    const startField = collectionData.config.startField
+                    const startFieldSchema = getField(additionalSchema.fields, startField)
+                    const endField = collectionData.config?.endField
+                    const endFieldSchema = getField(additionalSchema.fields, endField)
+                    const allDayField = collectionData.config?.allDayField
+                    const allDayFieldSchema = getField(additionalSchema.fields, allDayField)
+                    const systemFields = getSystemFieldsSchema()
+
+                    const hasAllDayUpdateAccess =
+                        allDayFieldSchema && !!canUpdateField(additionalSchema, allDayFieldSchema, permissions)
+                    const hasStartUpdateAccessAdditional =
+                        !!(
+                            canUpdateField(additionalSchema, startFieldSchema, permissions) &&
+                            !systemFields.map((field) => field.name).includes(startField)
+                        ) &&
+                        (!allDayField || hasAllDayUpdateAccess)
+                    let hasEndUpdateAccessAdditional = false
+                    if (endField) {
+                        hasEndUpdateAccessAdditional = !!(
+                            canUpdateField(additionalSchema, endFieldSchema, permissions) &&
+                            !systemFields.map((field) => field.name).includes(endField) &&
+                            (!allDayField || hasAllDayUpdateAccess)
+                        )
+                    }
+
+                    const event: EventInput = {
+                        id: `${collectionName}:${record.id}`,
+                        title,
+                        start: record[mergedConfig.startField].toDate(),
+                        startEditable:
+                            !isPendingServerAdditional && !isUpdateDisabledAdditional && hasStartUpdateAccessAdditional,
+                        durationEditable:
+                            !isPendingServerAdditional && !isUpdateDisabledAdditional && hasEndUpdateAccessAdditional,
+                        extendedProps: {
+                            collection: collectionName,
+                            recordId: record.id,
+                        },
+                    }
+                    if (mergedConfig.endField && record[mergedConfig.endField]) {
+                        const rawEnd = record[mergedConfig.endField].toDate()
+                        event.end = isAllDayEvent(record, mergedConfig) ? getExclusiveEnd(rawEnd, timezone) : rawEnd
+                    }
+                    if (mergedConfig.allDayField !== undefined) {
+                        event.allDay = record[mergedConfig.allDayField]
+                    } else if (isAllDayEvent(record, mergedConfig)) {
+                        event.allDay = true
+                    }
+                    const color = tryFunction(mergedConfig.color, [record])
+                    if (color) {
+                        event.color = color
+                    }
+                    additionalEvents.push(event)
+                })
+        })
+
         return mainEvents.concat(additionalEvents)
     }, [
         calendarConfig,
@@ -738,26 +975,59 @@ export function Calendar({
         serverWriteOnly,
         hasStartUpdateAccess,
         hasEndUpdateAccess,
-        hasReourceUpdateAccess,
+        hasResourceUpdateAccess,
         isGlobalLoading,
         timezone,
+        additionalLists,
+        additionalConfig,
+        optimisticUpdates,
+        additionalOfflineUpdateDisabled,
+        connectionStatus,
     ])
 
     const updateEvent = useCallback(
         async (info: EventDropArg | EventResizeDoneArg | EventReceiveArg) => {
             if (!calendarConfig) return
-            const record = list
-                ?.concat(unscheduledRecords)
-                ?.find((record) => record.id === info.event.id) as StokerRecord
 
+            const eventCollectionName = (info.event.extendedProps.collection as string | undefined) || labels.collection
+            const recordId = (info.event.extendedProps.recordId as string | undefined) || info.event.id
+            const isAdditionalCollection = eventCollectionName !== labels.collection
+
+            // eslint-disable-next-line security/detect-object-injection
+            const eventCollectionSchema = isAdditionalCollection ? schema.collections[eventCollectionName] : collection
+            if (!eventCollectionSchema) return
+
+            const eventCalendarConfig = isAdditionalCollection
+                ? // eslint-disable-next-line security/detect-object-injection
+                  additionalConfig[eventCollectionName]?.config
+                : calendarConfig
+            if (!eventCalendarConfig) return
+
+            const eventRecordTitleField = isAdditionalCollection
+                ? // eslint-disable-next-line security/detect-object-injection
+                  additionalConfig[eventCollectionName]?.recordTitleField
+                : recordTitleField
+            const eventRecordTitle = isAdditionalCollection
+                ? // eslint-disable-next-line security/detect-object-injection
+                  additionalTitles?.[eventCollectionName]?.record || eventCollectionSchema.labels.record
+                : recordTitle
+
+            const eventList = isAdditionalCollection
+                ? // eslint-disable-next-line security/detect-object-injection
+                  additionalLists[eventCollectionName]
+                : list?.concat(unscheduledRecords)
+            const record = eventList?.find((record) => record.id === recordId) as StokerRecord | undefined
+            if (!record) return
+
+            const originalRecord = cloneDeep(record)
             const updatedFields: Partial<StokerRecord> = {}
-            if (calendarConfig.startField && info.event.start) {
+            if (eventCalendarConfig.startField && info.event.start) {
                 const startDate = info.event.allDay
                     ? DateTime.fromJSDate(info.event.start).setZone(timezone).startOf("day").toJSDate()
                     : info.event.start
-                updatedFields[calendarConfig.startField] = Timestamp.fromDate(startDate)
+                updatedFields[eventCalendarConfig.startField] = Timestamp.fromDate(startDate)
             }
-            if (calendarConfig.endField && info.event.start) {
+            if (eventCalendarConfig.endField && info.event.start) {
                 let endDate: Date
                 if (info.event.allDay) {
                     if (info.event.end) {
@@ -768,12 +1038,28 @@ export function Calendar({
                 } else {
                     endDate = info.event.end ?? info.event.start
                 }
-                updatedFields[calendarConfig.endField] = Timestamp.fromDate(endDate)
+                updatedFields[eventCalendarConfig.endField] = Timestamp.fromDate(endDate)
+            }
+            if (eventCalendarConfig.allDayField !== undefined) {
+                updatedFields[eventCalendarConfig.allDayField] = info.event.allDay
             }
-            if (calendarConfig.allDayField !== undefined) {
-                updatedFields[calendarConfig.allDayField] = info.event.allDay
+
+            const optimisticUpdate = { ...record, ...updatedFields }
+            setOptimisticUpdate(eventCollectionName, optimisticUpdate)
+
+            const patchAdditionalList = (value: StokerRecord) => {
+                if (!isAdditionalCollection) return
+                setAdditionalLists((prev) => ({
+                    ...prev,
+                    // eslint-disable-next-line security/detect-object-injection
+                    [eventCollectionName]: (prev[eventCollectionName] ?? []).map((additionalRecord) =>
+                        additionalRecord.id === record.id ? value : additionalRecord,
+                    ),
+                }))
             }
-            if (calendarConfig.resourceField && "newResource" in info && info.newResource) {
+            patchAdditionalList(optimisticUpdate)
+
+            if (!isAdditionalCollection && calendarConfig.resourceField && "newResource" in info && info.newResource) {
                 const field = getField(fields, calendarConfig.resourceField)
                 if (!isRelationField(field)) {
                     updatedFields[calendarConfig.resourceField] = info.newResource.title
@@ -796,59 +1082,74 @@ export function Calendar({
                         }
                     }
                 }
+                const resourceOptimisticUpdate = { ...record, ...updatedFields }
+                setOptimisticUpdate(eventCollectionName, resourceOptimisticUpdate)
+                patchAdditionalList(resourceOptimisticUpdate)
             }
 
-            const offlineDisabled = await isOfflineDisabledSync("update", collection, record)
+            const offlineDisabled = await isOfflineDisabledSync("update", eventCollectionSchema, record)
             if (offlineDisabled) {
                 alert(`You are offline and cannot update this record.`)
-                removeOptimisticUpdate(labels.collection, record.id)
+                info.revert()
+                removeOptimisticUpdate(eventCollectionName, record.id)
+                patchAdditionalList(originalRecord)
                 return
             }
 
-            const serverWrite = isServerUpdate(collection, record)
-            const isServerReadOnly = serverReadOnly(collection)
-
-            const optimisticUpdate = {
-                ...record,
-                ...updatedFields,
-            }
-            setOptimisticUpdate(labels.collection, optimisticUpdate)
+            const serverWrite = isServerUpdate(eventCollectionSchema, record)
+            const isServerReadOnly = serverReadOnly(eventCollectionSchema)
 
-            const originalRecord = cloneDeep(record)
             setGlobalLoading("+", record.id, serverWrite, !(serverWrite || isServerReadOnly))
             updateRecord(record.Collection_Path, record.id, updatedFields, { originalRecord })
                 .then(() => {
                     if (serverWrite || isServerReadOnly) {
                         toast({
                             // eslint-disable-next-line security/detect-object-injection
-                            description: `${recordTitle} ${recordTitleField ? record[recordTitleField] : record.id} updated successfully.`,
+                            description: `${eventRecordTitle} ${eventRecordTitleField ? record[eventRecordTitleField] : record.id} updated successfully.`,
                         })
+                        removeOptimisticUpdate(eventCollectionName, record.id)
                     }
-                    removeOptimisticUpdate(labels.collection, record.id)
                 })
                 .catch((error) => {
                     console.error(error)
                     info.revert()
                     toast({
                         // eslint-disable-next-line security/detect-object-injection
-                        description: `${recordTitle} ${recordTitleField ? record[recordTitleField] : record.id} failed to update.`,
+                        description: `${eventRecordTitle} ${eventRecordTitleField ? record[eventRecordTitleField] : record.id} failed to update.`,
                         variant: "destructive",
                     })
-                    removeOptimisticUpdate(labels.collection, record.id)
-                    setOptimisticList()
+                    removeOptimisticUpdate(eventCollectionName, record.id)
+                    patchAdditionalList(originalRecord)
+                    if (!isAdditionalCollection) {
+                        setOptimisticList()
+                    }
                 })
                 .finally(() => {
                     setGlobalLoading("-", record.id, undefined, !(serverWrite || isServerReadOnly))
                 })
             if (!serverWrite && !isServerReadOnly) {
-                removeCacheOptimistic(collection, record)
+                removeCacheOptimistic(eventCollectionSchema, record)
                 toast({
                     // eslint-disable-next-line security/detect-object-injection
-                    description: `${recordTitle} ${recordTitleField ? record[recordTitleField] : record.id} updated.`,
+                    description: `${eventRecordTitle} ${eventRecordTitleField ? record[eventRecordTitleField] : record.id} updated.`,
                 })
             }
         },
-        [calendarConfig, list, unscheduledRecords, recordTitleField, recordTitle, timezone],
+        [
+            calendarConfig,
+            additionalConfig,
+            additionalLists,
+            collection,
+            labels.collection,
+            list,
+            unscheduledRecords,
+            recordTitleField,
+            recordTitle,
+            schema.collections,
+            timezone,
+            fields,
+            setOptimisticList,
+        ],
     )
 
     const createEvent = useCallback(
@@ -988,11 +1289,26 @@ export function Calendar({
                     newRange.to = preloadCacheRange.end
                     if (!isEqual(newRange, preloadRange)) {
                         preloadCollection(labels.collection, undefined, preloadCacheRange)
+                        for (const additionalCollection of calendarConfig?.additionalCollections || []) {
+                            // eslint-disable-next-line security/detect-object-injection
+                            const additionalSchema = schema.collections[additionalCollection]
+                            if (!additionalSchema?.preloadCache?.range || !preloadCacheEnabled(additionalSchema))
+                                continue
+                            const preloadCacheRangeAdditional = cloneDeep(additionalSchema.preloadCache.range)
+                            preloadCacheRangeAdditional.start = preloadCacheRange.start
+                            preloadCacheRangeAdditional.end = preloadCacheRange.end
+                            preloadCollection(additionalCollection, undefined, preloadCacheRangeAdditional)
+                        }
                         setPreloadRange((prev) => {
-                            return {
+                            const next = {
                                 ...prev,
                                 [labels.collection]: newRange,
                             }
+                            for (const additionalCollection of calendarConfig?.additionalCollections || []) {
+                                // eslint-disable-next-line security/detect-object-injection
+                                next[additionalCollection] = newRange
+                            }
+                            return next
                         })
                     }
                 }
@@ -1028,17 +1344,34 @@ export function Calendar({
 
     const isCreateDisabled = connectionStatus === "offline" && (isOfflineCreateDisabled || serverWriteOnly)
 
+    let selectable = canAddRecords && !disableCreate && !isCreateDisabled && !!calendarConfig?.endField
+    for (const creatableCalendarCollection of creatableCalendarCollections) {
+        // eslint-disable-next-line security/detect-object-injection
+        if (additionalConfig?.[creatableCalendarCollection]?.config.endField) {
+            selectable = true
+        }
+    }
+
     const calendarProps: CalendarOptions = {
         timeZone: timezone || "UTC",
         firstDay: 1,
         plugins,
         events,
         resources: Array.from(resources),
-        selectable: canAddRecords && !isCreateDisabled && !!calendarConfig?.endField,
+        selectable,
         droppable: hasStartUpdateAccess,
         eventClick(info: EventClickArg) {
-            const record = list?.find((record) => record.id === info.event.id.split("-")[0]) as StokerRecord
-            goToRecord(collection, record)
+            const eventCollection = info.event.extendedProps.collection as string | undefined
+            const recordId = (info.event.extendedProps.recordId as string | undefined) || info.event.id.split("-")[0]
+            // eslint-disable-next-line security/detect-object-injection
+            const eventCollectionSchema = eventCollection ? schema.collections[eventCollection] : collection
+            const eventList =
+                // eslint-disable-next-line security/detect-object-injection
+                eventCollection && eventCollection !== labels.collection ? additionalLists[eventCollection] : list
+            const record = eventList?.find((record) => record.id === recordId) as StokerRecord
+            if (record && eventCollectionSchema) {
+                goToRecord(eventCollectionSchema, record, undefined, true)
+            }
         },
         eventDrop(info: EventDropArg) {
             updateEvent(info)
@@ -1097,7 +1430,7 @@ export function Calendar({
                         )}
                     >
                         <CardContent className="p-4 h-full">
-                            {currentViewLarge && (
+                            {currentViewLarge && isInitialized && (
                                 <FullCalendar
                                     schedulerLicenseKey={import.meta.env.STOKER_FULLCALENDAR_KEY}
                                     initialDate={currentDateLarge}
@@ -1129,7 +1462,7 @@ export function Calendar({
                     </ScrollArea>
                     <ScrollArea className="sm:hidden min-h-screen print:h-full">
                         <CardContent className="p-4 h-full">
-                            {currentViewSmall && (
+                            {currentViewSmall && isInitialized && (
                                 <FullCalendar
                                     schedulerLicenseKey={import.meta.env.STOKER_FULLCALENDAR_KEY}
                                     initialDate={currentDateSmall}

package/src/Collection.tsx

@@ -58,7 +58,7 @@ import { useOptimistic } from "./providers/OptimisticProvider"
 import { serverReadOnly } from "./utils/serverReadOnly"
 import cloneDeep from "lodash/cloneDeep.js"
 import { Map as StokerMap } from "./Map"
-import { Calendar } from "./Calendar"
+import { Calendar, mergeCalendarConfig } from "./Calendar"
 import { useStokerState } from "./providers/StateProvider"
 import { loadFilters } from "./utils/relationListFiltersState"
 import { Filters } from "./Filters"
@@ -235,6 +235,25 @@ function Collection({
     const [showImages, setShowImages] = useState(false)
     const [showMap, setShowMap] = useState(false)
     const [showCalendar, setShowCalendar] = useState(false)
+    const [additionalTitles, setAdditionalTitles] = useState<
+        | Record<
+              StokerCollection,
+              {
+                  collection: string
+                  record: string
+              }
+          >
+        | undefined
+    >(undefined)
+    const [additionalDisableCreate, setSetAdditionalDisableCreate] = useState<
+        Record<StokerCollection, boolean> | undefined
+    >(undefined)
+    const [additionalOfflineCreateDisabled, setAdditionalOfflineCreateDisabled] = useState<
+        Record<StokerCollection, boolean> | undefined
+    >(undefined)
+    const [additionalOfflineUpdateDisabled, setAdditionalOfflineUpdateDisabled] = useState<
+        Record<StokerCollection, boolean> | undefined
+    >(undefined)
 
     const [search, setSearch] = useState("")
     const isServerFullTextSearchActive = isServerFullTextSearch(
@@ -956,6 +975,54 @@ function Collection({
                 | undefined
             setCalendarConfig(calendarConfig)
 
+            if (calendarConfig?.additionalCollections) {
+                for (const additionalCollection of calendarConfig.additionalCollections) {
+                    // eslint-disable-next-line security/detect-object-injection
+                    const additionalSchema = schema.collections[additionalCollection]
+                    const additionalCustomization = getCollectionConfigModule(additionalCollection)
+                    const additionalTitles = await getCachedConfigValue(
+                        additionalCustomization,
+                        ["collections", additionalCollection, "admin", "titles"],
+                        [relationList ? "relation-list" : undefined, relationCollection, relationParent],
+                        true,
+                    )
+                    setAdditionalTitles((prev) => ({
+                        ...prev,
+                        [additionalCollection]: additionalTitles || additionalSchema.labels,
+                    }))
+                    const additionalDisableCreate = await getCachedConfigValue(
+                        additionalCustomization,
+                        ["collections", additionalCollection, "admin", "hideCreate"],
+                        [relationCollection?.labels.collection],
+                        true,
+                    )
+                    setSetAdditionalDisableCreate((prev) => ({
+                        ...prev,
+                        [additionalCollection]: !!additionalDisableCreate,
+                    }))
+                    const additionalOfflineCreateDisabled = await getCachedConfigValue(additionalCustomization, [
+                        "collections",
+                        additionalCollection,
+                        "custom",
+                        "disableOfflineCreate",
+                    ])
+                    setAdditionalOfflineCreateDisabled((prev) => ({
+                        ...prev,
+                        [additionalCollection]: additionalOfflineCreateDisabled,
+                    }))
+                    const additionalOfflineUpdateDisabled = await getCachedConfigValue(additionalCustomization, [
+                        "collections",
+                        additionalCollection,
+                        "custom",
+                        "disableOfflineUpdate",
+                    ])
+                    setAdditionalOfflineUpdateDisabled((prev) => ({
+                        ...prev,
+                        [additionalCollection]: additionalOfflineUpdateDisabled,
+                    }))
+                }
+            }
+
             const showListConfig =
                 !!permissions.Role && (!listConfig?.roles || listConfig.roles.includes(permissions.Role))
             setShowList(showListConfig)
@@ -1662,36 +1729,123 @@ function Collection({
     }, [rangeSelector])
 
     const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
+    const [isCollectionPickerOpen, setIsCollectionPickerOpen] = useState(false)
+    const [selectedCreateCollection, setSelectedCreateCollection] = useState<StokerCollection | undefined>(undefined)
+    const [createCalendarConfig, setCreateCalendarConfig] = useState<CalendarConfig | undefined>(undefined)
     const [selectedDateRange, setSelectedDateRange] = useState<{ startDate: Date; endDate?: Date } | null>(null)
 
-    const handleCalendarDateSelection = useCallback((dateSelectionData: { startDate: Date; endDate?: Date }) => {
-        setSelectedDateRange(dateSelectionData)
-        setIsCreateDialogOpen(true)
-    }, [])
+    const creatableCalendarCollections = useMemo(() => {
+        const collections = [labels.collection, ...(calendarConfig?.additionalCollections || [])]
+        return collections.filter((collectionName, index) => {
+            // eslint-disable-next-line security/detect-object-injection
+            const collectionSchema = schema.collections[collectionName]
+            const hasEntityRestrictions = getEntityRestrictions(collectionSchema, permissions)
+            // eslint-disable-next-line security/detect-object-injection
+            const isDisableCreate = (index === 0 && disableCreate) || additionalDisableCreate?.[collectionName]
+            const isOfflineCreateDisabled =
+                connectionStatus === "offline" &&
+                (index === 0
+                    ? isCreateDisabled
+                    : // eslint-disable-next-line security/detect-object-injection
+                      additionalOfflineCreateDisabled?.[collectionName] || collectionSchema.access.serverWriteOnly)
+            return (
+                // eslint-disable-next-line security/detect-object-injection
+                permissions.collections?.[collectionName]?.operations.includes("Create") &&
+                !hasEntityRestrictions.some((entityRestriction) => entityRestriction.type === "Individual") &&
+                !isOfflineCreateDisabled &&
+                !isDisableCreate
+            )
+        })
+    }, [
+        labels.collection,
+        calendarConfig?.additionalCollections,
+        permissions,
+        schema,
+        disableCreate,
+        additionalDisableCreate,
+        additionalOfflineCreateDisabled,
+        connectionStatus,
+        isCreateDisabled,
+    ])
+
+    const openCreateDialogForCollection = useCallback(
+        async (collectionName: StokerCollection) => {
+            setSelectedCreateCollection(collectionName)
+            if (collectionName === labels.collection) {
+                setCreateCalendarConfig(calendarConfig)
+            } else if (calendarConfig) {
+                const additionalCustomization = getCollectionConfigModule(collectionName)
+                const additionalConfig = (await getCachedConfigValue(additionalCustomization, [
+                    "collections",
+                    collectionName,
+                    "admin",
+                    "calendar",
+                ])) as CalendarConfig | undefined
+                if (additionalConfig) {
+                    setCreateCalendarConfig(mergeCalendarConfig(calendarConfig, additionalConfig))
+                } else {
+                    setCreateCalendarConfig(calendarConfig)
+                }
+            }
+            setIsCreateDialogOpen(true)
+        },
+        [calendarConfig, labels.collection],
+    )
+
+    const handleCalendarDateSelection = useCallback(
+        (dateSelectionData: { startDate: Date; endDate?: Date }) => {
+            if (creatableCalendarCollections.length === 0) return
+            setSelectedDateRange(dateSelectionData)
+            if (
+                !relationList &&
+                calendarConfig?.additionalCollections?.length &&
+                creatableCalendarCollections.length > 1
+            ) {
+                setIsCollectionPickerOpen(true)
+            } else {
+                openCreateDialogForCollection(creatableCalendarCollections[0] || labels.collection)
+            }
+        },
+        [calendarConfig, creatableCalendarCollections, labels.collection, openCreateDialogForCollection],
+    )
+
+    const createCollectionSchema = useMemo(() => {
+        const collectionName = selectedCreateCollection || labels.collection
+        // eslint-disable-next-line security/detect-object-injection
+        return schema.collections[collectionName] || collection
+    }, [selectedCreateCollection, labels.collection, schema, collection])
+
+    const createRecordTitle = useMemo(() => {
+        return (
+            additionalTitles?.[selectedCreateCollection || labels.collection]?.record ||
+            createCollectionSchema.labels.record
+        )
+    }, [createCollectionSchema, additionalTitles, selectedCreateCollection, labels.collection])
 
     const createPrePopulatedRecord = useCallback(() => {
         const prePopulatedRecord: Partial<StokerRecord> = {}
+        const activeCalendarConfig = createCalendarConfig || calendarConfig
 
-        if (selectedDateRange && calendarConfig) {
-            if (calendarConfig.startField) {
+        if (selectedDateRange && activeCalendarConfig) {
+            if (activeCalendarConfig.startField) {
                 const startDate = keepTimezone(
                     DateTime.fromJSDate(selectedDateRange.startDate).setZone(timezone).toJSDate(),
                     timezone,
                 )
-                prePopulatedRecord[calendarConfig.startField] = Timestamp.fromDate(startDate)
+                prePopulatedRecord[activeCalendarConfig.startField] = Timestamp.fromDate(startDate)
             }
 
-            if (calendarConfig.endField && selectedDateRange.endDate) {
+            if (activeCalendarConfig.endField && selectedDateRange.endDate) {
                 const endDate = keepTimezone(
                     DateTime.fromJSDate(selectedDateRange.endDate).setZone(timezone).toJSDate(),
                     timezone,
                 )
-                prePopulatedRecord[calendarConfig.endField] = Timestamp.fromDate(endDate)
+                prePopulatedRecord[activeCalendarConfig.endField] = Timestamp.fromDate(endDate)
             }
         }
 
         if (relationList && relationParent) {
-            const relationFieldSchema = getField(fields, relationList.field)
+            const relationFieldSchema = getField(createCollectionSchema.fields, relationList.field)
             if (relationFieldSchema && isRelationField(relationFieldSchema)) {
                 const value: Record<string, StokerRecord> = {}
                 value[relationParent.id] = relationParent
@@ -1702,7 +1856,18 @@ function Collection({
 
         if (Object.keys(prePopulatedRecord).length === 0) return
         return prePopulatedRecord as StokerRecord
-    }, [selectedDateRange, calendarConfig])
+    }, [
+        selectedDateRange,
+        createCalendarConfig,
+        createCollectionSchema,
+        calendarConfig,
+        relationList,
+        relationParent,
+        selectedCreateCollection,
+        labels.collection,
+        fields,
+        timezone,
+    ])
 
     const mainContentRef = useRef<HTMLDivElement>(null)
     const addButtonRef = useRef<HTMLButtonElement>(null)
@@ -2529,6 +2694,63 @@ function Collection({
                                                                 </Button>
                                                             )
                                                         })()}
+                                                        {isCollectionPickerOpen &&
+                                                            createPortal(
+                                                                <div
+                                                                    id="collection-picker-modal"
+                                                                    className="fixed inset-0 z-50 flex items-center justify-center animate-in fade-in slide-in-from-top-4 duration-300"
+                                                                    aria-modal="true"
+                                                                    aria-live="polite"
+                                                                    role="dialog"
+                                                                >
+                                                                    <div className="fixed inset-0 bg-black/50" />
+                                                                    <div className="relative bg-background rounded-lg w-full max-w-md overflow-hidden border border-border p-6">
+                                                                        <div className="flex justify-end items-center mb-4">
+                                                                            <Button
+                                                                                type="button"
+                                                                                variant="ghost"
+                                                                                size="icon"
+                                                                                onClick={() => {
+                                                                                    setIsCollectionPickerOpen(false)
+                                                                                    setSelectedDateRange(null)
+                                                                                }}
+                                                                            >
+                                                                                <X className="h-4 w-4" />
+                                                                                <span className="sr-only">Close</span>
+                                                                            </Button>
+                                                                        </div>
+                                                                        <div className="flex flex-col gap-2">
+                                                                            {creatableCalendarCollections.map(
+                                                                                (collectionName) => {
+                                                                                    return (
+                                                                                        <Button
+                                                                                            key={collectionName}
+                                                                                            type="button"
+                                                                                            variant="outline"
+                                                                                            className="justify-start"
+                                                                                            onClick={() => {
+                                                                                                setIsCollectionPickerOpen(
+                                                                                                    false,
+                                                                                                )
+                                                                                                openCreateDialogForCollection(
+                                                                                                    collectionName,
+                                                                                                )
+                                                                                            }}
+                                                                                        >
+                                                                                            Add{" "}
+                                                                                            {/* eslint-disable-next-line security/detect-object-injection */}
+                                                                                            {additionalTitles?.[
+                                                                                                collectionName
+                                                                                            ]?.record || recordTitle}
+                                                                                        </Button>
+                                                                                    )
+                                                                                },
+                                                                            )}
+                                                                        </div>
+                                                                    </div>
+                                                                </div>,
+                                                                document.body,
+                                                            )}
                                                         {isCreateDialogOpen &&
                                                             createPortal(
                                                                 <div
@@ -2550,7 +2772,9 @@ function Collection({
                                                                                         id="dialog-title"
                                                                                         className="font-medium leading-none"
                                                                                     >
-                                                                                        Add {recordTitle}
+                                                                                        Add{" "}
+                                                                                        {createRecordTitle ||
+                                                                                            recordTitle}
                                                                                     </h4>
                                                                                     <Button
                                                                                         type="button"
@@ -2560,12 +2784,18 @@ function Collection({
                                                                                         onClick={() => {
                                                                                             setIsCreateDialogOpen(false)
                                                                                             setSelectedDateRange(null)
+                                                                                            setSelectedCreateCollection(
+                                                                                                undefined,
+                                                                                            )
+                                                                                            setCreateCalendarConfig(
+                                                                                                undefined,
+                                                                                            )
                                                                                             setTimeout(() => {
                                                                                                 addButtonRef.current?.focus()
                                                                                             }, 0)
 
                                                                                             localStorage.removeItem(
-                                                                                                `stoker-draft-${labels.collection}`,
+                                                                                                `stoker-draft-${selectedCreateCollection || labels.collection}`,
                                                                                             )
                                                                                         }}
                                                                                     >
@@ -2576,11 +2806,15 @@ function Collection({
                                                                                     </Button>
                                                                                 </div>
                                                                                 <RecordForm
-                                                                                    collection={collection}
+                                                                                    collection={createCollectionSchema}
                                                                                     operation="create"
-                                                                                    path={[labels.collection]}
+                                                                                    path={[
+                                                                                        selectedCreateCollection ||
+                                                                                            labels.collection,
+                                                                                    ]}
                                                                                     record={createPrePopulatedRecord()}
                                                                                     draft={true}
+                                                                                    fromCalendar={true}
                                                                                     parentCollection={
                                                                                         relationCollection?.labels
                                                                                             .collection
@@ -2589,6 +2823,12 @@ function Collection({
                                                                                     onSuccess={() => {
                                                                                         setIsCreateDialogOpen(false)
                                                                                         setSelectedDateRange(null)
+                                                                                        setSelectedCreateCollection(
+                                                                                            undefined,
+                                                                                        )
+                                                                                        setCreateCalendarConfig(
+                                                                                            undefined,
+                                                                                        )
                                                                                         setTimeout(() => {
                                                                                             addButtonRef.current?.focus()
                                                                                         }, 0)
@@ -2823,6 +3063,10 @@ function Collection({
                                                     unsubscribe={unsubscribe}
                                                     setOptimisticList={setOptimisticList}
                                                     canAddRecords={!!(canAddRecords && !isCreateDisabled)}
+                                                    disableCreate={disableCreate}
+                                                    creatableCalendarCollections={creatableCalendarCollections}
+                                                    additionalOfflineUpdateDisabled={additionalOfflineUpdateDisabled}
+                                                    additionalTitles={additionalTitles}
                                                     onDateSelection={handleCalendarDateSelection}
                                                     backToStartKey={backToStartKey}
                                                     relationList={!!relationList}

package/src/Form.tsx

@@ -238,6 +238,7 @@ interface FormProps {
     onSaveRecord?: () => void
     rowSelection?: StokerRecord[]
     fromRelationList?: string
+    fromCalendar?: boolean
     parentCollection?: string
     parentRecord?: StokerRecord
 }
@@ -2408,6 +2409,7 @@ function RecordForm({
     onSaveRecord,
     rowSelection,
     fromRelationList,
+    fromCalendar,
     parentCollection,
     parentRecord,
 }: FormProps) {
@@ -4480,10 +4482,12 @@ function RecordForm({
                 description: `${recordTitle} ${recordTitleField ? originalRecord?.[recordTitleField] : id} deleted.`,
             })
         }
-        if (!(hidden && !fromRelationList)) {
+        if (!(hidden && !fromRelationList) && !fromCalendar) {
             navigate(fromRelationList ? fromRelationList : `/${labels.collection?.toLowerCase()}`)
+        } else if (fromCalendar) {
+            navigate(-1)
         }
-    }, [formValues, originalRecord, navigate, hidden])
+    }, [formValues, originalRecord, navigate, hidden, fromCalendar])
 
     const handleRestore = useCallback(async () => {
         if (!formValues) return
@@ -4536,11 +4540,13 @@ function RecordForm({
             })
         }
         if (!isServerReadOnly) {
-            if (!(hidden && !fromRelationList)) {
+            if (!(hidden && !fromRelationList) && !fromCalendar) {
                 navigate(fromRelationList ? fromRelationList : `/${labels.collection?.toLowerCase()}`)
+            } else if (fromCalendar) {
+                navigate(-1)
             }
         }
-    }, [formValues, originalRecord, navigate, hidden])
+    }, [formValues, originalRecord, navigate, hidden, fromCalendar])
 
     const revert = useCallback(() => {
         resetPermissions()

package/src/Record.tsx

@@ -61,6 +61,7 @@ export const Record = ({ collection }: { collection: CollectionSchema }) => {
     window.history.replaceState(null, "", location.pathname)
 
     const fromRelationList = useRef(location.state?.relationList)
+    const fromCalendar = useRef(location.state?.fromCalendar)
 
     if (!pathString) {
         throw new Error("Path param is required")
@@ -243,6 +244,7 @@ export const Record = ({ collection }: { collection: CollectionSchema }) => {
                                                     record={record}
                                                     isLoading={isLoading}
                                                     fromRelationList={fromRelationList.current}
+                                                    fromCalendar={fromCalendar.current}
                                                 />
                                             </main>
                                         }
@@ -373,6 +375,7 @@ export const Record = ({ collection }: { collection: CollectionSchema }) => {
                                                     record={record}
                                                     isLoading={isLoading}
                                                     fromRelationList={fromRelationList.current}
+                                                    fromCalendar={fromCalendar.current}
                                                 />
                                             </main>
                                         }

package/src/utils/goToRecord.ts

@@ -9,7 +9,12 @@ export const useGoToRecord = () => {
     const params = useParams()
     const location = useLocation()
 
-    const goToRecord = (collection: CollectionSchema, record: StokerRecord, relationField?: RelationField) => {
+    const goToRecord = (
+        collection: CollectionSchema,
+        record: StokerRecord,
+        relationField?: RelationField,
+        fromCalendar?: boolean,
+    ) => {
         const customization = getCollectionConfigModule(collection.labels.collection)
         if (!customization) return
         let route = "edit"
@@ -25,6 +30,7 @@ export const useGoToRecord = () => {
                         record,
                         relationList: params.id ? location.pathname : undefined,
                         relationField,
+                        fromCalendar,
                     },
                 },
             ),