feat: enhance CalendarEventPanel with color selection and improve event handling in Calendar

frontend/src/components/Calendar/CalendarEventPanel.vue

@@ -18,7 +18,16 @@
         >
           <Button variant="ghost" icon="more-horizontal" />
         </Dropdown>
-        <Button icon="x" variant="ghost" @click="show = false" />
+        <Button
+          icon="x"
+          variant="ghost"
+          @click="
+            () => {
+              show = false
+              activeEvent = ''
+            }
+          "
+        />
       </div>
     </div>
     <div class="text-base">
@@ -31,9 +40,35 @@
             :placeholder="__('Event title')"
           >
             <template #prefix>
-              <div
-                class="ml-0.5 bg-surface-blue-3 size-2 rounded-full cursor-pointer"
-              />
+              <Dropdown
+                class="ml-1"
+                :options="
+                  Object.keys(colorMap).map((color) => ({
+                    label:
+                      colorMap[color].name.charAt(0).toUpperCase() +
+                      colorMap[color].name.slice(1),
+                    value: color,
+                    icon: h('div', {
+                      class: '!size-2 rounded-full',
+                      style: {
+                        backgroundColor: colorMap[color].border,
+                      },
+                    }),
+                    onClick: () => {
+                      _event.color = color
+                    },
+                  }))
+                "
+              >
+                <div
+                  class="ml-0.5 size-2 rounded-full cursor-pointer"
+                  :style="{
+                    backgroundColor: _event.color
+                      ? colorMap[_event.color]?.border || '#30A66D'
+                      : '#30A66D',
+                  }"
+                />
+              </Dropdown>
             </template>
           </TextInput>
         </div>
@@ -135,8 +170,10 @@ import {
   ErrorMessage,
   Dropdown,
   dayjs,
+  CalendarColorMap as colorMap,
+  CalendarActiveEvent as activeEvent,
 } from 'frappe-ui'
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick, h } from 'vue'
 
 const props = defineProps({
   event: {

frontend/src/pages/Calendar.vue

@@ -97,7 +97,13 @@ import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import { sessionStore } from '@/stores/session'
 import { globalStore } from '@/stores/global'
-import { Calendar, createListResource, TabButtons, dayjs } from 'frappe-ui'
+import {
+  Calendar,
+  createListResource,
+  TabButtons,
+  dayjs,
+  CalendarActiveEvent as activeEvent,
+} from 'frappe-ui'
 import { ref } from 'vue'
 
 const { user } = sessionStore()
@@ -175,6 +181,7 @@ function createEvent(_event) {
       onSuccess: (e) => {
         _event.id = e.name
         event.value = _event
+        activeEvent.value = e.name
       },
     },
   )
@@ -213,6 +220,7 @@ function deleteEvent(eventID) {
         onClick: (close) => {
           events.delete.submit(eventID)
           showEventPanel.value = false
+          activeEvent.value = ''
           close()
         },
       },
@@ -228,6 +236,8 @@ function showDetails(e) {}
 function editDetails(e) {
   showEventPanel.value = true
   event.value = { ...e.calendarEvent }
+
+  activeEvent.value = e.calendarEvent.id
 }
 
 function showEventPanelArea(e) {