backend/routers/local_router.py

@@ -116,6 +116,7 @@ def list_calendars(
         d = _cal_dict(c, owned=True)
         if c.id in group_cal_map:
             d["group"] = True
+            d["shared_by"] = group_cal_map[c.id]  # group name, for labelling
         result.append(d)
 
     seen_ids = {c.id for c in own}

frontend/css/app.css

@@ -593,10 +593,10 @@ a { color: var(--primary); text-decoration: none; }
 }
 .month-col.first-of-month {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;       /* "1 JUN" inline — keeps the header height uniform */
-  align-items: flex-start;
+  align-items: center;
-  gap: 0;
+  gap: 6px;
-  padding-top: 8px;
+  padding-top: 4px;
 }
 /* Dividers via pseudo-elements so they render above events (z-index 2) */
 .month-col.month-divider-left::before {
@@ -647,8 +647,8 @@ a { color: var(--primary); text-decoration: none; }
   letter-spacing: .5px;
   color: var(--month-label-color, #7090c0);
   line-height: 1;
-  padding: 0 2px;
+  padding: 0;
-  margin: 0 0 2px 4px;
+  margin: 0;
   position: relative;
   z-index: 3; /* above events overlay (z-index 2) */
 }
@@ -657,10 +657,10 @@ a { color: var(--primary); text-decoration: none; }
   position: relative;
   z-index: 3;
 }
-/* Push events overlay down when row contains a first-of-month cell so the
+/* Month marker now sits inline next to the day number, so the header height is
-   day "1" (which sits below the month marker) isn't hidden by event bars */
+   uniform and the events overlay needs no extra offset for month-start weeks. */
 .month-row.has-month-marker .month-events-overlay {
-  top: 56px;
+  top: 30px;
 }
 /* Events overlay — pointer-events:none so clicks pass to columns */
 .month-events-overlay {

frontend/js/calendar.js

@@ -672,6 +672,13 @@ function renderCalendarList() {
       name: cal.name, color: cal.color, enabled: cal.enabled,
       sourceLabel: `${t('shared_with_me')} · ${cal.shared_by || ''}`, remove: null });
   });
+  // Group calendars (owned by the creator or reached via membership) — shown so
+  // they can be toggled/recoloured; marked with the group emoji.
+  state.localCalendars.filter(c => c.group).forEach(cal => {
+    entries.push({ key: `local:${cal.id}`, source: 'local', dataId: `data-cal-id="${cal.id}"`,
+      name: cal.name, color: cal.color, enabled: cal.enabled,
+      sourceLabel: `${t('groups_title')} · ${cal.shared_by || ''}`, isGroupCal: true, remove: null });
+  });
   state.icalSubscriptions.forEach(sub => {
     entries.push({ key: `ical:${sub.id}`, source: 'ical', dataId: `data-sub-id="${sub.id}"`,
       name: sub.name, color: sub.color, enabled: sub.enabled,
@@ -714,6 +721,7 @@ function renderCalendarList() {
       <input type="checkbox" ${e.enabled ? 'checked' : ''} data-source="${e.source}" ${e.dataId} />
       <div class="cal-item-dot" style="background:${e.color}" data-source="${e.source}" ${e.dataId} title="${t('change_color')}"></div>
       <span class="cal-item-name" data-source="${e.source}">${escHtml(e.name)}</span>
+      ${e.isGroupCal ? `<span class="cal-shared-flag" title="${escHtml(e.sourceLabel)}">👥</span>` : ''}
       ${e.groupVisible ? `<span class="cal-shared-flag" title="${t('group_visible_flag')}">👥</span>` : ''}
       ${e.remove ? `<button class="icon-btn mini-btn cal-item-remove" data-source="${e.source}" ${e.dataId} title="${e.remove.title}">${e.remove.icon}</button>` : ''}
     </div>`
@@ -794,6 +802,7 @@ function renderCalendarList() {
       } else if (source === 'local') {
         const calId = parseInt(dot.dataset.calId);
         const cal = state.localCalendars.find(c => c.id === calId);
+        if (cal && cal.owned === false) { showToast(t('only_owner_color'), true); return; }
         const picked = await openColorPicker(dot, cal?.color || '#34a853');
         if (picked) {
           await api.put(`/local/calendars/${calId}`, { color: picked });

frontend/js/i18n.js

@@ -124,6 +124,7 @@ const translations = {
     group_icon: 'Icon',
     group_visible_flag: 'Für deine Gruppen sichtbar',
     group_new_event: '+ Gruppentermin',
+    only_owner_color: 'Nur der Besitzer kann die Farbe ändern',
     upload_too_large: 'Datei zu groß (Server-Limit). Bitte Upload-Limit erhöhen.',
     shared_with_me: 'Mit dir geteilt',
     settings_calendars: 'Kalender',
@@ -391,6 +392,7 @@ const translations = {
     group_icon: 'Icon',
     group_visible_flag: 'Visible to your groups',
     group_new_event: '+ Group event',
+    only_owner_color: 'Only the owner can change the colour',
     upload_too_large: 'File too large (server limit). Please raise the upload limit.',
     shared_with_me: 'Shared with me',
     settings_calendars: 'Calendars',

frontend/js/version.js

@@ -1,2 +1,2 @@
 // Increment APP_VERSION with every code change
-export const APP_VERSION = 'v35';
+export const APP_VERSION = 'v36';

frontend/js/views/month.js

@@ -152,8 +152,8 @@ export function renderMonth(container, currentDate, events, onDayClick, onEventC
         ? `<div class="month-marker">${monthsShort[cell.getMonth()]}</div>`
         : '';
       colsHtml += `<div class="month-col ${todayCls} ${otherCls} ${selectedCls} ${firstCls} ${dividerCls}" data-date="${key}">
-        ${monthLabel}
         <div class="cell-day ${numCls}">${cell.getDate()}</div>
+        ${monthLabel}
       </div>`;
     });