Merge pull request #424 from johnjovero98/calendar-394

Polish Calendar UI (month view)

components/app/Calendar.vue

@@ -9,11 +9,9 @@ defineProps<{
 
 const showEventModal = ref(false)
 const selectedEvent = ref<any>({})
-
 const onEventClick = (event: any, e: any) => {
   selectedEvent.value = event
   showEventModal.value = true
-
   e.stopPropagation()
 }
 </script>
@@ -55,7 +53,6 @@ const onEventClick = (event: any, e: any) => {
         />
       </template>
     </vue-cal>
-
     <!-- TODO: Implement the list view
     <div
       id="calendar-list-toggle"
@@ -95,7 +92,6 @@ const onEventClick = (event: any, e: any) => {
         </label>
       </div>
     </div> -->
-
     <AppModal
       id="event-modal"
       v-model="showEventModal"
@@ -153,39 +149,93 @@ const onEventClick = (event: any, e: any) => {
 </template>
 
 <style>
-  .vuecal__event-title {
-    @apply text-xs sm:text-sm font-semibold;
-  }
+.vuecal__event-title {
+  @apply text-xs sm:text-sm font-semibold;
+}
 
-  .vuecal__event-time {
-    @apply text-[0.5rem] sm:text-xs;
-  }
+.vuecal__event-time {
+  @apply text-[0.5rem] sm:text-xs;
+}
 
-  .vuecal__event:hover {
-    @apply cursor-pointer;
-  }
+.vuecal__event:hover {
+  @apply cursor-pointer;
+}
 
-  .vuecal__event {
-    @apply flex flex-col justify-center p-2 bg-primary text-white border border-gray-400/25;
-  }
+.vuecal__event {
+  @apply flex flex-col justify-center p-2 bg-primary text-white border border-gray-400/25;
+}
 
-  .vuecal__event-content {
-    @apply italic text-xs;
-  }
+.vuecal__event-content {
+  @apply italic text-xs;
+}
 
-  .vuecal__title-bar {
-    @apply relative;
-  }
+.vuecal__title-bar {
+  @apply relative;
+}
+
+.vuecal__today-btn {
+  @apply bg-gray-400/20 hover:bg-gray-400/25 py-1 px-3 me-4 rounded-lg dark:text-white text-black font-semibold absolute right-[-10px] top-[-39px];
+}
+
+.vuecal__heading .weekday-label {
+  font-weight: bold;
+}
 
-  .vuecal__today-btn {
-    @apply bg-gray-400/20 hover:bg-gray-400/25 py-1 px-3 me-4 rounded-lg dark:text-white text-black font-semibold absolute right-[-10px] top-[-39px];
-  }
+.vuecal--month-view .vuecal__cell {
+  height: 125px;
+}
 
-  div.vuecal__cell:nth-child(7)::before {
-    @apply rounded-ee-lg;
-  }
+.vuecal--month-view .vuecal__cell-content {
+  justify-content: start;
+  padding: .5rem;
+}
 
-  #event-modal .content-full a{
-    @apply hover:underline text-gray-600 dark:text-gray-400;
-  }
+.vuecal--month-view .vuecal__event {
+  padding: unset;
+  text-align: left;
+  border: unset;
+  color: #265dad;
+  background-color: unset;
+  padding: 0.3rem;
+  border-radius: 0.2rem;
+  gap: 5px;
+  flex-direction: row;
+  align-items: center;
+}
+
+.dark .vuecal--month-view .vuecal__event {
+  color: white;
+}
+
+.vuecal--month-view .vuecal__cell--out-of-scope .vuecal__event {
+  color: #bebaba;
+}
+
+.dark .vuecal--month-view .vuecal__cell--out-of-scope .vuecal__event {
+  color: rgb(55, 55, 55);
+}
+
+.vuecal--month-view .vuecal__event:hover {
+  background-color: #265dad;
+  color: white;
+}
+
+.vuecal--month-view .vuecal__event .vuecal__event-title {
+  font-weight: normal;
+  text-wrap: nowrap;
+  overflow: hidden;
+  font-weight: bold;
+}
+
+.vuecal--month-view .vuecal__event .vuecal__event-time {
+  order: -1;
+}
+
+.vuecal--month-view .vuecal__event .vuecal__event-time span {
+  display: none;
+}
+
+#event-modal .content-full a {
+  @apply hover:underline text-gray-600 dark:text-gray-400;
+}
 </style>

nuxt.config.ts

@@ -1,5 +1,4 @@
 export default defineNuxtConfig({
-
   modules: [
     '@nuxt/icon',
     '@nuxtjs/seo',
@@ -103,6 +102,7 @@ export default defineNuxtConfig({
       baseURL: 'https://ik.imagekit.io/des',
     },
   },
+
   ogImage: {
     compatibility: {
       prerender: {