diff --git a/packages/old-import/src/widgets/definitions/weather.ts b/packages/old-import/src/widgets/definitions/weather.ts index f883eefa4..099e1468b 100644 --- a/packages/old-import/src/widgets/definitions/weather.ts +++ b/packages/old-import/src/widgets/definitions/weather.ts @@ -12,5 +12,15 @@ export type OldmarrWeatherDefinition = CommonOldmarrWidgetDefinition< latitude: number; longitude: number; }; + dateFormat: + | "hide" + | "dddd, MMMM D" + | "dddd, D MMMM" + | "MMM D" + | "D MMM" + | "DD/MM/YYYY" + | "MM/DD/YYYY" + | "DD/MM" + | "MM/DD"; } >; diff --git a/packages/old-import/src/widgets/options.ts b/packages/old-import/src/widgets/options.ts index 2b688aadf..a95c8a5d9 100644 --- a/packages/old-import/src/widgets/options.ts +++ b/packages/old-import/src/widgets/options.ts @@ -72,6 +72,7 @@ const optionMapping: OptionMapping = { isFormatFahrenheit: (oldOptions) => oldOptions.displayInFahrenheit, location: (oldOptions) => oldOptions.location, showCity: (oldOptions) => oldOptions.displayCityName, + dateFormat: (oldOptions) => (oldOptions.dateFormat === "hide" ? undefined : oldOptions.dateFormat), }, iframe: { embedUrl: (oldOptions) => oldOptions.embedUrl, diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json index be10f0e1a..849a8f662 100644 --- a/packages/translation/src/lang/en.json +++ b/packages/translation/src/lang/en.json @@ -1134,6 +1134,10 @@ "forecastDayCount": { "label": "Amount of forecast days", "description": "When the widget is not wide enough, less days are shown" + }, + "dateFormat": { + "label": "Date Format", + "description": "How the date should look like" } }, "kind": { diff --git a/packages/widgets/src/weather/component.tsx b/packages/widgets/src/weather/component.tsx index ed487f38e..9f5da3ade 100644 --- a/packages/widgets/src/weather/component.tsx +++ b/packages/widgets/src/weather/component.tsx @@ -115,6 +115,7 @@ const WeeklyForecast = ({ options, weather }: WeatherProps) => { }; function Forecast({ weather, options }: WeatherProps) { + const dateFormat = options.dateFormat; return ( {weather.daily.slice(0, options.forecastDayCount).map((dayWeather, index) => ( @@ -136,6 +137,7 @@ function Forecast({ weather, options }: WeatherProps) { { interface WeatherDescriptionProps { weatherOnly?: boolean; + dateFormat?: WidgetProps<"weather">["options"]["dateFormat"]; time?: string; weatherCode: number; maxTemp?: string; @@ -42,13 +45,21 @@ interface WeatherDescriptionProps { /** * Description Dropdown for a given set of parameters + * @param dateFormat format of the date that will be displayed on the widget * @param time date that can be formatted by dayjs * @param weatherCode weather code from api * @param maxTemp preformatted string for max temperature * @param minTemp preformatted string for min temperature * @returns Content for a HoverCard dropdown presenting weather information */ -export const WeatherDescription = ({ weatherOnly, time, weatherCode, maxTemp, minTemp }: WeatherDescriptionProps) => { +export const WeatherDescription = ({ + weatherOnly, + dateFormat, + time, + weatherCode, + maxTemp, + minTemp, +}: WeatherDescriptionProps) => { const t = useScopedI18n("widget.weather"); const tCommon = useScopedI18n("common"); @@ -60,7 +71,7 @@ export const WeatherDescription = ({ weatherOnly, time, weatherCode, maxTemp, mi return ( - {dayjs(time).format("dddd MMMM D YYYY")} + {dayjs(time).format(dateFormat)} {t(`kind.${name}`)} {`${tCommon("information.max")}: ${maxTemp}`} {`${tCommon("information.min")}: ${minTemp}`} diff --git a/packages/widgets/src/weather/index.ts b/packages/widgets/src/weather/index.ts index e0db620dc..137bc9b4d 100644 --- a/packages/widgets/src/weather/index.ts +++ b/packages/widgets/src/weather/index.ts @@ -1,4 +1,5 @@ import { IconCloud } from "@tabler/icons-react"; +import dayjs from "dayjs"; import { z } from "@homarr/validation"; @@ -17,6 +18,20 @@ export const { definition, componentLoader } = createWidgetDefinition("weather", longitude: 2.3488, }, }), + dateFormat: factory.select({ + options: [ + { value: "dddd, MMMM D", label: dayjs().format("dddd, MMMM D") }, + { value: "dddd, D MMMM", label: dayjs().format("dddd, D MMMM") }, + { value: "MMM D", label: dayjs().format("MMM D") }, + { value: "D MMM", label: dayjs().format("D MMM") }, + { value: "DD/MM/YYYY", label: dayjs().format("DD/MM/YYYY") }, + { value: "MM/DD/YYYY", label: dayjs().format("MM/DD/YYYY") }, + { value: "DD/MM", label: dayjs().format("DD/MM") }, + { value: "MM/DD", label: dayjs().format("MM/DD") }, + ], + defaultValue: "dddd, MMMM D", + withDescription: true, + }), showCity: factory.switch(), hasForecast: factory.switch(), forecastDayCount: factory.slider({