diff --git a/src/components/Map.vue b/src/components/Map.vue
index 8ecc40044..1d457778a 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -143,7 +143,13 @@
 			</MglCustomControl>
 		</MglMap>
 
-		<Slider v-show="sliderEnabled"
+		<Slider v-show="sliderEnabled && timeFilterMode !== 'calendar'"
+			:start="sliderStartTimestamp"
+			:end="sliderEndTimestamp"
+			:range-min="minDataTimestamp"
+			:range-max="maxDataTimestamp"
+			@range-change="emit('slider-range-changed', $event)" />
+		<DateRangeFilter v-if="sliderEnabled && timeFilterMode === 'calendar'"
 			:start="sliderStartTimestamp"
 			:end="sliderEndTimestamp"
 			:range-min="minDataTimestamp"
@@ -186,6 +192,7 @@ import PlaceContactMarker from './map/PlaceContactMarker.vue'
 import type { HistoryAction } from './map/HistoryControl.vue'
 import HistoryControl from './map/HistoryControl.vue'
 import Slider from './map/Slider.vue'
+import DateRangeFilter from './map/DateRangeFilter.vue'
 import ElevationChart from './map/ElevationChart.vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { searchPois as searchPoisNetwork } from '../network.js'
@@ -233,6 +240,8 @@ const props = withDefaults(defineProps<{
 	devices?: Device[]
 	devicesEnabled?: boolean
 	sliderEnabled?: boolean
+	/** 'slider' or 'calendar' */
+	timeFilterMode?: string
 	sliderStartTimestamp?: number
 	sliderEndTimestamp?: number
 	minDataTimestamp?: number
@@ -265,6 +274,7 @@ const props = withDefaults(defineProps<{
 	devices: () => [],
 	devicesEnabled: false,
 	sliderEnabled: false,
+	timeFilterMode: 'slider',
 	sliderStartTimestamp: 0,
 	sliderEndTimestamp: 0,
 	minDataTimestamp: 0,
diff --git a/src/components/MapsNavigation.vue b/src/components/MapsNavigation.vue
index c0473c459..7fd1e3895 100644
--- a/src/components/MapsNavigation.vue
+++ b/src/components/MapsNavigation.vue
@@ -51,6 +51,15 @@
 							</template>
 						</NcFormBoxButton>
 					</NcFormBox>
+					<NcRadioGroup v-if="optionValues.displaySlider === 'true'"
+						class="maps-navigation__time-filter-mode"
+						:label="t('maps', 'Time filter')"
+						:description="t('maps', 'Filter with a slider, or pick the start and end dates in a calendar')"
+						:model-value="timeFilterMode"
+						@update:model-value="onTimeFilterModeChange">
+						<NcRadioGroupButton value="slider" :label="t('maps', 'Slider')" />
+						<NcRadioGroupButton value="calendar" :label="t('maps', 'Calendar')" />
+					</NcRadioGroup>
 				</NcAppSettingsSection>
 				<NcAppSettingsSection id="maps-settings-projection" :name="t('maps', 'Map projection')">
 					<NcFormBox>
@@ -77,8 +86,10 @@ import {
 	NcFormBoxButton,
 	NcFormBoxSwitch,
 	NcLoadingIcon,
+	NcRadioGroup,
+	NcRadioGroupButton,
 } from '@nextcloud/vue'
-import { reactive, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import IconCog from 'vue-material-design-icons/CogOutline.vue'
 import IconOpenInApp from 'vue-material-design-icons/OpenInApp.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
@@ -97,10 +108,12 @@ const emit = defineEmits<{
 	'toggle-trackme': [enabled: boolean]
 	'register-geo-link': []
 	'toggle-slider': [enabled: boolean]
+	'change-time-filter-mode': [mode: string]
 }>()
 
 const optionValues = reactive(optionsController.optionValues)
 const settingsOpen = ref(false)
+const timeFilterMode = computed(() => optionValues.timeFilterMode === 'calendar' ? 'calendar' : 'slider')
 
 /**
  * @param checked whether the position should be tracked
@@ -119,6 +132,15 @@ function onDisplaySliderChange(checked: boolean): void {
 	optionsController.saveOptionValues({ displaySlider: optionValues.displaySlider })
 	emit('toggle-slider', checked)
 }
+
+/**
+ * @param mode 'slider' or 'calendar'
+ */
+function onTimeFilterModeChange(mode: string): void {
+	optionValues.timeFilterMode = mode
+	optionsController.saveOptionValues({ timeFilterMode: mode })
+	emit('change-time-filter-mode', mode)
+}
 </script>
 
 <style scoped lang="scss">
@@ -128,6 +150,10 @@ function onDisplaySliderChange(checked: boolean): void {
 	padding: calc(2 * var(--default-grid-baseline));
 }
 
+.maps-navigation__time-filter-mode {
+	margin-top: calc(2 * var(--default-grid-baseline));
+}
+
 .maps-navigation__footer {
 	padding: var(--default-grid-baseline);
 	border-top: 1px solid var(--color-border);
diff --git a/src/components/map/DateRangeFilter.vue b/src/components/map/DateRangeFilter.vue
new file mode 100644
index 000000000..b6e35fef8
--- /dev/null
+++ b/src/components/map/DateRangeFilter.vue
@@ -0,0 +1,165 @@
+<template>
+	<div id="dateRangeFilter">
+		<NcDateTimePicker
+			class="date-range-filter-picker"
+			type="date"
+			:model-value="startValue"
+			:min="minDate"
+			:max="startMaxDate"
+			:clearable="false"
+			:append-to-body="true"
+			:placeholder="t('maps', 'From')"
+			:aria-label="t('maps', 'Time filter start date')"
+			@update:model-value="onStartChange" />
+		<span class="date-range-filter-separator">–</span>
+		<NcDateTimePicker
+			class="date-range-filter-picker"
+			type="date"
+			:model-value="endValue"
+			:min="endMinDate"
+			:max="maxDate"
+			:clearable="false"
+			:append-to-body="true"
+			:placeholder="t('maps', 'To')"
+			:aria-label="t('maps', 'Time filter end date')"
+			@update:model-value="onEndChange" />
+		<NcButton
+			:aria-label="t('maps', 'Show all dates')"
+			:title="t('maps', 'Show all dates')"
+			@click="onReset">
+			{{ t('maps', 'Reset') }}
+		</NcButton>
+	</div>
+</template>
+
+<script>
+import { NcButton, NcDateTimePicker } from '@nextcloud/vue'
+import optionsController from '../../optionsController.js'
+
+export default {
+	name: 'DateRangeFilter',
+
+	components: {
+		NcButton,
+		NcDateTimePicker,
+	},
+
+	props: {
+		start: {
+			type: Number,
+			required: true,
+		},
+		end: {
+			type: Number,
+			required: true,
+		},
+		rangeMin: {
+			type: Number,
+			required: true,
+		},
+		rangeMax: {
+			type: Number,
+			required: true,
+		},
+	},
+
+	emits: ['range-change'],
+
+	computed: {
+		// the filter can be wider than the data (e.g. 0 when "everything" is selected), keep display inside the data range
+		displayStart() {
+			return Math.min(Math.max(this.start, this.rangeMin), this.rangeMax)
+		},
+		displayEnd() {
+			return Math.max(Math.min(this.end, this.rangeMax), this.displayStart)
+		},
+		startValue() {
+			return new Date(this.displayStart * 1000)
+		},
+		endValue() {
+			return new Date(this.displayEnd * 1000)
+		},
+		// first selectable day (dates before are grayed out)
+		minDate() {
+			return startOfDay(this.rangeMin)
+		},
+		// last selectable day (dates after are grayed out)
+		maxDate() {
+			return endOfDay(this.rangeMax)
+		},
+		// start can not be after the selected end day
+		startMaxDate() {
+			return endOfDay(this.displayEnd)
+		},
+		// end can not be before the selected start day
+		endMinDate() {
+			return startOfDay(this.displayStart)
+		},
+	},
+
+	methods: {
+		// whole days, in local time: start day 00:00:00, end day 23:59:59
+		onStartChange(date) {
+			if (!date) {
+				return
+			}
+			this.changeRange(Math.floor(startOfDay(date.getTime() / 1000).getTime() / 1000), this.end)
+		},
+		onEndChange(date) {
+			if (!date) {
+				return
+			}
+			this.changeRange(this.start, Math.floor(endOfDay(date.getTime() / 1000).getTime() / 1000))
+		},
+		onReset() {
+			this.changeRange(this.rangeMin, this.rangeMax)
+		},
+		changeRange(start, end) {
+			// remember the selection, a bound at the edge of the data is saved as open ('')
+			// so data added later (e.g. new device points) is still shown after a page reload
+			optionsController.saveOptionValues({
+				dateFilterStart: start <= this.rangeMin ? '' : String(start),
+				dateFilterEnd: end >= this.rangeMax ? '' : String(end),
+			})
+			this.$emit('range-change', { start, end })
+		},
+	},
+}
+
+function startOfDay(timestamp) {
+	const d = new Date(timestamp * 1000)
+	d.setHours(0, 0, 0, 0)
+	return d
+}
+
+function endOfDay(timestamp) {
+	const d = new Date(timestamp * 1000)
+	d.setHours(23, 59, 59, 999)
+	return d
+}
+</script>
+
+<style lang="scss" scoped>
+#dateRangeFilter {
+	position: absolute;
+	left: 50%;
+	bottom: 30px;
+	transform: translateX(-50%);
+	z-index: 10000;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 6px;
+	border-radius: var(--border-radius-large);
+	background-color: var(--color-main-background);
+	box-shadow: 0 0 10px var(--color-box-shadow);
+}
+
+.date-range-filter-picker {
+	width: 160px;
+}
+
+.date-range-filter-separator {
+	color: var(--color-text-maxcontrast);
+}
+</style>
diff --git a/src/views/App.vue b/src/views/App.vue
index ce0661f02..2a45104d5 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -13,6 +13,7 @@
 			:show-settings="!token"
 			@toggle-trackme="onToggleTrackme"
 			@toggle-slider="onToggleSlider"
+			@change-time-filter-mode="timeFilterMode = $event"
 			@register-geo-link="onRegisterGeoLink">
 			<template v-if="!token" #header>
 				<MapSwitcherHeader :my-maps="myMaps"
@@ -151,6 +152,7 @@
 					:devices="displayedDevices"
 					:devices-enabled="devicesEnabled"
 					:slider-enabled="sliderEnabled"
+					:time-filter-mode="timeFilterMode"
 					:slider-start-timestamp="sliderStart"
 					:slider-end-timestamp="sliderEnd"
 					:min-data-timestamp="minDataTimestamp"
@@ -257,6 +259,16 @@ import { placeFileOrFolder } from '../utils/photoPicker.ts'
 import { openFileInSidebar } from '../utils/filesSidebar.ts'
 import { getClient } from '@nextcloud/files/dav'
 
+// the calendar time filter remembers its last selection (the slider does not)
+function getSavedCalendarTimestamp(key, defaultValue) {
+	const optionValues = optionsController.optionValues
+	if (optionValues.displaySlider !== 'true' || optionValues.timeFilterMode !== 'calendar') {
+		return defaultValue
+	}
+	const timestamp = parseInt(optionValues[key])
+	return isNaN(timestamp) ? defaultValue : timestamp
+}
+
 export default {
 	name: 'App',
 
@@ -292,8 +304,9 @@ export default {
 			activeSidebarTab: '',
 			// slider
 			sliderEnabled: optionsController.optionValues.displaySlider === 'true',
-			sliderStart: 0,
-			sliderEnd: moment().unix(),
+			timeFilterMode: optionsController.optionValues.timeFilterMode === 'calendar' ? 'calendar' : 'slider',
+			sliderStart: getSavedCalendarTimestamp('dateFilterStart', 0),
+			sliderEnd: getSavedCalendarTimestamp('dateFilterEnd', moment().unix()),
 			// action history
 			lastActions: [],
 			lastCanceledActions: [],
@@ -373,11 +386,23 @@ export default {
 			) || 0
 		},
 		maxDataTimestamp() {
-			return Math.max(
-				this.maxPhotoTimestamp,
-				this.maxFavoriteTimestamp,
-				this.maxTrackTimestamp,
-			) || moment().unix()
+			// only use data types that actually have dates, empty ones would default to "now"
+			const maxTimestamps = []
+			if (this.photoDates.length > 0) {
+				maxTimestamps.push(this.maxPhotoTimestamp)
+			}
+			if (this.favoritesDates.length > 0) {
+				maxTimestamps.push(this.maxFavoriteTimestamp)
+			}
+			if (this.trackDates.length > 0) {
+				maxTimestamps.push(this.maxTrackTimestamp)
+			}
+			if (this.maxDevicesTimestamp !== null) {
+				maxTimestamps.push(this.maxDevicesTimestamp)
+			}
+			return maxTimestamps.length > 0
+				? Math.max(...maxTimestamps)
+				: moment().unix()
 		},
 		photoDates() {
 			return this.photos.filter(p => { return p.dateTaken !== null }).map(p => p.dateTaken)
@@ -446,6 +471,17 @@ export default {
 				return min
 			}, moment().unix() + 100)
 		},
+		maxDevicesTimestamp() {
+			return this.devices.reduce((max, device) => {
+				if (device.enabled && device.historyEnabled && device.points?.length > 0) {
+					const lastTimestamp = device.points[device.points.length - 1].timestamp
+					if (lastTimestamp) {
+						max = max === null ? lastTimestamp : Math.max(max, lastTimestamp)
+					}
+				}
+				return max
+			}, null)
+		},
 		// displayed data
 		displayedTracks() {
 			return this.sliderEnabled