diff --git a/localization/de.php b/localization/de.php
index edbd7e86..52e80882 100644
--- a/localization/de.php
+++ b/localization/de.php
@@ -144,6 +144,7 @@ return array(
 	'A best before date is required and must be later than today' => 'Ein Mindesthaltbarkeitsdatum ist erforderlich und muss später als heute sein',
 	'Settings' => 'Einstellungen',
 	'This can only be before now' => 'Dies kann nur vor jetzt sein',
+	'Calendar' => 'Kalender',
 	
 	//Constants
 	'manually' => 'Manuell',
diff --git a/public/viewjs/components/calendarcard.js b/public/viewjs/components/calendarcard.js
new file mode 100644
index 00000000..db393f55
--- /dev/null
+++ b/public/viewjs/components/calendarcard.js
@@ -0,0 +1,40 @@
+$('#calendar').datetimepicker(
+{
+	format: 'L',
+	buttons: {
+		showToday: true,
+		showClose: false
+	},
+	calendarWeeks: true,
+	locale: moment.locale(),
+	icons: {
+		time: 'far fa-clock',
+		date: 'far fa-calendar',
+		up: 'fas fa-arrow-up',
+		down: 'fas fa-arrow-down',
+		previous: 'fas fa-chevron-left',
+		next: 'fas fa-chevron-right',
+		today: 'fas fa-calendar-check',
+		clear: 'far fa-trash-alt',
+		close: 'far fa-times-circle'
+	},
+	keepOpen: true,
+	inline: true,
+	keyBinds: {
+		up: function(widget) { },
+		down: function(widget) { },
+		'control up': function(widget) { },
+		'control down': function(widget) { },
+		left: function(widget) { },
+		right: function(widget) { },
+		pageUp: function(widget) { },
+		pageDown: function(widget) { },
+		enter: function(widget) { },
+		escape: function(widget) { },
+		'control space': function(widget) { },
+		t: function(widget) { },
+		'delete': function(widget) { }
+	}
+});
+
+$('#calendar').datetimepicker('show');
diff --git a/views/components/calendarcard.blade.php b/views/components/calendarcard.blade.php
new file mode 100644
index 00000000..159c5f59
--- /dev/null
+++ b/views/components/calendarcard.blade.php
@@ -0,0 +1,12 @@
+@push('componentScripts')
+	<script src="{{ $U('/viewjs/components/calendarcard.js', true) }}?v={{ $version }}"></script>
+@endpush
+
+<div class="card">
+	<div class="card-header">
+		<i class="fas fa-calendar"></i> {{ $L('Calendar') }}
+	</div>
+	<div class="card-body">
+		<div id="calendar" data-target-input="nearest"></div>
+	</div>
+</div>
diff --git a/views/shoppinglist.blade.php b/views/shoppinglist.blade.php
index 5a00f741..d53ba95c 100644
--- a/views/shoppinglist.blade.php
+++ b/views/shoppinglist.blade.php
@@ -27,7 +27,7 @@
 </div>
 
 <div class="row">
-	<div class="col">
+	<div class="col-xs-12 col-md-8 pb-3">
 		<table id="shoppinglist-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
@@ -58,5 +58,9 @@
 			</tbody>
 		</table>
 	</div>
+
+	<div class="col-xs-12 col-md-4">
+		@include('components.calendarcard')
+	</div>
 </div>
 @stop