[subTask, masterTask detail-modal]

app/src/plugins/tm@dashboard/projects/_components/a-project-calendar.vue

@@ -1,17 +1,25 @@
 <template>
   <div id="calendar" class="mb-12">
-    <FullCalendar ref="fullCalendar" :options="calendarOptions" />
+    <FullCalendar ref="fullCalendar" :options="calendarOptions"/>
+    <Z-master-task-modal ref="z-master-task-modal" />
   </div>
 </template>
 <script>
-import FullCalendar from '@fullcalendar/vue3'
-import dayGridPlugin from '@fullcalendar/daygrid'
+import FullCalendar       from '@fullcalendar/vue3'
+import dayGridPlugin      from '@fullcalendar/daygrid'
+import ZMasterTaskModal   from '@/plugins/tm@modal/master-task/z-master-task-modal.vue'
 
 export default {
   components: {
-    FullCalendar
+    FullCalendar,
+    ZMasterTaskModal
   },
   props: ['events', 'month'],
+  methods: {
+    editTask(masterTask, editMode) {
+      this.$refs['z-master-task-modal'].create(masterTask, editMode)
+    }
+  },  
   computed: {
     calendarOptions() {
       return {
@@ -22,7 +30,15 @@ export default {
         height: 650,
         firstDay: 1,
         dayHeaderClassNames: ['w-day-header'],
-        events: this.events
+        events: this.events,
+        eventContent: function(eventInfo) {
+          return { html: eventInfo.event.extendedProps.title_html }
+        },
+        eventClick: (info) => {
+          console.log(info.event._def)
+          // alert(JSON.stringify(info.event._def))
+          this.editTask(info.event._def.publicId, false)
+        }
       }
     }
   },
@@ -60,9 +76,21 @@ export default {
   &:deep(.fc-event-end)
     border-top-right-radius: 30px
     border-bottom-right-radius: 30px
-  &:deep(.fc-event-title)
+  &:deep(.fc-event)
     font-size: 12px
     padding-left: 10px
-  &:deep(.fc-event)
     margin-top: 5px
+    &:after
+      background: unset
+  &:deep(.fc-day-today)
+    background: white
+    a
+      background: #3700B3
+      width: 32px
+      height: 32px
+      color: white
+      text-align: center
+      border-radius: 50%
+      border: 5px solid white
+      line-height: 15px
 </style>