Merge pull request #3 from vicdotexe/defaultEventProperties

feat: default event properties

Author: vicdotexe

dev/App.vue

@@ -10,6 +10,7 @@
         @event-created="onEventCreation"
         @event-clicked="(e) => console.log(e)"
         :concurrency-mode="'stack'"
+        :default-event-properties="{ color: 'grey' }"
       >
         <template #calendarEvent="{ event }">
           <div
@@ -21,6 +22,7 @@
             }"
           >
             <div>
+              {{ event.color }}
               {{ format(event.startDate, "HH:mm") }} -
               {{ format(event.endDate, "HH:mm") }}
             </div>
@@ -145,7 +147,6 @@ function onEventCreation(event: CalendarEvent) {
 
 <style scoped lang="scss">
 .material-card {
-  background-color: white;
   border-radius: 4px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1);
   padding: 0.5rem;

src/components/EventCalendar.vue

@@ -29,6 +29,7 @@
       :scrollToHour="scrollToHour"
       :concurrency-mode="concurrencyMode"
       :hours-past-midnight="hoursPastMidnight"
+      :default-event-properties="defaultEventProperties"
       @event-created="emit('event-created', $event)"
       @event-clicked="emit('event-clicked', $event)"
       @event-updated="emit('event-updated', $event)"
@@ -76,6 +77,7 @@ withDefaults(
     scrollToHour?: number;
     concurrencyMode?: "stack" | "split";
     hoursPastMidnight?: number;
+    defaultEventProperties?: Partial<CalendarEvent>;
   }>(),
   {
     hideWeekends: false,

src/components/Week.vue

@@ -206,6 +206,7 @@ const props = defineProps<{
   scrollToHour: number;
   concurrencyMode: "stack" | "split";
   hoursPastMidnight: number;
+  defaultEventProperties?: Partial<$CalendarEvent>;
 }>();
 
 let startY = 0;
@@ -400,7 +401,9 @@ function createEvent() {
   }
 
   let event: $CalendarEvent = reactive({
-    id: guid(),
+    id: props.defaultEventProperties?.id ?? guid(),
+    description: props.defaultEventProperties?.description,
+    color: props.defaultEventProperties?.color ?? "#2196f3",
     startDate: start,
     endDate: addMinutes(start, props.intervalMinutes),
     nOfPreviousConcurrentEvents: 0,