feat: Calendar View

frontend/src/components/Layouts/AppSidebar.vue

@@ -156,6 +156,7 @@ import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import TaskIcon from '@/components/Icons/TaskIcon.vue'
+import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import NotificationsIcon from '@/components/Icons/NotificationsIcon.vue'
@@ -224,6 +225,11 @@ const links = [
     icon: TaskIcon,
     to: 'Tasks',
   },
+  {
+    label: 'Calendar',
+    icon: CalendarIcon,
+    to: 'Calendar',
+  },
   {
     label: 'Call Logs',
     icon: PhoneIcon,

frontend/src/pages/Calendar.vue

@@ -0,0 +1,120 @@
+<template>
+  <LayoutHeader>
+    <template #left-header>
+      <ViewBreadcrumbs routeName="Calendar" />
+    </template>
+    <template #right-header>
+      <Button variant="solid" :label="__('Create')" @click="createEvent">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </template>
+  </LayoutHeader>
+  <div class="flex h-screen flex-col overflow-hidden">
+    <Calendar
+      v-if="events.data?.length"
+      :config="{
+        defaultMode: 'Week',
+        isEditMode: true,
+        eventIcons: {},
+        allowCustomClickEvents: true,
+        redundantCellHeight: 100,
+        enableShortcuts: false,
+        noBorder: true,
+      }"
+      :events="events.data"
+      @create="(event) => createEvent(event)"
+      @update="(event) => updateEvent(event)"
+      @delete="(eventID) => deleteEvent(eventID)"
+    >
+      <template
+        #header="{
+          currentMonthYear,
+          enabledModes,
+          activeView,
+          decrement,
+          increment,
+          updateActiveView,
+        }"
+      >
+        <div class="my-4 mx-5 flex justify-between">
+          <!-- left side  -->
+          <!-- Year, Month -->
+          <span class="text-lg font-medium text-ink-gray-8">
+            {{ currentMonthYear }}
+          </span>
+          <!-- right side -->
+          <!-- actions buttons for calendar -->
+          <div class="flex gap-x-1">
+            <!-- Increment and Decrement Button-->
+
+            <Button
+              @click="decrement()"
+              variant="ghost"
+              class="h-4 w-4"
+              icon="chevron-left"
+            />
+            <Button
+              @click="increment()"
+              variant="ghost"
+              class="h-4 w-4"
+              icon="chevron-right"
+            />
+
+            <!--  View change button, default is months or can be set via props!  -->
+            <TabButtons
+              :buttons="enabledModes"
+              class="ml-2"
+              :modelValue="activeView"
+              @update:modelValue="updateActiveView($event)"
+            />
+          </div>
+        </div>
+      </template>
+    </Calendar>
+  </div>
+</template>
+<script setup>
+import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import { sessionStore } from '@/stores/session'
+import { Calendar, createListResource, TabButtons } from 'frappe-ui'
+
+const { user } = sessionStore()
+
+const events = createListResource({
+  doctype: 'Event',
+  fields: ['name', 'status', 'subject', 'starts_on', 'ends_on'],
+  filters: { status: 'Open', owner: user },
+  auto: true,
+  transform: (data) => {
+    return data.map((event) => ({
+      id: event.name,
+      title: event.subject,
+      fromDate: event.starts_on,
+      toDate: event.ends_on,
+      color: event.color,
+    }))
+  },
+})
+
+function createEvent(event) {
+  events.insert.submit({
+    subject: event.title,
+    starts_on: event.fromDate,
+    ends_on: event.toDate,
+    color: event.color,
+  })
+}
+function updateEvent(event) {
+  events.setValue.submit({
+    name: event.id,
+    subject: event.title,
+    starts_on: event.fromDate,
+    ends_on: event.toDate,
+    color: event.color,
+  })
+}
+function deleteEvent(eventID) {
+  events.delete.submit(eventID)
+}
+</script>

frontend/src/router.js

@@ -91,6 +91,11 @@ const routes = [
     component: () => import('@/pages/EmailTemplate.vue'),
     props: true,
   },
+  {
+    path: '/calendar',
+    name: 'Calendar',
+    component: () => import('@/pages/Calendar.vue'),
+  },
   {
     path: '/welcome',
     name: 'Welcome',