replaced trylater with meal planner

app/components/App.vue

@@ -32,7 +32,7 @@
             <Label col="0" row="0" class="bx" :text="icon[item.icon]" />
             <Label col="2" row="0" :text="item.title" />
           </GridLayout>
-          <StackLayout class="hr m-8"></StackLayout>
+          <!-- <StackLayout class="hr m-8"></StackLayout> -->
           <GridLayout
             rows="48"
             columns="auto, 24, *"
@@ -180,11 +180,11 @@ export default {
           component: "Favorites",
           icon: "heart",
         },
-        {
+        // {
-          title: "Try Later",
+        //   title: "Try Later",
-          component: "Try Later",
+        //   component: "Try Later",
-          icon: "trylater",
+        //   icon: "trylater",
-        },
+        // },
       ],
       bottommenu: [
         {

app/components/MealPlanner.vue

@@ -13,26 +13,87 @@
         <Label class="title orkm" text="Meal Planner" col="1" />
       </GridLayout>
     </ActionBar>
-    <GridLayout rows="*, auto, *, 88" columns="*" class="emptyStateContainer">
+    <AbsoluteLayout>
+      <TabView width="100%" height="100%">
+        <TabViewItem title="Today">
+          <ScrollView>
+            <StackLayout>
+              <Label text="Today" textWrap="true" />
+            </StackLayout>
+          </ScrollView>
+        </TabViewItem>
+        <TabViewItem title="Tomorrow">
+          <ScrollView>
+            <StackLayout>
+              <Label text="Today" textWrap="true" />
+            </StackLayout>
+          </ScrollView>
+        </TabViewItem>
+        <TabViewItem title="In 2 days">
+          <ScrollView>
+            <StackLayout>
+              <Label text="Today" textWrap="true" />
+            </StackLayout>
+          </ScrollView>
+        </TabViewItem>
+        <TabViewItem title="In 3 days">
+          <ScrollView>
+            <StackLayout>
+              <Label text="Today" textWrap="true" />
+            </StackLayout>
+          </ScrollView>
+        </TabViewItem>
+        <TabViewItem title="In 4 days">
+          <ScrollView>
+            <StackLayout>
+              <Label text="Today" textWrap="true" />
+            </StackLayout>
+          </ScrollView>
+        </TabViewItem>
+        <TabViewItem title="In 5 days">
+          <ScrollView>
+            <StackLayout>
+              <Label text="Today" textWrap="true" />
+            </StackLayout>
+          </ScrollView>
+        </TabViewItem>
+        <TabViewItem title="In 6 days">
+          <ScrollView>
+            <StackLayout>
+              <Label text="Today" textWrap="true" />
+            </StackLayout>
+          </ScrollView>
+        </TabViewItem>
+      </TabView>
+      <GridLayout id="btnFabContainer" rows="*, auto" columns="*, auto">
+        <MDFloatingActionButton
+          row="1"
+          col="1"
+          src="res://check"
+          @tap="recipeTried"
+          v-if="filterTrylater"
+        />
+        <transition name="dolly" appear>
+          <MDFloatingActionButton
+            row="1"
+            col="1"
+            src="res://share"
+            @tap="shareHandler"
+            v-if="!filterTrylater && showFab"
+          />
+        </transition>
+      </GridLayout>
+    </AbsoluteLayout>
+    <!-- <GridLayout rows="*, auto, *, 88" columns="*" class="emptyStateContainer">
       <StackLayout row="1" class="emptyState">
         <Label class="title orkm" text="Coming soon!" textWrap="true" />
       </StackLayout>
-    </GridLayout>
+    </GridLayout> -->
-
-    <!-- <RadCalendar
-      :viewMode="viewMode"
-      :transitionMode="transitionMode"
-    ></RadCalendar> -->
   </Page>
 </template>
 
 <script>
-import { ApplicationSettings } from "@nativescript/core"
+import { ApplicationSettings, Color } from "@nativescript/core"
-import {
-  CalendarViewMode,
-  CalendarTransitionMode,
-  CalendarEvent,
-} from "nativescript-ui-calendar"
 import { mapState, mapActions } from "vuex"
 export default {
   props: ["showDrawer", "releaseGlobalBackEvent"],
@@ -40,8 +101,6 @@ export default {
     return {
       viewIsScrolled: false,
       appTheme: "Light",
-      viewMode: CalendarViewMode.Day,
-      transitionMode: CalendarTransitionMode.Slide,
     }
   },
   computed: {
@@ -60,6 +119,8 @@ export default {
         ? (this.viewIsScrolled = true)
         : (this.viewIsScrolled = false)
     },
+
+    // CALENDAR EVENTS
   },
   created() {
     this.appTheme = ApplicationSettings.getString("appTheme", "Light")

app/components/ViewRecipe.vue

@@ -39,16 +39,16 @@
             :text="recipe.isFavorite ? icon.heart : icon.heartOutline"
             @tap="toggleFavorite"
           />
-          <MDButton
+          <!-- <MDButton
             variant="text"
             v-if="!filterTrylater"
             class="bx"
             :text="recipe.tried ? icon.trylaterOutline : icon.trylater"
             @tap="toggleTrylater"
-          />
+          /> -->
           <MDButton
             variant="text"
-            v-else
+            v-if="filterTrylater"
             class="bx"
             :text="icon.share"
             @tap="shareHandler"

app/main.js

@@ -20,9 +20,6 @@ Vue.use(FloatingActionButtonPlugin)
 import ProgressPlugin from "@nativescript-community/ui-material-progress/vue"
 Vue.use(ProgressPlugin)
 
-import CalendarView from "nativescript-ui-calendar/vue"
-Vue.use(CalendarView)
-
 Vue.registerElement(
   "RadSideDrawer",
   () => require("nativescript-ui-sidedrawer").RadSideDrawer

app/store.js

@@ -183,7 +183,7 @@ export default new Vuex.Store({
       export: "\ued07",
       import: "\ued0c",
       outline: "\ueb07",
-      calendar: "\uec55",
+      calendar: "\uec57",
     },
     currentComponent: "EnRecipes",
   },

package-lock.json

@@ -5893,15 +5893,6 @@
       "resolved": "https://registry.npmjs.org/nativescript-toast/-/nativescript-toast-2.0.0.tgz",
       "integrity": "sha512-xqyNfFS894oGfrEVO7CjpioAQLiLNNcd77Euq9XIUTf1U3W0PsIgAJbLP7+kkVGIJxdLtlBkbcQ4wDmf2DCi1w=="
     },
-    "nativescript-ui-calendar": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/nativescript-ui-calendar/-/nativescript-ui-calendar-7.0.2.tgz",
-      "integrity": "sha512-yzSZPLFsboYj73BnVG0IYsiKHpPtmL/35QcXd7hC7kWdfjoaiE1eZgtqIRiTsNJaGAp9MeSrBdvuOCe7hI9rEA==",
-      "requires": {
-        "nativescript-ui-core": "~4.0.0",
-        "ts-node": "^8.10.2"
-      }
-    },
     "nativescript-ui-core": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/nativescript-ui-core/-/nativescript-ui-core-4.0.0.tgz",

package.json

@@ -24,7 +24,6 @@
     "nativescript-imagecropper": "^4.0.1",
     "nativescript-plugin-filepicker": "^1.0.0",
     "nativescript-toast": "^2.0.0",
-    "nativescript-ui-calendar": "^7.0.2",
     "nativescript-ui-listview": "^9.0.4",
     "nativescript-ui-sidedrawer": "^9.0.3",
     "nativescript-vue": "^2.6.1",