diff --git a/backend/controllers/calendarController.js b/backend/controllers/calendarController.js
index f9c7abd..53c9a73 100644
--- a/backend/controllers/calendarController.js
+++ b/backend/controllers/calendarController.js
@@ -140,5 +140,64 @@ export default {
             console.error('Calendar getFriendsBirthdays:', error);
             res.status(500).json({ error: error.message || 'Internal server error' });
         }
+    },
+
+    /**
+     * GET /api/calendar/widget/birthdays
+     * Get upcoming birthdays for widget display
+     */
+    async getWidgetBirthdays(req, res) {
+        const hashedUserId = getHashedUserId(req);
+        if (!hashedUserId) {
+            return res.status(401).json({ error: 'Unauthorized' });
+        }
+
+        try {
+            const limit = parseInt(req.query.limit) || 10;
+            const birthdays = await calendarService.getUpcomingBirthdays(hashedUserId, limit);
+            res.json(birthdays);
+        } catch (error) {
+            console.error('Calendar getWidgetBirthdays:', error);
+            res.status(500).json({ error: error.message || 'Internal server error' });
+        }
+    },
+
+    /**
+     * GET /api/calendar/widget/upcoming
+     * Get upcoming events for widget display
+     */
+    async getWidgetUpcoming(req, res) {
+        const hashedUserId = getHashedUserId(req);
+        if (!hashedUserId) {
+            return res.status(401).json({ error: 'Unauthorized' });
+        }
+
+        try {
+            const limit = parseInt(req.query.limit) || 10;
+            const events = await calendarService.getUpcomingEvents(hashedUserId, limit);
+            res.json(events);
+        } catch (error) {
+            console.error('Calendar getWidgetUpcoming:', error);
+            res.status(500).json({ error: error.message || 'Internal server error' });
+        }
+    },
+
+    /**
+     * GET /api/calendar/widget/mini
+     * Get mini calendar data for widget display
+     */
+    async getWidgetMiniCalendar(req, res) {
+        const hashedUserId = getHashedUserId(req);
+        if (!hashedUserId) {
+            return res.status(401).json({ error: 'Unauthorized' });
+        }
+
+        try {
+            const data = await calendarService.getMiniCalendarData(hashedUserId);
+            res.json(data);
+        } catch (error) {
+            console.error('Calendar getWidgetMiniCalendar:', error);
+            res.status(500).json({ error: error.message || 'Internal server error' });
+        }
     }
 };
diff --git a/backend/routers/calendarRouter.js b/backend/routers/calendarRouter.js
index 7df3853..7009650 100644
--- a/backend/routers/calendarRouter.js
+++ b/backend/routers/calendarRouter.js
@@ -12,4 +12,9 @@ router.put('/events/:id', authenticate, calendarController.updateEvent);
 router.delete('/events/:id', authenticate, calendarController.deleteEvent);
 router.get('/birthdays', authenticate, calendarController.getFriendsBirthdays);
 
+// Widget endpoints
+router.get('/widget/birthdays', authenticate, calendarController.getWidgetBirthdays);
+router.get('/widget/upcoming', authenticate, calendarController.getWidgetUpcoming);
+router.get('/widget/mini', authenticate, calendarController.getWidgetMiniCalendar);
+
 export default router;
diff --git a/backend/services/calendarService.js b/backend/services/calendarService.js
index e7954df..93797d7 100644
--- a/backend/services/calendarService.js
+++ b/backend/services/calendarService.js
@@ -274,6 +274,216 @@ class CalendarService {
         return age;
     }
 
+    /**
+     * Get upcoming birthdays for widget (sorted by next occurrence)
+     */
+    async getUpcomingBirthdays(hashedUserId, limit = 10) {
+        const user = await User.findOne({ where: { hashedId: hashedUserId } });
+        if (!user) {
+            throw new Error('User not found');
+        }
+
+        const userAge = await this.getUserAge(user.id);
+        const today = new Date();
+        const currentYear = today.getFullYear();
+
+        // Get all accepted friendships
+        const friendships = await Friendship.findAll({
+            where: {
+                accepted: true,
+                withdrawn: false,
+                denied: false,
+                [Op.or]: [
+                    { user1Id: user.id },
+                    { user2Id: user.id }
+                ]
+            }
+        });
+
+        const birthdays = [];
+
+        for (const friendship of friendships) {
+            const friendId = friendship.user1Id === user.id ? friendship.user2Id : friendship.user1Id;
+
+            const birthdateParam = await UserParam.findOne({
+                where: { userId: friendId },
+                include: [
+                    {
+                        model: UserParamType,
+                        as: 'paramType',
+                        where: { description: 'birthdate' }
+                    },
+                    {
+                        model: UserParamVisibility,
+                        as: 'param_visibilities',
+                        include: [{
+                            model: UserParamVisibilityType,
+                            as: 'visibility_type'
+                        }]
+                    }
+                ]
+            });
+
+            if (!birthdateParam || !birthdateParam.value) continue;
+
+            const visibility = birthdateParam.param_visibilities?.[0]?.visibility_type?.description || 'Invisible';
+            if (!this.isBirthdayVisibleToFriend(visibility, userAge)) continue;
+
+            const friend = await User.findOne({
+                where: { id: friendId },
+                attributes: ['username', 'hashedId']
+            });
+
+            if (!friend) continue;
+
+            const birthdate = new Date(birthdateParam.value);
+            if (isNaN(birthdate.getTime())) continue;
+
+            // Calculate next birthday
+            let nextBirthday = new Date(currentYear, birthdate.getMonth(), birthdate.getDate());
+            if (nextBirthday < today) {
+                nextBirthday = new Date(currentYear + 1, birthdate.getMonth(), birthdate.getDate());
+            }
+
+            // Calculate days until birthday
+            const diffTime = nextBirthday.getTime() - today.getTime();
+            const daysUntil = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+            // Calculate age they will turn
+            const turningAge = nextBirthday.getFullYear() - birthdate.getFullYear();
+
+            birthdays.push({
+                username: friend.username,
+                hashedId: friend.hashedId,
+                date: `${String(birthdate.getMonth() + 1).padStart(2, '0')}-${String(birthdate.getDate()).padStart(2, '0')}`,
+                nextDate: nextBirthday.toISOString().split('T')[0],
+                daysUntil,
+                turningAge
+            });
+        }
+
+        // Sort by days until birthday
+        birthdays.sort((a, b) => a.daysUntil - b.daysUntil);
+
+        return birthdays.slice(0, limit);
+    }
+
+    /**
+     * Get upcoming events for widget
+     */
+    async getUpcomingEvents(hashedUserId, limit = 10) {
+        const user = await User.findOne({ where: { hashedId: hashedUserId } });
+        if (!user) {
+            throw new Error('User not found');
+        }
+
+        const today = new Date();
+        const todayStr = today.toISOString().split('T')[0];
+
+        const events = await CalendarEvent.findAll({
+            where: {
+                userId: user.id,
+                [Op.or]: [
+                    { startDate: { [Op.gte]: todayStr } },
+                    { endDate: { [Op.gte]: todayStr } }
+                ]
+            },
+            order: [['startDate', 'ASC'], ['startTime', 'ASC']],
+            limit
+        });
+
+        return events.map(e => ({
+            id: e.id,
+            titel: e.title,
+            datum: e.startDate,
+            beschreibung: e.description || null,
+            categoryId: e.categoryId,
+            allDay: e.allDay,
+            startTime: e.startTime ? e.startTime.substring(0, 5) : null,
+            endDate: e.endDate
+        }));
+    }
+
+    /**
+     * Get mini calendar data for widget
+     */
+    async getMiniCalendarData(hashedUserId) {
+        const user = await User.findOne({ where: { hashedId: hashedUserId } });
+        if (!user) {
+            throw new Error('User not found');
+        }
+
+        const today = new Date();
+        const year = today.getFullYear();
+        const month = today.getMonth();
+
+        // Get first and last day of month
+        const firstDay = new Date(year, month, 1);
+        const lastDay = new Date(year, month + 1, 0);
+
+        const startStr = firstDay.toISOString().split('T')[0];
+        const endStr = lastDay.toISOString().split('T')[0];
+
+        // Get user events for this month
+        const events = await CalendarEvent.findAll({
+            where: {
+                userId: user.id,
+                [Op.or]: [
+                    { startDate: { [Op.between]: [startStr, endStr] } },
+                    { endDate: { [Op.between]: [startStr, endStr] } },
+                    {
+                        [Op.and]: [
+                            { startDate: { [Op.lte]: startStr } },
+                            { endDate: { [Op.gte]: endStr } }
+                        ]
+                    }
+                ]
+            }
+        });
+
+        // Get birthdays for this month
+        const birthdays = await this.getFriendsBirthdays(hashedUserId, year);
+        const monthBirthdays = birthdays.filter(b => {
+            const bMonth = parseInt(b.startDate.split('-')[1]);
+            return bMonth === month + 1;
+        });
+
+        // Build days with events
+        const daysWithEvents = {};
+        
+        for (const event of events) {
+            const start = new Date(event.startDate);
+            const end = event.endDate ? new Date(event.endDate) : start;
+            
+            for (let d = new Date(start); d <= end && d <= lastDay; d.setDate(d.getDate() + 1)) {
+                if (d >= firstDay) {
+                    const dayNum = d.getDate();
+                    if (!daysWithEvents[dayNum]) {
+                        daysWithEvents[dayNum] = { events: 0, birthdays: 0 };
+                    }
+                    daysWithEvents[dayNum].events++;
+                }
+            }
+        }
+
+        for (const birthday of monthBirthdays) {
+            const dayNum = parseInt(birthday.startDate.split('-')[2]);
+            if (!daysWithEvents[dayNum]) {
+                daysWithEvents[dayNum] = { events: 0, birthdays: 0 };
+            }
+            daysWithEvents[dayNum].birthdays++;
+        }
+
+        return {
+            year,
+            month: month + 1,
+            today: today.getDate(),
+            firstDayOfWeek: firstDay.getDay() === 0 ? 7 : firstDay.getDay(), // Monday = 1
+            daysInMonth: lastDay.getDate(),
+            daysWithEvents
+        };
+    }
+
     /**
      * Format event for API response
      */
diff --git a/backend/utils/initializeWidgetTypes.js b/backend/utils/initializeWidgetTypes.js
index 157e675..5a4720b 100644
--- a/backend/utils/initializeWidgetTypes.js
+++ b/backend/utils/initializeWidgetTypes.js
@@ -3,7 +3,10 @@ import WidgetType from '../models/type/widget_type.js';
 const DEFAULT_WIDGET_TYPES = [
     { label: 'Termine', endpoint: '/api/termine', description: 'Bevorstehende Termine', orderId: 1 },
     { label: 'Falukant', endpoint: '/api/falukant/dashboard-widget', description: 'Charakter, Geld, Nachrichten, Kinder', orderId: 2 },
-    { label: 'News', endpoint: '/api/news?language=de&category=top', description: 'Nachrichten (newsdata.io), Counter für Pagination', orderId: 3 }
+    { label: 'News', endpoint: '/api/news?language=de&category=top', description: 'Nachrichten (newsdata.io), Counter für Pagination', orderId: 3 },
+    { label: 'Geburtstage', endpoint: '/api/calendar/widget/birthdays', description: 'Nächste Geburtstage von Freunden', orderId: 4 },
+    { label: 'Nächste Termine', endpoint: '/api/calendar/widget/upcoming', description: 'Anstehende Kalendertermine', orderId: 5 },
+    { label: 'Kalender', endpoint: '/api/calendar/widget/mini', description: 'Mini-Kalenderansicht', orderId: 6 }
 ];
 
 /**
diff --git a/frontend/src/components/DashboardWidget.vue b/frontend/src/components/DashboardWidget.vue
index 0488f97..1a82604 100644
--- a/frontend/src/components/DashboardWidget.vue
+++ b/frontend/src/components/DashboardWidget.vue
@@ -25,18 +25,24 @@ import apiClient from '@/utils/axios.js';
 import FalukantWidget from './widgets/FalukantWidget.vue';
 import NewsWidget from './widgets/NewsWidget.vue';
 import ListWidget from './widgets/ListWidget.vue';
+import BirthdayWidget from './widgets/BirthdayWidget.vue';
+import UpcomingEventsWidget from './widgets/UpcomingEventsWidget.vue';
+import MiniCalendarWidget from './widgets/MiniCalendarWidget.vue';
 
 function getWidgetComponent(endpoint) {
   if (!endpoint || typeof endpoint !== 'string') return ListWidget;
   const ep = endpoint.toLowerCase();
   if (ep.includes('falukant')) return FalukantWidget;
   if (ep.includes('news')) return NewsWidget;
+  if (ep.includes('calendar/widget/birthdays')) return BirthdayWidget;
+  if (ep.includes('calendar/widget/upcoming')) return UpcomingEventsWidget;
+  if (ep.includes('calendar/widget/mini')) return MiniCalendarWidget;
   return ListWidget;
 }
 
 export default {
   name: 'DashboardWidget',
-  components: { FalukantWidget, NewsWidget, ListWidget },
+  components: { FalukantWidget, NewsWidget, ListWidget, BirthdayWidget, UpcomingEventsWidget, MiniCalendarWidget },
   props: {
     widgetId: { type: String, required: true },
     title: { type: String, required: true },
diff --git a/frontend/src/components/widgets/BirthdayWidget.vue b/frontend/src/components/widgets/BirthdayWidget.vue
new file mode 100644
index 0000000..0247ea0
--- /dev/null
+++ b/frontend/src/components/widgets/BirthdayWidget.vue
@@ -0,0 +1,122 @@
+<template>
+  <div v-if="birthdays.length" class="birthday-widget">
+    <div 
+      v-for="(birthday, i) in birthdays" 
+      :key="i"
+      :class="['birthday-item', { 'birthday-today': birthday.daysUntil === 0 }]"
+    >
+      <div class="birthday-icon">🎂</div>
+      <div class="birthday-info">
+        <div class="birthday-name">{{ birthday.username }}</div>
+        <div class="birthday-date">
+          <span v-if="birthday.daysUntil === 0" class="birthday-highlight">Heute!</span>
+          <span v-else-if="birthday.daysUntil === 1">Morgen</span>
+          <span v-else>{{ formatDate(birthday.nextDate) }}</span>
+          <span class="birthday-age">(wird {{ birthday.turningAge }})</span>
+        </div>
+      </div>
+      <div v-if="birthday.daysUntil > 1" class="birthday-days">
+        {{ birthday.daysUntil }} Tage
+      </div>
+    </div>
+  </div>
+  <div v-else class="birthday-empty">
+    Keine Geburtstage von Freunden sichtbar
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BirthdayWidget',
+  props: {
+    data: { type: Array, default: () => [] }
+  },
+  computed: {
+    birthdays() {
+      return Array.isArray(this.data) ? this.data : [];
+    }
+  },
+  methods: {
+    formatDate(dateStr) {
+      if (!dateStr) return '';
+      const d = new Date(dateStr);
+      return d.toLocaleDateString('de-DE', {
+        day: 'numeric',
+        month: 'short'
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.birthday-widget {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.birthday-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px;
+  border-radius: 6px;
+  background: #fafafa;
+  transition: background 0.2s;
+}
+
+.birthday-item:hover {
+  background: #f0f0f0;
+}
+
+.birthday-item.birthday-today {
+  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
+  border: 1px solid #ffd54f;
+}
+
+.birthday-icon {
+  font-size: 1.5em;
+}
+
+.birthday-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.birthday-name {
+  font-weight: 600;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.birthday-date {
+  font-size: 0.85em;
+  color: #666;
+}
+
+.birthday-highlight {
+  color: #f57c00;
+  font-weight: 600;
+}
+
+.birthday-age {
+  margin-left: 4px;
+  color: #888;
+}
+
+.birthday-days {
+  font-size: 0.8em;
+  color: #888;
+  white-space: nowrap;
+}
+
+.birthday-empty {
+  color: #888;
+  text-align: center;
+  padding: 1rem;
+  font-style: italic;
+}
+</style>
diff --git a/frontend/src/components/widgets/MiniCalendarWidget.vue b/frontend/src/components/widgets/MiniCalendarWidget.vue
new file mode 100644
index 0000000..4128d22
--- /dev/null
+++ b/frontend/src/components/widgets/MiniCalendarWidget.vue
@@ -0,0 +1,213 @@
+<template>
+  <div v-if="calendarData" class="mini-calendar">
+    <div class="mini-calendar-header">
+      {{ monthName }} {{ calendarData.year }}
+    </div>
+    <div class="mini-calendar-weekdays">
+      <span v-for="day in weekdays" :key="day" class="mini-calendar-weekday">{{ day }}</span>
+    </div>
+    <div class="mini-calendar-days">
+      <span 
+        v-for="(day, i) in calendarDays" 
+        :key="i"
+        :class="getDayClasses(day)"
+      >
+        <template v-if="day">
+          {{ day }}
+          <span v-if="getDayIndicators(day)" class="day-indicators">
+            <span v-if="getDayIndicators(day).events" class="indicator event-indicator"></span>
+            <span v-if="getDayIndicators(day).birthdays" class="indicator birthday-indicator"></span>
+          </span>
+        </template>
+      </span>
+    </div>
+    <router-link to="/personal/calendar" class="mini-calendar-link">
+      Zum Kalender →
+    </router-link>
+  </div>
+  <div v-else class="mini-calendar-empty">
+    Kalender wird geladen...
+  </div>
+</template>
+
+<script>
+const MONTH_NAMES = [
+  'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
+  'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'
+];
+
+export default {
+  name: 'MiniCalendarWidget',
+  props: {
+    data: { type: Object, default: null }
+  },
+  data() {
+    return {
+      weekdays: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
+    };
+  },
+  computed: {
+    calendarData() {
+      return this.data;
+    },
+    monthName() {
+      if (!this.calendarData) return '';
+      return MONTH_NAMES[this.calendarData.month - 1];
+    },
+    calendarDays() {
+      if (!this.calendarData) return [];
+      
+      const days = [];
+      const { firstDayOfWeek, daysInMonth } = this.calendarData;
+      
+      // Add empty cells for days before the first day of month
+      for (let i = 1; i < firstDayOfWeek; i++) {
+        days.push(null);
+      }
+      
+      // Add days of month
+      for (let i = 1; i <= daysInMonth; i++) {
+        days.push(i);
+      }
+      
+      return days;
+    }
+  },
+  methods: {
+    getDayClasses(day) {
+      if (!day) return 'mini-calendar-day empty';
+      
+      const classes = ['mini-calendar-day'];
+      
+      if (this.calendarData && day === this.calendarData.today) {
+        classes.push('today');
+      }
+      
+      const indicators = this.getDayIndicators(day);
+      if (indicators) {
+        if (indicators.events) classes.push('has-events');
+        if (indicators.birthdays) classes.push('has-birthdays');
+      }
+      
+      return classes.join(' ');
+    },
+    getDayIndicators(day) {
+      if (!day || !this.calendarData || !this.calendarData.daysWithEvents) return null;
+      return this.calendarData.daysWithEvents[day] || null;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.mini-calendar {
+  font-size: 0.85rem;
+}
+
+.mini-calendar-header {
+  text-align: center;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.mini-calendar-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+  margin-bottom: 4px;
+}
+
+.mini-calendar-weekday {
+  text-align: center;
+  font-size: 0.75em;
+  color: #888;
+  font-weight: 500;
+}
+
+.mini-calendar-days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.mini-calendar-day {
+  position: relative;
+  text-align: center;
+  padding: 4px 2px;
+  border-radius: 4px;
+  cursor: default;
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mini-calendar-day.empty {
+  background: transparent;
+}
+
+.mini-calendar-day.today {
+  background: var(--color-primary-orange, #FFB84D);
+  color: #000;
+  font-weight: 600;
+  border-radius: 50%;
+}
+
+.mini-calendar-day.has-events:not(.today) {
+  background: #e3f2fd;
+}
+
+.mini-calendar-day.has-birthdays:not(.today) {
+  background: #fff3e0;
+}
+
+.mini-calendar-day.has-events.has-birthdays:not(.today) {
+  background: linear-gradient(135deg, #e3f2fd 50%, #fff3e0 50%);
+}
+
+.day-indicators {
+  position: absolute;
+  bottom: 1px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 2px;
+}
+
+.indicator {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+}
+
+.event-indicator {
+  background: #2196F3;
+}
+
+.birthday-indicator {
+  background: #FF9800;
+}
+
+.mini-calendar-link {
+  display: block;
+  text-align: center;
+  margin-top: 12px;
+  padding-top: 8px;
+  border-top: 1px solid #eee;
+  color: var(--color-primary-orange, #FFB84D);
+  text-decoration: none;
+  font-size: 0.85em;
+}
+
+.mini-calendar-link:hover {
+  text-decoration: underline;
+}
+
+.mini-calendar-empty {
+  color: #888;
+  text-align: center;
+  padding: 1rem;
+  font-style: italic;
+}
+</style>
diff --git a/frontend/src/components/widgets/UpcomingEventsWidget.vue b/frontend/src/components/widgets/UpcomingEventsWidget.vue
new file mode 100644
index 0000000..7408d7b
--- /dev/null
+++ b/frontend/src/components/widgets/UpcomingEventsWidget.vue
@@ -0,0 +1,154 @@
+<template>
+  <div v-if="events.length" class="upcoming-widget">
+    <div 
+      v-for="(event, i) in events" 
+      :key="i"
+      class="upcoming-item"
+    >
+      <div 
+        class="upcoming-category" 
+        :style="{ backgroundColor: getCategoryColor(event.categoryId) }"
+      ></div>
+      <div class="upcoming-info">
+        <div class="upcoming-title">{{ event.titel }}</div>
+        <div class="upcoming-date">
+          {{ formatDate(event.datum) }}
+          <span v-if="event.startTime && !event.allDay" class="upcoming-time">
+            {{ event.startTime }} Uhr
+          </span>
+          <span v-if="event.allDay" class="upcoming-allday">Ganztägig</span>
+        </div>
+        <div v-if="event.beschreibung" class="upcoming-desc">{{ event.beschreibung }}</div>
+      </div>
+    </div>
+  </div>
+  <div v-else class="upcoming-empty">
+    Keine anstehenden Termine
+  </div>
+</template>
+
+<script>
+const CATEGORY_COLORS = {
+  personal: '#4CAF50',
+  work: '#2196F3',
+  family: '#9C27B0',
+  health: '#F44336',
+  birthday: '#FF9800',
+  holiday: '#00BCD4',
+  reminder: '#795548',
+  other: '#607D8B'
+};
+
+export default {
+  name: 'UpcomingEventsWidget',
+  props: {
+    data: { type: Array, default: () => [] }
+  },
+  computed: {
+    events() {
+      return Array.isArray(this.data) ? this.data : [];
+    }
+  },
+  methods: {
+    formatDate(dateStr) {
+      if (!dateStr) return '';
+      const d = new Date(dateStr);
+      const today = new Date();
+      const tomorrow = new Date(today);
+      tomorrow.setDate(tomorrow.getDate() + 1);
+      
+      if (d.toDateString() === today.toDateString()) {
+        return 'Heute';
+      }
+      if (d.toDateString() === tomorrow.toDateString()) {
+        return 'Morgen';
+      }
+      
+      return d.toLocaleDateString('de-DE', {
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short'
+      });
+    },
+    getCategoryColor(categoryId) {
+      return CATEGORY_COLORS[categoryId] || CATEGORY_COLORS.other;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.upcoming-widget {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.upcoming-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 8px;
+  border-radius: 6px;
+  background: #fafafa;
+  transition: background 0.2s;
+}
+
+.upcoming-item:hover {
+  background: #f0f0f0;
+}
+
+.upcoming-category {
+  width: 4px;
+  min-height: 40px;
+  height: 100%;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.upcoming-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.upcoming-title {
+  font-weight: 600;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.upcoming-date {
+  font-size: 0.85em;
+  color: #666;
+  margin-top: 2px;
+}
+
+.upcoming-time {
+  margin-left: 6px;
+  color: #888;
+}
+
+.upcoming-allday {
+  margin-left: 6px;
+  color: #888;
+  font-style: italic;
+}
+
+.upcoming-desc {
+  font-size: 0.8em;
+  color: #888;
+  margin-top: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.upcoming-empty {
+  color: #888;
+  text-align: center;
+  padding: 1rem;
+  font-style: italic;
+}
+</style>