diff --git a/docs/sources/administration/configuration.md b/docs/sources/administration/configuration.md
index 4a9091c2751..f421d8df4de 100644
--- a/docs/sources/administration/configuration.md
+++ b/docs/sources/administration/configuration.md
@@ -1785,6 +1785,10 @@ Set this to `true` to have date formats automatically derived from your browser
Used as the default time zone for user preferences. Can be either `browser` for the browser local time zone or a time zone name from the IANA Time Zone database, such as `UTC` or `Europe/Amsterdam`.
+### default_week_start
+
+Set the default start of the week, valid values are: `saturday`, `sunday`, `monday` or `browser` to use the browser locale to define the first day of the week. Default is `browser`.
+
## [expressions]
> **Note:** This feature is available in Grafana v7.4 and later versions.
diff --git a/packages/grafana-data/src/datetime/moment_wrapper.ts b/packages/grafana-data/src/datetime/moment_wrapper.ts
index 03910a31128..80af4900f8e 100644
--- a/packages/grafana-data/src/datetime/moment_wrapper.ts
+++ b/packages/grafana-data/src/datetime/moment_wrapper.ts
@@ -120,3 +120,23 @@ export const dateTimeForTimeZone = (
return dateTime(input, formatInput);
};
+
+export const getWeekdayIndex = (day: string) => {
+ return moment.weekdays().findIndex((wd) => wd.toLowerCase() === day.toLowerCase());
+};
+
+export const setWeekStart = (weekStart?: string) => {
+ const suffix = '-weekStart';
+ const language = getLocale().replace(suffix, '');
+ const dow = weekStart ? getWeekdayIndex(weekStart) : -1;
+ if (dow !== -1) {
+ moment.locale(language + suffix, {
+ parentLocale: language,
+ week: {
+ dow,
+ },
+ });
+ } else {
+ setLocale(language);
+ }
+};
diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index 7267d46db99..037a7a04caa 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/components.ts
@@ -219,6 +219,9 @@ export const Components = {
TimeZonePicker: {
container: 'Time zone picker select container',
},
+ WeekStartPicker: {
+ container: 'Choose starting day of the week',
+ },
TraceViewer: {
spanBar: () => '[data-test-id="SpanBar--wrapper"]',
},
diff --git a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx
new file mode 100644
index 00000000000..85742db207e
--- /dev/null
+++ b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import { WeekStartPicker } from '@grafana/ui';
+import { UseState } from '../../utils/storybook/UseState';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+
+export default {
+ title: 'Pickers and Editors/TimePickers/WeekStartPicker',
+ component: WeekStartPicker,
+ decorators: [withCenteredStory],
+};
+
+export const basic = () => {
+ return (
+
+ {(value, updateValue) => {
+ return (
+ {
+ if (!newValue) {
+ return;
+ }
+ action('on selected')(newValue);
+ updateValue({ value: newValue });
+ }}
+ />
+ );
+ }}
+
+ );
+};
diff --git a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx
new file mode 100644
index 00000000000..d48e44e7e5c
--- /dev/null
+++ b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx
@@ -0,0 +1,52 @@
+import React, { useCallback } from 'react';
+import { SelectableValue } from '@grafana/data';
+import { Select } from '../Select/Select';
+import { selectors } from '@grafana/e2e-selectors';
+
+export interface Props {
+ onChange: (weekStart: string) => void;
+ value: string;
+ width?: number;
+ autoFocus?: boolean;
+ onBlur?: () => void;
+ includeInternal?: boolean;
+ disabled?: boolean;
+ inputId?: string;
+}
+
+const weekStarts: Array> = [
+ { value: '', label: 'Default' },
+ { value: 'saturday', label: 'Saturday' },
+ { value: 'sunday', label: 'Sunday' },
+ { value: 'monday', label: 'Monday' },
+];
+
+export const WeekStartPicker: React.FC = (props) => {
+ const { onChange, width, autoFocus = false, onBlur, value, disabled = false, inputId } = props;
+
+ const onChangeWeekStart = useCallback(
+ (selectable: SelectableValue) => {
+ if (selectable.value !== undefined) {
+ onChange(selectable.value);
+ }
+ },
+ [onChange]
+ );
+
+ return (
+