exb-calendar 1.0.0

package/README.md

@@ -0,0 +1,28 @@
+# Calendar Widget
+
+This widget provides a simple interactive calendar to work alongside an ArcGIS Online feature layer. Using the widget is as simple as adding the widget to your application, selecting a data source, and then mapping the fields. This widget is also set up to use message actions, meaning selecting an event on the calendar also selects the feature on any maps, lists, tables, etc. that the data source is also used in. This can also be set to zoom in on a map, apply filtering, and much more. Data filtering also works on the calendar, so if the data source is filtered by another widget, the calendar events will also be filtered.
+
+## Interactive Example
+
+This widget can be used and interacted with on my example application, found [here](https://exb.luciuscreamer.com/calendar). Worth noting, the calendar widget follows Experience Builder styling, to fit the look of your application. If you don't vibe with the dark theme, the widget works just fine in a light themed application.
+![A screenshot of the calendar application](./calendarExample.png)
+
+## Setting up the Calendar
+
+The calendar has a few data formatting requirements if you want all features to work flawlessly OOTB. These will be explained below.
+
+1. Label Field
+   - The label field is what shows up on the event in the calendar (This is a short tagline.)
+   - Type: Text
+2. Start Date
+   - The start date needs to be a Date field, and is required for all events to be populated on the calendar.
+   - Type: Date (Date and time)
+3. End Date
+   - The end date needs to be a date field, but is not required for "all day" events.
+   - Type: Date (Date and time)
+4. All Day Field
+   - The all day field is a simple "y/n" field, to denote whether an event is an "all day" event. The widget only checks if the field is set to "y" to trigger it treating an event as an "all day" event.
+   - Type: Text
+5. Description Field
+   - The description is shown in the tooltip shown when the user hovers over the event. This can be a longer text field, but should likely not be longer than a sentence or two.
+   - Type: text

package/config.json

@@ -0,0 +1,3 @@
+{
+  "icon": "Calendar"
+}

package/icon.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
+
+
+
+

package/manifest.json

@@ -0,0 +1,23 @@
+{
+  "name": "Calendar",
+  "label": "Calendar",
+  "type": "widget",
+  "version": "1.19.0",
+  "exbVersion": "1.19.0",
+  "author": "Lucius Creamer",
+  "description": "This widget uses a calendar from the fullcalendar library, to display ArcGIS Data in interactable calendar format.",
+  "copyright": "",
+  "dependency": [
+    "jimu-arcgis"
+  ],
+  "license": "http://www.apache.org/licenses/LICENSE-2.0",
+  "publishMessages": ["DATA_RECORDS_SELECTION_CHANGE"],
+  "properties": {},
+  "translatedLocales": [
+    "en"
+  ],
+  "defaultSize": {
+    "width": 800,
+    "height": 500
+  }
+}

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "exb-calendar",
+  "version": "1.0.0",
+  "description": "A Calendar widget for Experience Builder Developer Edition",
+  "license": "MIT",
+  "author": "Lucius Creamer",
+  "dependencies": {
+    "@fullcalendar/daygrid": "^6.1.20",
+    "@fullcalendar/interaction": "^6.1.20",
+    "@fullcalendar/react": "^6.1.20",
+    "@fullcalendar/timegrid": "^6.1.20"
+  },
+  "peerDependencies":{
+    "polished": "4.3.1"
+  }
+}

package/src/config.ts

@@ -0,0 +1,32 @@
+import type { ImmutableObject } from 'seamless-immutable'
+import type { UseDataSource } from 'jimu-core'
+
+export interface colorset {
+  id: string;
+  fieldValue: string;
+  color: string;
+}
+
+export interface data {
+  id: string // Unique ID for React keys
+
+  // Individual field keys selected in the settings. Store as a single field name (jimuName).
+  labelField?: string
+  startDateField?: string
+  endDateField?: string
+  allDayField?: string
+  descriptionField?: string
+  colorsetField?: string
+
+  // Color settings
+  defaultEventColor?: string
+  colorsets?: colorset[]
+  // optional datasource selection saved per dataset
+  useDataSources?: UseDataSource[]
+}
+
+export interface Config {
+  dataSets: data[]
+}
+
+export type IMConfig = ImmutableObject<Config>

package/src/runtime/style.css

@@ -0,0 +1,51 @@
+:root{
+    --fc-small-font-size: .85em;
+    --fc-page-bg-color: var(--sys-color-surface-background);
+    --fc-neutral-bg-color: hsla(0, 0%, 82%, .3);
+    --fc-neutral-text-color: var(--sys-color-surface-header-text);
+    --fc-border-color: var(--sys-color-divider-primary);
+    --fc-button-text-color: var(--sys-color-action-text);
+    --fc-button-bg-color: var(--sys-color-action);
+    --fc-button-border-color: var(--sys-color-divider-switch);
+    --fc-button-hover-bg-color: var(--sys-color-action-hover);
+    --fc-button-hover-border-color: var(--sys-color-divider-switch);
+    --fc-button-active-bg-color: var(--sys-color-action-selected);
+    --fc-button-active-border-color: var(--sys-color-divider-switch);
+    --fc-event-bg-color: var(--sys-color-secondary-light);
+    --fc-event-border-color: var(--sys-color-divider-switch);
+    --fc-event-text-color: var(--sys-color-action-selected-text);
+    --fc-event-selected-overlay-color: rgba(0, 0, 0, 0.3);
+    --fc-more-link-bg-color: #d0d0d0;
+    --fc-more-link-text-color: inherit;
+    --fc-event-resizer-thickness: 8px;
+    --fc-event-resizer-dot-total-width: 8px;
+    --fc-event-resizer-dot-border-width: 1px;
+    --fc-non-business-color: hsla(0, 0%, 84%, .3);
+    --fc-bg-event-color: #8fdf82;
+    --fc-bg-event-opacity: 0.3;
+    --fc-highlight-color: var(--sys-color-action-focus);
+    --fc-today-bg-color: rgba(255, 220, 40, .15);
+    --fc-now-indicator-color: red;
+}
+
+
+.fc-button-primary:not(:disabled).fc-button-active{
+  color: var(--sys-color-action-selected-text)
+}
+
+.fc {
+  box-sizing: content-box;
+  height: 100%;
+  width:100%;
+}
+
+.widget-calendar-not-configured {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  background-color: var(--light);
+  color: var(--dark);
+}

package/src/runtime/translations/default.ts

@@ -0,0 +1,4 @@
+export default {
+  _widgetLabel: 'Calendar',
+  notConfigured: 'Please configure the widget in the settings pane.'
+}

package/src/runtime/widget.tsx

@@ -0,0 +1,229 @@
+import {
+	React,
+	type AllWidgetProps,
+	type DataSource,
+	DataSourceComponent,
+	type FeatureLayerQueryParams,
+	DataSourceStatus,
+	MessageManager,
+	DataRecordsSelectionChangeMessage
+} from "jimu-core"
+import type { data, IMConfig } from "../config"
+import "./style.css"
+
+import FullCalendar from "@fullcalendar/react"
+import dayGridPlugin from "@fullcalendar/daygrid"
+import interactionPlugin from "@fullcalendar/interaction"
+import timeGridPlugin from "@fullcalendar/timegrid"
+import { cssVar } from "polished"
+
+export default function Widget(props: AllWidgetProps<IMConfig>) {
+	const { config } = props
+	const [datasources, setDatasources] = React.useState<DataSource[]>([])
+	// Store events keyed by datasource ID to support multiple datasources
+	const [eventsByDsId, setEventsByDsId] = React.useState<{
+		[dsId: string]: any[]
+	}>({})
+
+	// Compute flat events array from all datasources
+	const events = Object.values(eventsByDsId).flat()
+
+	const isConfigured =
+		config.dataSets &&
+		config.dataSets.length > 0 &&
+		config.dataSets[0].useDataSources &&
+		config.dataSets[0].useDataSources.length === 1 &&
+		config.dataSets[0].startDateField &&
+		config.dataSets[0].endDateField
+
+	const fillCalendarEvents = (ds: DataSource, dsConfig: data) => {
+		if (!ds) return
+		try {
+			const dsId = ds.id
+			const records = ds.getRecords() || []
+			const currentEventsForDs = eventsByDsId[dsId] || []
+
+			// Only update if record count changed to avoid unnecessary state updates
+			if (records.length === currentEventsForDs.length) return
+
+			const loadedEvents = records.map((record) => {
+				const title = record.getFieldValue(dsConfig.labelField) as string
+				const rawStart = record.getFieldValue(dsConfig.startDateField)
+				const rawEnd = record.getFieldValue(dsConfig.endDateField)
+				const rawAllDay = record.getFieldValue(dsConfig.allDayField) as string
+				const description = record.getFieldValue(
+					dsConfig.descriptionField
+				) as string
+				const colorFieldValue = record.getFieldValue(
+					dsConfig.colorsetField
+				) as string
+
+				let start: string, end: string, color: string | number
+
+				const toISO = (v: any) => {
+					if (v == null) return undefined
+					const d = v instanceof Date ? v : new Date(v)
+					return isNaN(d.getTime()) ? undefined : d.toISOString()
+				}
+				const toISODateOnly = (v: any) => {
+					if (v == null) return undefined
+					const d = v instanceof Date ? v : new Date(v)
+					d.setHours(d.getHours() - d.getTimezoneOffset() / 60) // Adjust to local date
+					return isNaN(d.getTime()) ? undefined : d.toISOString().split("T")[0]
+				}
+
+				if (rawAllDay === "y") {
+					start = toISODateOnly(rawStart)
+				} else {
+					start = toISO(rawStart)
+					end = toISO(rawEnd)
+				}
+
+				if (dsConfig.colorsets && colorFieldValue) {
+					const matchedColorSet = dsConfig.colorsets.find(
+						(cs) => cs.fieldValue === colorFieldValue
+					)
+					if (matchedColorSet) {
+						color = matchedColorSet.color
+					} else {
+						color =
+							dsConfig.defaultEventColor ||
+							cssVar("--ref-palette-secondary-500")
+					}
+				} else {
+					color =
+						dsConfig.defaultEventColor || cssVar("--ref-palette-secondary-500")
+				}
+
+				return {
+					id: `${dsId}_${record.getId()}`, // Prefix with dsId to ensure unique IDs across datasources
+					originalId: record.getId(),
+					dataSource: ds,
+					title: title ?? "",
+					start: start,
+					end: end ?? undefined,
+					color: color,
+					description: description ?? ""
+				}
+			})
+
+			// Update only this datasource's events, preserving others
+			setEventsByDsId((prev) => ({
+				...prev,
+				[dsId]: loadedEvents
+			}))
+		} catch (e) {
+			console.error("Failed to load events from datasource", e)
+		}
+	}
+
+	const handleEventClick = (clickInfo) => {
+		const eventDs = clickInfo.event.extendedProps.dataSource as DataSource
+		const originalId = clickInfo.event.extendedProps.originalId as string
+		eventDs.selectRecordsByIds([originalId])
+		const record = eventDs.getRecordById(originalId)
+		const message = new DataRecordsSelectionChangeMessage(
+			props.widgetId,
+			[record],
+			[eventDs.id]
+		)
+		MessageManager.getInstance().publishMessage(message)
+	}
+
+	const handleClearSelection = () => {
+		/// Loop through all datasets, if there is a selection, clear it and post a message.
+		datasources.forEach((ds) => {
+			if (ds.getSelectedRecords().length > 0) {
+				ds.clearSelection()
+				const message = new DataRecordsSelectionChangeMessage(
+					props.widgetId,
+					[],
+					[props.useDataSources[0].dataSourceId]
+				)
+				MessageManager.getInstance().publishMessage(message)
+			}
+		})
+	}
+
+	if (!isConfigured) {
+		return (
+			<div className="widget-calendar-not-configured">
+				Please configure the Calendar widget in the settings panel.
+			</div>
+		)
+	}
+
+	return (
+		<>
+			<FullCalendar
+				plugins={[timeGridPlugin, dayGridPlugin, interactionPlugin]}
+				initialView="dayGridMonth"
+				events={events}
+				eventClick={handleEventClick}
+				eventDidMount={(info) => {
+					// Tooltip showing full date/time info
+					const description = info.event.extendedProps.description
+					const start = info.event.start
+					const end = info.event.end
+					let tooltipText = description + "\nStart: " + start.toLocaleString()
+					if (end) {
+						tooltipText += "\nEnd: " + end.toLocaleString()
+					}
+					info.el.setAttribute("title", tooltipText)
+				}}
+				customButtons={{
+					clearSelection: {
+						text: "Clear Selection",
+						click: () => {
+							handleClearSelection()
+						}
+					}
+				}}
+				buttonText={{
+					today: "Today",
+					month: "Month",
+					week: "Week",
+					day: "Day"
+				}}
+				headerToolbar={{
+					left: "prev,next today clearSelection",
+					center: "title",
+					right: "dayGridMonth,timeGridWeek,timeGridDay"
+				}}
+			/>
+			{config.dataSets && config.dataSets.length > 0 && (
+				<>
+					{config.dataSets.map((dsConfig, index) => (
+						<DataSourceComponent
+							key={index}
+							useDataSource={dsConfig.useDataSources[0]}
+							query={
+								{
+									where: "1=1",
+									outFields: ["*"],
+									returnGeometry: true
+								} as FeatureLayerQueryParams
+							}
+							widgetId={props.widgetId}
+						>
+							{(ds: DataSource) => {
+								if (ds && ds.getStatus() === DataSourceStatus.Loaded) {
+									setDatasources((prevDatasources) => {
+										// Avoids adding duplicates
+										if (!prevDatasources.includes(ds)) {
+											return [...prevDatasources, ds]
+										}
+										return prevDatasources
+									})
+									// Data source is loaded — populate calendar events
+									fillCalendarEvents(ds, dsConfig.asMutable({ deep: true }))
+								}
+								return null
+							}}
+						</DataSourceComponent>
+					))}
+				</>
+			)}
+		</>
+	)
+}

package/src/setting/setting.tsx

@@ -0,0 +1,419 @@
+import {
+	React,
+	Immutable,
+	type UseDataSource,
+	DataSourceTypes,
+	utils,
+	type ImmutableObject,
+	css
+} from "jimu-core"
+import type { AllWidgetSettingProps } from "jimu-for-builder"
+import { SettingRow, SettingSection } from "jimu-ui/advanced/setting-components"
+import { Button, TextInput, Tabs, Tab, CollapsablePanel } from "jimu-ui"
+import type { IMConfig, colorset, data } from "../config"
+import {
+	DataSourceSelector,
+	FieldSelector
+} from "jimu-ui/advanced/data-source-selector"
+
+export default function Setting(props: AllWidgetSettingProps<IMConfig>) {
+	const { id, config } = props
+	const [activeTab, setActiveTab] = React.useState<string | undefined>(
+		config?.dataSets?.[0]?.id
+	)
+
+	// helper to get a mutable copy of datasets
+	const getDataSets = () =>
+		config?.dataSets ? config.dataSets.asMutable({ deep: true }) : []
+
+	const updateDataset = (datasetId: string, newData: Partial<any>) => {
+		const arr = getDataSets()
+		const idx = arr.findIndex((d: any) => d.id === datasetId)
+		if (idx === -1) return
+		arr[idx] = { ...arr[idx], ...newData }
+		const newConfig = (config || Immutable({})).set("dataSets", arr)
+		props.onSettingChange({ id, config: newConfig })
+	}
+
+	const addDataset = () => {
+		const newDataset = {
+			id: `ds_${utils.getUUID()}`,
+			labelField: undefined,
+			startDateField: undefined,
+			endDateField: undefined,
+			allDayField: undefined,
+			descriptionField: undefined,
+			colorsetField: undefined,
+			defaultEventColor: "#3788d8",
+			colorsets: [] as colorset[],
+			useDataSources: [] as UseDataSource[]
+		}
+		const arr = getDataSets()
+		arr.push(newDataset)
+		const newConfig = (config || Immutable({})).set("dataSets", arr)
+		props.onSettingChange({ id, config: newConfig })
+	}
+
+	const removeDataset = (datasetId: string) => {
+		const arr = getDataSets().filter((d: any) => d.id !== datasetId)
+		const newConfig = (config || Immutable({})).set("dataSets", arr)
+		props.onSettingChange({ id, config: newConfig })
+	}
+
+	const addValue = (datasetId: string) => {
+		const newValue: colorset = {
+			id: `view_${utils.getUUID()}`,
+			fieldValue: ``,
+			color: `#000000`
+		}
+		const arr = getDataSets()
+		const idx = arr.findIndex((d: any) => d.id === datasetId)
+		if (idx === -1) return
+		const ds = arr[idx]
+		ds.colorsets = ds.colorsets ? [...ds.colorsets, newValue] : [newValue]
+		updateDataset(datasetId, { colorsets: ds.colorsets })
+	}
+
+	const removeValue = (datasetId: string, viewId: string) => {
+		const arr = getDataSets()
+		const idx = arr.findIndex((d: any) => d.id === datasetId)
+		if (idx === -1) return
+		const ds = arr[idx]
+		const newcolorsets = (ds.colorsets || []).filter(
+			(v: any) => v.id !== viewId
+		)
+		updateDataset(datasetId, { colorsets: newcolorsets })
+	}
+
+	const updateValue = (
+		datasetId: string,
+		viewId: string,
+		newViewData: Partial<colorset>
+	) => {
+		const arr = getDataSets()
+		const idx = arr.findIndex((d: any) => d.id === datasetId)
+		if (idx === -1) return
+		const ds = arr[idx]
+		const newcolorsets = (ds.colorsets || []).map((v: any) =>
+			v.id === viewId ? { ...v, ...newViewData } : v
+		)
+		updateDataset(datasetId, { colorsets: newcolorsets })
+	}
+
+	return (
+		<div className="view-layers-toggle-setting">
+			<SettingSection>
+				<SettingRow
+					flow={"no-wrap"}
+					level={1}
+					tag={"div"}
+					label={props.intl.formatMessage({
+						id: "dataSources",
+						defaultMessage: "Add Data Sources"
+					})}
+				>
+					<Button type="secondary" onClick={addDataset}>
+						{props.intl.formatMessage({
+							id: "Add Dataset",
+							defaultMessage: "Add Dataset"
+						})}
+					</Button>
+				</SettingRow>
+			</SettingSection>
+
+			{config?.dataSets && config.dataSets.length > 0 && (
+				<SettingSection title={props.intl.formatMessage({ id: "Datasets" })}>
+					<Tabs
+						value={activeTab}
+						onChange={(id) => {
+							setActiveTab(id)
+						}}
+						type="tabs"
+						keepMount
+						scrollable={true}
+						onClose={(id) => {
+							removeDataset(id)
+						}}
+						children={
+							config.dataSets.map(
+								(ds: ImmutableObject<data>, dsIndex: number) => (
+									<Tab
+										id={ds.id}
+										key={ds.id}
+										title={`Dataset ${dsIndex + 1}`}
+										closeable
+									>
+										<SettingRow label={"Data Source"} level={1} flow={"wrap"}>
+											<DataSourceSelector
+												types={Immutable([DataSourceTypes.FeatureLayer])}
+												mustUseDataSource={true}
+												isMultiple={false}
+												useDataSources={ds.useDataSources}
+												useDataSourcesEnabled={props.useDataSourcesEnabled}
+												onChange={(uds: UseDataSource[]) => {
+													updateDataset(ds.id, { useDataSources: uds })
+												}}
+												widgetId={props.id}
+											/>
+										</SettingRow>
+										{ds.useDataSources?.length === 1 && (
+											<>
+												<SettingRow
+													label={"Select Label Field"}
+													level={2}
+													flow={"wrap"}
+													tag={"label"}
+												>
+													<FieldSelector
+														useDataSources={ds.useDataSources}
+														useDropdown={true}
+														isMultiple={false}
+														isDataSourceDropDownHidden={true}
+														onChange={(fields) => {
+															updateDataset(ds.id, {
+																labelField: fields?.[0]?.jimuName ?? null
+															})
+														}}
+														selectedFields={
+															ds?.labelField
+																? Immutable([ds.labelField])
+																: ds?.useDataSources?.[0]?.fields
+														}
+													/>
+												</SettingRow>
+
+												<SettingRow
+													label={"Start Date Field"}
+													level={1}
+													flow={"wrap"}
+													tag={"label"}
+												>
+													<FieldSelector
+														useDataSources={ds.useDataSources}
+														useDropdown={true}
+														isMultiple={false}
+														isDataSourceDropDownHidden={true}
+														onChange={(fields) => {
+															updateDataset(ds.id, {
+																startDateField: fields?.[0]?.jimuName ?? null
+															})
+														}}
+														selectedFields={
+															ds?.startDateField
+																? Immutable([ds.startDateField])
+																: ds?.useDataSources?.[0]?.fields
+														}
+													/>
+												</SettingRow>
+
+												<SettingRow
+													label={"End Date Field"}
+													level={2}
+													flow={"wrap"}
+													tag={"label"}
+												>
+													<FieldSelector
+														useDataSources={ds.useDataSources}
+														useDropdown={true}
+														isMultiple={false}
+														isDataSourceDropDownHidden={true}
+														onChange={(fields) => {
+															updateDataset(ds.id, {
+																endDateField: fields?.[0]?.jimuName ?? null
+															})
+														}}
+														selectedFields={
+															ds?.endDateField
+																? Immutable([ds.endDateField])
+																: ds?.useDataSources?.[0]?.fields
+														}
+													/>
+												</SettingRow>
+
+												<SettingRow
+													label={"All Day Field"}
+													level={2}
+													flow={"wrap"}
+													tag={"label"}
+												>
+													<FieldSelector
+														useDataSources={ds.useDataSources}
+														useDropdown={true}
+														isMultiple={false}
+														isDataSourceDropDownHidden={true}
+														onChange={(fields) => {
+															updateDataset(ds.id, {
+																allDayField: fields?.[0]?.jimuName ?? null
+															})
+														}}
+														selectedFields={
+															ds?.allDayField
+																? Immutable([ds.allDayField])
+																: ds?.useDataSources?.[0]?.fields
+														}
+													/>
+												</SettingRow>
+
+												<SettingRow
+													label={"Description Field"}
+													level={2}
+													flow={"wrap"}
+													tag={"label"}
+												>
+													<FieldSelector
+														useDataSources={ds.useDataSources}
+														useDropdown={true}
+														isMultiple={false}
+														isDataSourceDropDownHidden={true}
+														onChange={(fields) => {
+															updateDataset(ds.id, {
+																descriptionField: fields?.[0]?.jimuName ?? null
+															})
+														}}
+														selectedFields={
+															ds?.descriptionField
+																? Immutable([ds.descriptionField])
+																: ds?.useDataSources?.[0]?.fields
+														}
+													/>
+												</SettingRow>
+												{ds.labelField &&
+													ds.startDateField &&
+													ds.endDateField && (
+														<>
+															<CollapsablePanel
+																label={"Color Settings"}
+																defaultIsOpen={true}
+															>
+																<SettingRow
+																	label={"Default Event Color"}
+																	level={1}
+																	flow={"no-wrap"}
+																	tag={"label"}
+																>
+																	<input
+																		type="color"
+																		value={ds?.defaultEventColor || "#3788d8"}
+																		onChange={(e) => {
+																			updateDataset(ds.id, {
+																				defaultEventColor: e.target.value
+																			})
+																		}}
+																	/>
+																</SettingRow>
+																<SettingRow
+																	label={"Color Field"}
+																	level={2}
+																	flow={"wrap"}
+																	tag={"label"}
+																>
+																	<FieldSelector
+																		useDataSources={ds.useDataSources}
+																		useDropdown={true}
+																		isMultiple={false}
+																		isDataSourceDropDownHidden={true}
+																		onChange={(fields) => {
+																			updateDataset(ds.id, {
+																				colorsetField:
+																					fields?.[0]?.jimuName ?? null
+																			})
+																		}}
+																		selectedFields={
+																			ds?.colorsetField
+																				? Immutable([ds.colorsetField])
+																				: ds?.useDataSources?.[0]?.fields
+																		}
+																	/>
+																</SettingRow>
+																{ds.colorsetField && (
+																	<SettingRow
+																		label={"Map field values to colors"}
+																		level={2}
+																		flow={"wrap"}
+																		tag={"div"}
+																	>
+																		{(ds.colorsets || []).map(
+																			(value: any, index: number) => (
+																				<div
+																					key={value.id}
+																					className="value-config-container"
+																					style={{ paddingBottom: "8px" }}
+																				>
+																					<SettingRow
+																						label={`${props.intl.formatMessage({
+																							id: "Color"
+																						})} ${index + 1}`}
+																						flow="no-wrap"
+																						level={2}
+																					>
+																						<Button
+																							size="sm"
+																							type="tertiary"
+																							onClick={() => {
+																								removeValue(ds.id, value.id)
+																							}}
+																						>
+																							Remove
+																						</Button>
+																					</SettingRow>
+																					<SettingRow
+																						flow="wrap"
+																						label={props.intl.formatMessage({
+																							id: "Value to Color"
+																						})}
+																						level={3}
+																						css={css`
+																							margin-top: 4px !important;
+																						`}
+																					>
+																						<TextInput
+																							size="sm"
+																							value={value.fieldValue}
+																							onChange={(e) => {
+																								updateValue(ds.id, value.id, {
+																									fieldValue:
+																										e.currentTarget.value
+																								})
+																							}}
+																						/>
+																						<input
+																							type="color"
+																							value={value.color || "#3788d8"}
+																							onChange={(e) => {
+																								updateValue(ds.id, value.id, {
+																									color: e.currentTarget.value
+																								})
+																							}}
+																						/>
+																					</SettingRow>
+																				</div>
+																			)
+																		)}
+																		<Button
+																			type="primary"
+																			className="w-100 mt-2"
+																			onClick={() => {
+																				addValue(ds.id)
+																			}}
+																		>
+																			{props.intl.formatMessage({
+																				id: "Add Color"
+																			})}
+																		</Button>
+																	</SettingRow>
+																)}
+															</CollapsablePanel>
+														</>
+													)}
+											</>
+										)}
+									</Tab>
+								)
+							) as any
+						}
+					/>
+				</SettingSection>
+			)}
+		</div>
+	)
+}

package/src/setting/translations/default.ts

@@ -0,0 +1,4 @@
+export default {
+  dataSources: 'Add Data Sources',
+  layers: 'Layers'
+}

package/tests/calendar-widget.test.tsx

@@ -0,0 +1,100 @@
+import { React, type ImmutableArray } from "jimu-core"
+import _Widget from "../src/runtime/widget"
+import { widgetRender, wrapWidget } from "jimu-for-test"
+import { screen } from "@testing-library/react"
+import "@testing-library/jest-dom"
+
+/*
+// Mock the DataSource so the widget receives a data source during tests
+jest.mock("jimu-core", () => {
+	return {
+		...jest.requireActual("jimu-core"),
+		DataSourceComponent: ({ onDataSourceCreated }: any) => {
+			React.useEffect(() => {
+				const fakeDs = () => {
+					mockFeatureLayer(featureLayer)
+				}
+				onDataSourceCreated && onDataSourceCreated(fakeDs)
+			}, [onDataSourceCreated])
+			return React.createElement("div", null, "mock-datasource")
+		}
+	}
+})
+*/
+
+const render = widgetRender()
+describe("test Calendar Widget", () => {
+	it("handle unconfigured settings panel", () => {
+		const Widget = wrapWidget(_Widget, {
+			config: {}
+		})
+		const { queryByText, rerender } = render(<Widget widgetId="Widget_1" />)
+		expect(
+			queryByText("Please configure the Calendar widget in the settings panel.")
+		).toBeTruthy()
+
+		rerender(
+			<Widget
+				widgetId="Widget_1"
+				config={{}}
+				useDataSources={
+					[
+						{
+							dataSourceId: "mock-datasource",
+							mainDataSourceId: "mock-datasource"
+						}
+					] as unknown as ImmutableArray<any>
+				}
+			/>
+		)
+		expect(
+			queryByText("Please configure the Calendar widget in the settings panel.")
+		).toBeTruthy()
+		expect(queryByText("Month", { selector: "button" })).toBeFalsy()
+
+		rerender(
+			<Widget
+				widgetId="Widget_1"
+				config={[
+					{
+						labelField: "name",
+						startDateField: "start_date",
+						endDateField: "end_date",
+						allDayField: "all_day"
+					}
+				]}
+			/>
+		)
+		expect(
+			queryByText("Please configure the Calendar widget in the settings panel.")
+		).toBeTruthy()
+	})
+
+	it("basic render with configured settings (not verifying events load)", () => {
+		const Widget = wrapWidget(_Widget, {
+			config: [
+				{
+					labelField: "label",
+					startDateField: "start_date",
+					endDateField: "end_date",
+					allDayField: "all_day",
+					useDataSources: [
+						{
+							dataSourceId: "mock-datasource",
+							mainDataSourceId: "mock-datasource"
+						}
+					]
+				}
+			]
+		})
+		render(<Widget widgetId="Widget_1" />)
+		//expect(screen.queryByText("mock-datasource")).toBeTruthy()
+		expect(screen.queryAllByText("Month", { selector: "button" })).toBeTruthy()
+		/*
+		const event = await screen.findByText("Event 1", {
+			selector: ".fc-event-title"
+		})
+		expect(event).toBeTruthy()
+		*/
+	})
+})

package/tests/feature-service.ts

@@ -0,0 +1,188 @@
+import type { MockFeatureLayerData } from "jimu-for-test"
+
+const FEATURE_LAYER_URL = 'https://services3.arcgis.com/SMmkLJuWWI7vDDUq/arcgis/rest/services/Events/FeatureServer/0'
+
+const NOW = new Date(Date.now()).toISOString()
+const LATER = new Date(Date.now() + 60*60*1000).toISOString()
+
+const SERVER_INFO = {
+  currentVersion: 10.71,
+  fullVersion: '10.7.1',
+  soapUrl: 'https://sunshinegis.maps.arcgis.com/arcgis/services',
+  secureSoapUrl: 'https://sunshinegis.maps.arcgis.com/arcgis/services',
+  authInfo: {
+    isTokenBasedSecurity: true,
+    tokenServicesUrl: 'https://sunshinegis.maps.arcgis.com/arcgis/tokens/',
+    shortLivedTokenValidity: 60
+  }
+}
+
+/**
+ * Mocked point feature layer.
+ */
+export const featureLayer: MockFeatureLayerData = {
+  url: FEATURE_LAYER_URL,
+  serverInfo: SERVER_INFO,
+  layerDefinition: {
+    currentVersion: 10.71,
+    id: 0,
+    name: 'Incidents',
+    type: 'Feature Layer',
+    geometryType: 'esriGeometryPoint',
+    objectIdField: 'objectid',
+    globalIdField: '',
+    displayField: 'req_type',
+    typeIdField: 'req_type',
+    subtypeField: '',
+    fields: [
+      {
+        name: 'objectid',
+        type: 'esriFieldTypeOID',
+        alias: 'Object ID',
+        domain: null,
+        editable: false,
+        nullable: false,
+        defaultValue: null,
+        modelName: 'OBJECTID'
+      },
+      {
+        name: 'label',
+        type: 'esriFieldTypeString',
+        alias: 'Label',
+        domain: null,
+        editable: false,
+        nullable: false,
+        defaultValue: null,
+        modelName: 'LABEL'
+      },
+      {
+        name: 'start_date',
+        type: 'esriFieldTypeDate',
+        alias: 'Start Date',
+        domain: null,
+        editable: false,
+        nullable: false,
+        defaultValue: null,
+        modelName: 'START_DATE'
+      },
+      {
+        name: 'end_date',
+        type: 'esriFieldTypeDate',
+        alias: 'End Date',
+        domain: null,
+        editable: false,
+        nullable: false,
+        defaultValue: null,
+        modelName: 'END_DATE'
+      },
+      {
+        name: 'all_day',
+        type: 'esriFieldTypeString',
+        alias: 'All Day',
+        domain: null,
+        editable: false,
+        nullable: true,
+        defaultValue: null,
+        modelName: 'ALL_DAY'
+      },
+      {
+        name: 'description',
+        type: 'esriFieldTypeString',
+        alias: 'Description',
+        domain: null,
+        editable: false,
+        nullable: true,
+        defaultValue: null,
+        modelName: 'DESCRIPTION'
+      },
+      {
+        name: 'color',
+        type: 'esriFieldTypeString',
+        alias: 'Color',
+        domain: null,
+        editable: false,
+        nullable: true,
+        defaultValue: null,
+        modelName: 'COLOR'
+      },
+      {
+        name: 'geometryField',
+        type: 'esriFieldTypeGeometry'
+      }
+    ],
+    advancedQueryCapabilities: {
+      useStandardizedQueries: true,
+      supportsStatistics: true,
+      supportsHavingClause: true,
+      supportsOrderBy: true,
+      supportsDistinct: true,
+      supportsCountDistinct: true,
+      supportsPagination: true,
+      supportsPaginationOnAggregatedQueries: true,
+      supportsTrueCurve: true,
+      supportsReturningQueryExtent: true,
+      supportsQueryWithDistance: true,
+      supportsSqlExpression: true
+    }
+  },
+  queries: [{
+    url: `${FEATURE_LAYER_URL}/query?f=json&where=1=1&outFields=*`,
+    result: {
+      fields: [{
+        name: 'objectid',
+        type: 'esriFieldTypeOID',
+        alias: 'Object ID'
+      },{
+        name: 'label',
+        type: 'esriFieldTypeString',
+        alias: 'Label'
+      },{
+        name: 'start_date',
+        type: 'esriFieldTypeDate',
+        alias: 'Start Date'
+      },{
+        name: 'end_date',
+        type: 'esriFieldTypeDate',
+        alias: 'End Date'
+      },{
+        name: 'all_day',
+        type: 'esriFieldTypeString',
+        alias: 'All Day'
+      },{
+        name: 'description',
+        type: 'esriFieldTypeString',
+        alias: 'Description'
+      },{
+        name: 'color',
+        type: 'esriFieldTypeString',
+        alias: 'Color'
+      }],
+      features: [{
+        attributes: {
+          objectid: 1,
+          label: 'Event 1',
+          start_date: NOW,
+          all_day: 'y',
+          description: 'Description for Event 1',
+          color: 'High'
+        }},{
+        attributes: {
+          objectid: 2,
+          label: 'Event 2',
+          start_date: NOW,
+          end_date: LATER,
+          all_day: 'n',
+          description: 'Description for Event 2',
+          color: 'Medium'
+        }},{attributes: {
+          objectid: 3,
+          label: 'Event 3',
+          start_date: 1622764800000,
+          all_day: 'y',
+          description: 'Description for Event 3',
+          color: 'Low'
+        }}
+      ]
+    }
+  }]
+} as MockFeatureLayerData