added basic calendar

components/Events/Calendar.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="font-josan">
+    <div class="pb-6">
+      <span class="text-3xl">{{ viewDate.format('MMMM YYYY') }}</span>
+    </div>
+    <div class="flex space-x-3">
+
+        <button class="btn-primary"
+                @click="reset()">Today</button>
+        <button class="btn"
+                @click="shift(-1, props.display)">Previous</button>
+        <button class="btn"
+                @click="shift(1, props.display)">Next</button>
+    </div>
+    <div class="grid grid-cols-7 gap-1">
+        <div v-for="d in weekDays"
+            class="text-center -rotate-12 py-8">
+            <div>{{ d }}</div>
+        </div>
+    </div>
+    <div class="grid grid-cols-7">
+        <div v-for="p in daystoPrepend"></div>
+        <div class="border border-slate-200 flex flex-col h-36"
+            v-for="d in units">
+            <EventsCalendarEvent 
+              :date="d"
+              :dayData="getDayData(d)"/>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+// https://dev.to/mmusket/calendar-view-with-vue3-and-tailwind-3mei
+import { ISODate } from '$/common/types/Notebook';
+import { computed, ref } from 'vue';
+
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday'
+dayjs.extend(isToday);
+
+type Props = {
+  modelValue?: any
+  startDate?: ISODate
+  display?: 'month' | 'year' | 'week' | 'day'
+}
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => null,
+  display: () => 'month',
+  startDate: () => '2022-12-05'
+});
+
+const emits = defineEmits(['update:modelValue']);
+
+const viewDate = ref(dayjs(props.startDate));
+
+const daystoPrepend = computed(() => {
+  if (props.display=='month') {
+    const startOfMonth = viewDate.value.startOf("month");
+    const startOfFirstWeek = startOfMonth.startOf("week");
+    const daysToFirstDay = startOfMonth.diff(startOfFirstWeek, "day");
+    return Array.from(new Array(daysToFirstDay).keys());
+  } else {
+    return 0
+  }
+})
+
+const units = computed(() => {
+  let ranges = [];
+  let startOfRange = viewDate.value.startOf(props.display).add(-1,'day');
+  let endOfRange = viewDate.value.endOf(props.display).add(-1,'day');
+
+  let currentDate = startOfRange;
+
+  while (currentDate.isBefore(endOfRange) || currentDate.isSame(endOfRange)) {
+      currentDate = currentDate.add(1, 'day');
+      ranges.push(currentDate);
+  }
+  return ranges;
+})
+
+const shift = function (amount: number, display: 'month' | 'year' | 'week' | 'day') {
+  viewDate.value = viewDate.value.add(amount, display);
+}
+const reset = function () {
+  viewDate.value = dayjs();
+}
+
+
+const weekDays = [
+  'Sunday',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+]
+
+const eventsDateArray = computed(() => {
+  if (props.modelValue) {
+    const result = props.modelValue.map(a => a.next_occurrence_date ? dayjs(a.next_occurrence_date.iso) : null);
+    return result;
+  }
+})
+
+function getIndex(date: ISODate) {
+  return eventsDateArray.value.indexOf(date)
+}
+
+function getDayData(day: ISODate) {
+  let dataStore = <any>[]
+  props.modelValue.forEach(function (eventObj: any) {
+    if (eventObj.next_occurrence_date) {
+      if (day.isSame(eventObj.next_occurrence_date.iso, 'day')) {
+        dataStore.push(eventObj)
+      }
+    }
+  });
+  return dataStore
+}
+</script>

components/Events/CalendarEvent.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="flex flex-col h-full overflow-hidden">
+    <!-- if the day being looped over is today -->
+    <div 
+      :class="[date.isToday() ? 'bg-orange' : '']" 
+      class="text-center">{{ date.format('D') }}
+    </div>
+    <!-- if the day being looped over earlier than today -->
+    <div v-if="date.isBefore(dayjs().subtract(1, 'day'))" class="bg-gray-200 h-full"></div>
+    <!-- if the day being looped over has events -->
+    <div v-if="dayData.length" class="grow">
+      <EventsCalendarEventPrimary :eventObj=dayData[0] />
+    </div>
+     <!-- if the day being looped over has more than one events -->
+    <div v-if="dayData.length>1" class="grow">
+      <EventsCalendarEventSecondary :eventObj=dayData[1] />
+    </div>
+     <!-- if the day being looped over has more than two events -->
+    <div v-if="dayData.length>2">
+      <EventsCalendarEventExtra :eventObj=dayData[0] />
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { ISODate } from '$/common/types/Notebook';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday'
+dayjs.extend(isToday);
+
+type Props = {
+    date?: ISODate
+    dayData?: any
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    date: () => null,
+    dayData: () => null,
+  });
+  </script>

components/Events/CalendarEventExtra.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="">
+    <NuxtLink :to="`/events?day=${date}`">
+      <div class="text-center bg-teal text-xs hover:bg-orange">See All</div>
+    </NuxtLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  eventObj?: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    eventObj: () => {},
+});
+
+const date = props.eventObj.next_occurrence_date.date
+</script>

components/Events/CalendarEventPrimary.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="h-full pb-1 text-xs truncate">
+    <a :href="eventObj.url">
+      <div class="border-l-4 border-teal">
+        <div class="hover:bg-gray-100 grayscale hover:grayscale-0">
+          <img 
+            :src="image"
+            class="object-cover lg:h-6 lg:w-full"/>
+          <div>
+            <div>{{ startTime }} - {{ endTime }}</div>
+            <div>{{ name }}</div>    
+          </div>
+        </div>
+      </div>
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  eventObj?: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    eventObj: () => {},
+});
+
+const name = props.eventObj.name
+const startTime = props.eventObj.next_occurrence_date.time
+const endTime = props.eventObj.next_occurrence_date.time
+const url = props.eventObj.url
+const image = props.eventObj.images.header
+</script>

components/Events/CalendarEventSecondary.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="h-full text-xs truncate ">
+    <a :href="url">
+      <div class="h-full border-l-4 border-transparent hover:bg-gray-100">
+        <div>{{ startTime }} - {{ endTime }}</div>
+        <div>{{ name }}</div>    
+      </div>
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  eventObj?: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    eventObj: () => {},
+});
+
+const name = props.eventObj.name
+const startTime = props.eventObj.next_occurrence_date.time
+const endTime = props.eventObj.next_occurrence_date.time
+const url = props.eventObj.url
+</script>

components/Events/Upcoming.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- {{ futureEvents }} -->
-    <div class="font-josan pb-4 text-xl">Upcoming Events</div>
+    <!-- <div class="font-josan pb-4 text-xl">Upcoming Events</div> -->
     <div
       class="h-full w-full grid grid-cols-1 sm:grid-cols-2 grid-rows-12 gap-2 md:gap-4 grid-flow-row-dense"
     >

components/icons/Calendar.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 9H21M7 3V5M17 3V5M6 12H10V16H6V12ZM6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  </template>
+

pages/events.vue

@@ -2,9 +2,39 @@
   <div>
     <Hero :text="`Events`" />
     <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
-      <div class="min-h-screen p-16">
+      <div class="flex flex-col">
+        <div class="text-[30px] font-josan m-6">
+          <div class="flex flex-grow">
+            <div class="w-full">
+              <div v-if="storyDay">Events on {{ dayFormatted }}</div>
+              <div v-else>Upcoming Events</div>
+            </div>
+            <a href="/eventscal/month">
+              <div class="text-[15px] text-center">
+                <IconsCalendar class="h-10 w-10 mx-8"/>
+                Calendar
+              </div>
+            </a>
+          </div>
+          <!-- {{storyDay}} -->
+          <!-- ------------------------------- -->
+          <!-- {{story}} -->
+        </div>
+        <!-- A date has been supplied but nothing is on that date -->
+        <div
+          v-if="!storyDay && day"
+          class="m-6"
+        >          
+        No events on this date
+        </div>
+        <!-- A date has been supplied and events are on -->
         <StoryblokComponent
-          v-if="story"
+          v-else-if="storyDay"
+          :blok="storyDay.content"
+        ></StoryblokComponent>
+        <!-- No date has been supplied -->
+        <StoryblokComponent
+          v-else-if="story"
           :blok="story.content"
         ></StoryblokComponent>
       </div>
@@ -14,8 +44,20 @@
 </template>
 
 <script lang="ts" setup>
+import { NuxtLink } from "#build/components";
 import { ref } from "vue";
 
+const day = useRoute().query.day
+
+const dayFormatted = computed(() => {
+  const dayDate = new Date(day)
+  const dayStringVal = dayDate.toLocaleString('en-us', {  weekday: 'long' });
+  const dayNumberVal = dayDate.getDate()
+  const monthVal = dayDate.toLocaleString('default', { month: 'long' })
+  const yearVal = dayDate.getFullYear()
+  return dayStringVal+" "+dayNumberVal+" "+monthVal+" "+yearVal
+
+})
 const resolveRelations = ["FeaturedEvents.events"];
 
 const story = await useAsyncStoryblok(
@@ -29,6 +71,26 @@ const story = await useAsyncStoryblok(
   }
 );
 
+const storyDay = computed(() => {
+  if (day) {
+    const filteredEvents = story.value.content.body[0].events.filter(event => {
+      return event.content.date.split(" ")[0] === day
+    });
+    console.log("filteredEvents")
+    console.log(filteredEvents)
+    if (filteredEvents.length) {
+      console.log("DONIG THIS!")
+      let storyCopy = {...story.value}
+      storyCopy.content.body[0].events = filteredEvents
+      return storyCopy
+    } else {
+      return null
+    }
+  } else {
+    return null
+  }  
+})
+
 interface postsInterface {
   date: string;
   text: string;
@@ -52,6 +114,7 @@ const posts: postsInterface[] = [
     text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incid...",
   },
 ];
+
 </script>
 
 <style lang="css" scoped></style>