diff --git a/cookbook/templates/meal_plan_new.html b/cookbook/templates/meal_plan_new.html
index 562c124d3..e2523eadb 100644
--- a/cookbook/templates/meal_plan_new.html
+++ b/cookbook/templates/meal_plan_new.html
@@ -27,6 +27,8 @@
         window.IMAGE_PLACEHOLDER = "{% static 'assets/recipe_no_image.svg' %}"
 
         window.CUSTOM_LOCALE = '{{ request.LANGUAGE_CODE }}'
+
+        window.ICAL_URL = '{% url 'api_get_plan_ical' 12345 6789 %}'
     </script>
 
     {% render_bundle 'meal_plan_view' %}
diff --git a/vue/src/apps/MealPlanView/MealPlanView.vue b/vue/src/apps/MealPlanView/MealPlanView.vue
index 7965ff168..160e2a6c0 100644
--- a/vue/src/apps/MealPlanView/MealPlanView.vue
+++ b/vue/src/apps/MealPlanView/MealPlanView.vue
@@ -24,7 +24,7 @@
                     :header-props="headerProps"
                     @input="setShowDate" @delete-dragged="deleteEntry(dragged_item)"
                     @create-new="createEntryClick(new Date())" @set-starting-day-back="setStartingDay(-1)"
-                    @set-starting-day-forward="setStartingDay(1)"/>
+                    @set-starting-day-forward="setStartingDay(1)" :i-cal-url="iCalUrl"/>
               </template>
             </calendar-view>
           </div>
@@ -159,15 +159,15 @@
 
 <script>
 
+import {BootstrapVue} from 'bootstrap-vue'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 import ContextMenu from "@/components/ContextMenu/ContextMenu";
 import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem";
 import "vue-simple-calendar/static/css/default.css"
 import {CalendarView, CalendarMathMixin} from "vue-simple-calendar/src/components/bundle";
 import Vue from "vue";
-import {BootstrapVue} from "bootstrap-vue";
 import {ApiApiFactory} from "@/utils/openapi/api";
-import RecipeCard from "../../components/RecipeCard";
 import MealPlanCard from "../../components/MealPlanCard";
 import moment from 'moment'
 import {ApiMixin, StandardToasts} from "@/utils/utils";
@@ -231,7 +231,8 @@ export default {
       },
       current_period: null,
       entryEditing: {},
-      edit_modal_show: false
+      edit_modal_show: false,
+      ical_url: window.ICAL_URL
     }
   },
   computed: {
@@ -283,6 +284,11 @@ export default {
         return "1.6rem"
       }
     },
+    iCalUrl() {
+      let start = moment(this.current_period.periodStart).format('YYYY-MM-DD')
+      let end = moment(this.current_period.periodEnd).format('YYYY-MM-DD')
+      return this.ical_url.replace(/12345/, start).replace(/6789/, end)
+    }
   },
   mounted() {
     this.$nextTick(function () {
diff --git a/vue/src/components/MealPlanCalenderHeader.vue b/vue/src/components/MealPlanCalenderHeader.vue
index b20c2915b..065f95bb9 100644
--- a/vue/src/components/MealPlanCalenderHeader.vue
+++ b/vue/src/components/MealPlanCalenderHeader.vue
@@ -41,13 +41,11 @@
     <div class="periodLabel">
       <slot name="label">{{ headerProps.periodLabel }}</slot>
     </div>
-    <div class="actionArea d-none d-sm-flex">
-      <button class="btn btn-success plus-button pt-1 pb-1" @click="$emit('create-new')"><i class="fas fa-plus"></i>
-      </button>
-      <span class="delete-area text-danger p-1 mr-2 ml-2" @drop.prevent="onDeleteDrop($event)"
-            @dragenter.prevent="onDeleteDragEnter($event)" @dragleave.prevent="onDeleteDragLeave($event)"
-            @dragover.prevent="onDeleteDragEnter"><i
-          class="fas fa-trash"></i> {{ $t('Drag_Here_To_Delete') }}</span>
+    <div class="actionArea">
+      <button class="btn btn-secondary ical-button pt-1 pb-1 pl-3 pr-3 text-body" @click="exportiCal" v-b-tooltip.hover :title="$t('Export_As_ICal')"><i class="fas fa-calendar"></i></button>
+      <button class="btn btn-success plus-button pt-1 pb-1 pl-3 pr-3 mr-1 ml-1 text-body" @click="$emit('create-new')" v-b-tooltip.hover :title="$t('Create_Meal_Plan_Entry')"><i class="fas fa-plus"></i></button>
+      <span class="delete-area text-danger p-1 mr-2 ml-1 d-none d-sm-flex" @drop.prevent="onDeleteDrop($event)"
+            @dragenter.prevent="onDeleteDragEnter($event)" @dragleave.prevent="onDeleteDragLeave($event)" @dragover.prevent="onDeleteDragEnter"><i class="fas fa-trash"></i> {{ $t('Drag_Here_To_Delete') }}</span>
     </div>
   </div>
 </template>
@@ -63,6 +61,7 @@ export default {
     previousPeriodLabel: {type: String, default: "<"},
     nextPeriodLabel: {type: String, default: ">"},
     nextYearLabel: {type: String, default: ">>"},
+    iCalUrl: {type: String, default: ""},
   },
   methods: {
     onDayForward() {
@@ -71,6 +70,9 @@ export default {
     onDayBack() {
       this.$emit("set-starting-day-back")
     },
+    exportiCal() {
+      window.open(this.iCalUrl)
+    },
     onInput(d) {
       this.$emit("input", d)
     },
@@ -115,17 +117,20 @@ export default {
   font-size: 1.5em;
 }
 
-.plus-button {
-  border-style: dotted;
+.ical-button {
   margin-left: auto;
   order: 1;
   user-select: none
 }
 
+.plus-button {
+  order: 2;
+  user-select: none
+}
+
 .delete-area {
   border-style: dotted;
-  margin-left: auto;
-  order: 2;
+  order: 3;
   user-select: none
 }
 
diff --git a/vue/src/components/MealPlanCard.vue b/vue/src/components/MealPlanCard.vue
index 43c8c8fde..7681725f6 100644
--- a/vue/src/components/MealPlanCard.vue
+++ b/vue/src/components/MealPlanCard.vue
@@ -4,7 +4,7 @@
        @dragstart="onDragItemStart(value, $event)"
        @click="onClickItem(value, $event)"
        :aria-grabbed="value == currentDragItem"
-       :class="value.classes" :title="title"
+       :class="value.classes"
        @contextmenu.prevent="$emit('open-context-menu', $event, value)">
     <div class="card-header p-1 text-center text-primary border-bottom-0" v-if="detailed"
          :style="`background-color: ${background_color}`">
@@ -30,17 +30,20 @@
       <span class="font-light">{{ title }}</span>
     </div>
     <b-img fluid class="card-img-bottom" :src="entry.entry.recipe.image" v-if="hasRecipe && detailed"></b-img>
-    <b-img fluid class="card-img-bottom" :src="image_placeholder" v-if="detailed && ((!hasRecipe && entry.entry.note === '') || (hasRecipe && entry.entry.recipe.image === null))"></b-img>
+    <b-img fluid class="card-img-bottom" :src="image_placeholder"
+           v-if="detailed && ((!hasRecipe && entry.entry.note === '') || (hasRecipe && entry.entry.recipe.image === null))"></b-img>
     <div class="card-body p-1" v-if="detailed && entry.entry.recipe == null"
          :style="`background-color: ${background_color}`">
       <p>{{ entry.entry.note }}</p>
     </div>
     <div class="row p-1 flex-nowrap" v-if="!detailed" :style="`background-color: ${background_color}`">
       <div class="col-2">
-        <span class="font-light text-center" v-if="entry.entry.meal_type.icon != null">{{
+        <span class="font-light text-center" v-if="entry.entry.meal_type.icon != null" v-b-tooltip.hover.left
+              :title=" entry.entry.meal_type.name">{{
             entry.entry.meal_type.icon
           }}</span>
-        <span class="font-light text-center" v-if="entry.entry.meal_type.icon == null">❓</span>
+        <span class="font-light text-center" v-if="entry.entry.meal_type.icon == null" v-b-tooltip.hover.left
+              :title=" entry.entry.meal_type.name">❓</span>
       </div>
       <div class="col-10 d-inline-block text-truncate" :style="`max-height:${item_height}`">
         <span class="font-light">{{ title }}</span>
diff --git a/vue/src/locales/en.json b/vue/src/locales/en.json
index 6e9f568ba..19d7aa371 100644
--- a/vue/src/locales/en.json
+++ b/vue/src/locales/en.json
@@ -189,4 +189,5 @@
   "New_Meal_Type": "New Meal type",
   "Week_Numbers": "Week numbers",
   "Show_Week_Numbers": "Show week numbers ?"
+  "Export_As_ICal": "Export current period to .ical format"
 }