@eeplatform/nuxt-layer-common 1.2.10 → 1.3.0

package/components/CalendarMonth.vue

@@ -0,0 +1,452 @@
+<template>
+  <div class="calendar month-view" :style="{ height: calendarHeight }">
+    <div v-for="day in weekdays" :key="day" class="header border">
+      <slot name="header" :day="day" :dayIndex="weekdays.indexOf(day)">
+        {{ day }}
+      </slot>
+    </div>
+
+    <div
+      v-for="cell in calendarCells"
+      :key="cell.type + '-' + cell.day"
+      class="day border"
+      :class="{
+        today: cell.type === 'current' && isToday(cell.day),
+        'other-month': cell.type !== 'current',
+      }"
+      @click="onDayClick(cell)"
+    >
+      <slot
+        name="day"
+        :cell="cell"
+        :day="cell.day"
+        :date="cell.date"
+        :type="cell.type"
+        :monthAbbr="cell.monthAbbr"
+        :showMonthAbbr="cell.showMonthAbbr"
+        :isToday="cell.type === 'current' && isToday(cell.day)"
+        :isCurrentMonth="cell.type === 'current'"
+        :isPrevMonth="cell.type === 'prev'"
+        :isNextMonth="cell.type === 'next'"
+        :events="cell.events"
+        :eventPositions="cell.eventPositions"
+        :hasEvents="cell.events.length > 0"
+      >
+        <!-- Default slot content (fallback) -->
+        <div class="day-content">
+          <div class="day-number">{{ cell.day }}</div>
+          <div v-if="cell.showMonthAbbr" class="month-abbr">
+            {{ cell.monthAbbr }}
+          </div>
+          <!-- Default event indicators - Google Calendar style -->
+          <div v-if="cell.events.length > 0" class="event-indicators">
+            <div
+              v-for="(event, index) in cell.events.slice(0, 4)"
+              :key="index"
+              class="default-event-block"
+              :style="{ backgroundColor: event.color || '#2196f3' }"
+              :title="getEventTooltip(event)"
+            >
+              <div class="event-content">
+                <span class="default-event-text">{{ event.title }}</span>
+                <span
+                  v-if="event.startTime || event.endTime"
+                  class="event-time"
+                >
+                  {{ formatEventTime(event) }}
+                </span>
+              </div>
+            </div>
+            <div v-if="cell.events.length > 4" class="more-events">
+              +{{ cell.events.length - 4 }} more
+            </div>
+          </div>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  current: {
+    type: Date,
+    required: true,
+  },
+  events: {
+    type: Array,
+    default: () => [],
+  },
+  calendarHeight: {
+    type: String,
+    default: "calc(100vh - 100px)",
+  },
+});
+
+const emit = defineEmits(["dayClick"]);
+
+const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const monthNames = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
+
+// Days in current month
+const daysInMonth = computed(() => {
+  const year = props.current.getFullYear();
+  const month = props.current.getMonth();
+  return new Date(year, month + 1, 0).getDate();
+});
+
+// First day index of current month (0=Sun)
+const firstDayOfMonth = computed(() => {
+  const year = props.current.getFullYear();
+  const month = props.current.getMonth();
+  return new Date(year, month, 1).getDay();
+});
+
+// Days in previous month
+const prevMonthDays = computed(() => {
+  const year = props.current.getFullYear();
+  const month = props.current.getMonth();
+  return new Date(year, month, 0).getDate();
+});
+
+// Total cells in calendar (6 rows x 7 columns)
+const totalCells = 42;
+
+// Helper functions for event calculations
+const isSameDay = (date1, date2) => {
+  return date1.toDateString() === date2.toDateString();
+};
+
+const isDateInRange = (date, startDate, endDate) => {
+  const checkDate = new Date(date);
+  checkDate.setHours(0, 0, 0, 0);
+  const start = new Date(startDate);
+  start.setHours(0, 0, 0, 0);
+  const end = new Date(endDate);
+  end.setHours(0, 0, 0, 0);
+
+  return checkDate >= start && checkDate <= end;
+};
+
+const getEventsForDate = (date) => {
+  return props.events.filter((event) =>
+    isDateInRange(date, event.startDate, event.endDate)
+  );
+};
+
+const getEventPosition = (event, date) => {
+  const isStart = isSameDay(date, event.startDate);
+  const isEnd = isSameDay(date, event.endDate);
+  const isMiddle =
+    !isStart && !isEnd && isDateInRange(date, event.startDate, event.endDate);
+
+  return {
+    isStart,
+    isEnd,
+    isMiddle,
+    isSingle: isStart && isEnd, // single day event
+  };
+};
+
+// Build calendar with prev, current, next month
+const calendarCells = computed(() => {
+  const cells = [];
+  const year = props.current.getFullYear();
+  const month = props.current.getMonth();
+
+  // Previous month dates (for empty spots at start)
+  const prevMonth = month === 0 ? 11 : month - 1;
+  const prevYear = month === 0 ? year - 1 : year;
+  const prevMonthDaysArray = [];
+  for (let i = firstDayOfMonth.value - 1; i >= 0; i--) {
+    prevMonthDaysArray.push(prevMonthDays.value - i);
+  }
+
+  prevMonthDaysArray.forEach((day, index) => {
+    const cellDate = new Date(prevYear, prevMonth, day);
+    const eventsForDate = getEventsForDate(cellDate);
+
+    cells.push({
+      day: day,
+      type: "prev",
+      monthAbbr: monthNames[prevMonth],
+      showMonthAbbr: index === prevMonthDaysArray.length - 1,
+      date: cellDate,
+      events: eventsForDate,
+      eventPositions: eventsForDate.map((event) =>
+        getEventPosition(event, cellDate)
+      ),
+    });
+  });
+
+  // Current month dates
+  for (let i = 1; i <= daysInMonth.value; i++) {
+    const cellDate = new Date(year, month, i);
+    const eventsForDate = getEventsForDate(cellDate);
+
+    cells.push({
+      day: i,
+      type: "current",
+      monthAbbr: monthNames[month],
+      showMonthAbbr: false,
+      date: cellDate,
+      events: eventsForDate,
+      eventPositions: eventsForDate.map((event) =>
+        getEventPosition(event, cellDate)
+      ),
+    });
+  }
+
+  // Next month dates (to fill remaining cells)
+  const nextMonth = month === 11 ? 0 : month + 1;
+  const nextYear = month === 11 ? year + 1 : year;
+  let nextDays = totalCells - cells.length;
+  for (let i = 1; i <= nextDays; i++) {
+    const cellDate = new Date(nextYear, nextMonth, i);
+    const eventsForDate = getEventsForDate(cellDate);
+
+    cells.push({
+      day: i,
+      type: "next",
+      monthAbbr: monthNames[nextMonth],
+      showMonthAbbr: i === 1,
+      date: cellDate,
+      events: eventsForDate,
+      eventPositions: eventsForDate.map((event) =>
+        getEventPosition(event, cellDate)
+      ),
+    });
+  }
+
+  return cells;
+});
+
+// Check if a day is today
+const isToday = (day) => {
+  const today = new Date();
+  return (
+    today.getDate() === day &&
+    today.getMonth() === props.current.getMonth() &&
+    today.getFullYear() === props.current.getFullYear()
+  );
+};
+
+// Format event time display
+const formatEventTime = (event) => {
+  if (!event.startTime && !event.endTime) return "";
+
+  const formatTime = (timeStr) => {
+    if (!timeStr) return "";
+
+    // If it's already a formatted 12-hour string (contains AM/PM), return it as-is
+    if (typeof timeStr === "string" && /AM|PM/i.test(timeStr)) {
+      return timeStr;
+    }
+
+    // If it's a 24-hour format string, convert to 12-hour
+    if (typeof timeStr === "string" && /^\d{1,2}:\d{2}$/.test(timeStr)) {
+      const [hours, minutes] = timeStr.split(":");
+      const hour24 = parseInt(hours);
+      const hour12 = hour24 === 0 ? 12 : hour24 > 12 ? hour24 - 12 : hour24;
+      const period = hour24 >= 12 ? "PM" : "AM";
+      return `${hour12}:${minutes} ${period}`;
+    }
+
+    // If it's a Date object, format it to 12-hour
+    if (timeStr instanceof Date) {
+      return timeStr.toLocaleTimeString([], {
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true,
+      });
+    }
+
+    return timeStr;
+  };
+
+  const start = formatTime(event.startTime);
+  const end = formatTime(event.endTime);
+
+  if (start && end) {
+    return `${start} - ${end}`;
+  } else if (start) {
+    return start;
+  } else if (end) {
+    return `Until ${end}`;
+  }
+
+  return "";
+};
+
+// Get tooltip text for event
+const getEventTooltip = (event) => {
+  let tooltip = event.title;
+
+  if (event.type) {
+    tooltip += ` (${event.type})`;
+  }
+
+  const timeStr = formatEventTime(event);
+  if (timeStr) {
+    tooltip += `\n${timeStr}`;
+  }
+
+  if (event.description) {
+    tooltip += `\n${event.description}`;
+  }
+
+  return tooltip;
+};
+
+// Handle day click
+const onDayClick = (cell) => {
+  emit("dayClick", {
+    date: cell.date,
+    day: cell.day,
+    type: cell.type,
+    monthAbbr: cell.monthAbbr,
+  });
+};
+</script>
+
+<style scoped>
+.calendar {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: auto repeat(6, 1fr);
+  width: 100%;
+  font-family: sans-serif;
+}
+
+.header {
+  font-weight: bold;
+  text-align: center;
+  padding: 10px 0;
+  background-color: #f0f0f0;
+}
+
+.day {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  position: relative;
+  padding: 4px 2px;
+}
+
+.day-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.day-number {
+  font-size: 1.1em;
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+
+.month-abbr {
+  font-size: 0.7em;
+  color: #888;
+  margin-top: 2px;
+  font-weight: normal;
+}
+
+.event-indicators {
+  width: 100%;
+  margin-top: auto;
+  padding-bottom: 2px;
+}
+
+.default-event-block {
+  margin: 1px 0;
+  border-radius: 4px;
+  font-size: 0.7em;
+  display: flex;
+  align-items: flex-start;
+  min-height: 18px;
+  padding: 2px 4px;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.event-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  line-height: 1.1;
+}
+
+.default-event-text {
+  color: white;
+  font-weight: 500;
+  font-size: 0.7em;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.event-time {
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 400;
+  font-size: 0.6em;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 1px;
+}
+
+.more-events {
+  font-size: 0.6em;
+  color: #666;
+  text-align: center;
+  margin-top: 1px;
+  font-weight: 500;
+}
+
+.day:hover {
+  background-color: #d0e8ff;
+}
+
+.day.other-month {
+  color: #aaa;
+  cursor: default;
+}
+
+.today {
+  background-color: #ffd54f;
+  border: 2px solid #ffa500;
+}
+
+/* Update month view */
+.month-view {
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: auto repeat(6, 1fr);
+}
+</style>