1# Compact Event List Widget 2 3The `{{eventlist}}` tag has been redesigned as a compact, customizable widget perfect for sidebars, dashboards, and embedded displays. 4 5## Syntax 6 7``` 8{{eventlist [parameters]}} 9``` 10 11## Parameters 12 13### Size Parameters 14 15**width** - Set the widget width (default: 300px) 16``` 17{{eventlist width=250px}} 18{{eventlist width=20em}} 19{{eventlist width=100%}} 20``` 21 22**height** - Set the maximum height before scrolling (default: 400px) 23``` 24{{eventlist height=300px}} 25{{eventlist height=50vh}} 26{{eventlist height=600px}} 27``` 28 29### Date Parameters 30 31**today** - Show only today's events (auto-updates daily) 32``` 33{{eventlist today}} 34``` 35 36**date** - Show events for a specific date 37``` 38{{eventlist date=2026-01-24}} 39``` 40 41**daterange** - Show events in a date range 42``` 43{{eventlist daterange=2026-01-20:2026-01-27}} 44``` 45 46**namespace** - Filter events by namespace 47``` 48{{eventlist namespace=team}} 49{{eventlist namespace=team:projects}} 50``` 51 52## Common Examples 53 54### Today's Events (Sidebar) 55``` 56{{eventlist today width=250px height=400px}} 57``` 58Perfect for a sidebar showing what's happening today. 59 60### This Week's Events 61``` 62{{eventlist daterange=2026-01-20:2026-01-26 width=300px height=500px}} 63``` 64Shows all events for a specific week. 65 66### Team Events Today 67``` 68{{eventlist today namespace=team width=280px height=350px}} 69``` 70Today's events filtered to team namespace. 71 72### Upcoming Events (Next 7 Days) 73``` 74{{eventlist daterange=2026-01-24:2026-01-31 width=320px height=600px}} 75``` 76 77### Single Day View 78``` 79{{eventlist date=2026-01-25 width=300px height=400px}} 80``` 81Shows all events for January 25, 2026. 82 83### Dashboard Widget (Small) 84``` 85{{eventlist today width=200px height=250px}} 86``` 87Compact widget for dashboard overview. 88 89### Full Sidebar (Large) 90``` 91{{eventlist daterange=2026-01-01:2026-01-31 width=350px height=90vh}} 92``` 93Shows entire month in a tall sidebar. 94 95## Visual Design 96 97### Compact Layout 98``` 99┌─────────────────────────┐ 100│ �� Today's Events │ ← Blue header 101├─────────────────────────┤ 102│ Team Meeting │ ← Event 1 103│ 2:00 PM │ 104│ Weekly standup... │ 105├─────────────────────────┤ 106│ Code Review │ ← Event 2 107│ 4:00 PM │ 108│ Review PR #123 │ 109├─────────────────────────┤ 110│ ... │ ↕ Scrolls 111└─────────────────────────┘ 112``` 113 114### Features 115 116- **Color-coded:** Each event has colored left border 117- **Time display:** 12-hour format (2:00 PM, not 14:00) 118- **Rich content:** Images, links, formatting supported 119- **Compact spacing:** Minimal padding for maximum content 120- **Auto-scroll:** Scrolls when content exceeds height 121- **Hover effect:** Events highlight on hover 122 123## Default Behavior 124 125If no parameters specified: 126``` 127{{eventlist}} 128``` 129 130Defaults to: 131- Width: 300px 132- Height: 400px 133- Shows: Current month's events 134- Namespace: All namespaces 135 136## Combining Parameters 137 138You can combine any parameters: 139 140``` 141{{eventlist today namespace=team width=280px height=400px}} 142``` 143Shows today's team events in a 280x400px widget. 144 145``` 146{{eventlist daterange=2026-01-24:2026-01-31 width=100% height=500px}} 147``` 148Shows next week's events at full width, 500px tall. 149 150``` 151{{eventlist date=2026-01-25 namespace=personal width=250px height=300px}} 152``` 153Shows personal events on Jan 25 in compact 250x300px widget. 154 155## Use Cases 156 157### 1. Sidebar - Today's Agenda 158``` 159{{eventlist today width=280px height=600px}} 160``` 161Perfect for showing what's happening today in a sidebar. 162 163### 2. Dashboard Widget - Team Events 164``` 165{{eventlist today namespace=team width=300px height=400px}} 166``` 167Team dashboard showing today's team activities. 168 169### 3. Meeting Room Display 170``` 171{{eventlist today namespace=room:conference width=400px height=90vh}} 172``` 173Display today's conference room bookings on a screen. 174 175### 4. Project Page - This Week 176``` 177{{eventlist daterange=2026-01-20:2026-01-26 namespace=project:alpha width=350px height=500px}} 178``` 179Show this week's project milestones. 180 181### 5. Personal Calendar Sidebar 182``` 183{{eventlist daterange=2026-01-24:2026-01-31 namespace=personal width=300px height=700px}} 184``` 185Next 7 days of personal events. 186 187### 6. Department Overview 188``` 189{{eventlist today namespace=sales width=320px height=450px}} 190``` 191Today's sales department events. 192 193## "Today" Parameter - Special Behavior 194 195The `today` parameter is **dynamic** - it always shows the current day's events: 196 197**January 24, 2026:** 198``` 199{{eventlist today}} 200``` 201Shows events for Jan 24, 2026 202 203**January 25, 2026 (next day):** 204Same tag now shows events for Jan 25, 2026 205 206This makes it perfect for: 207- Persistent sidebar widgets 208- Dashboard displays 209- "What's happening today" sections 210- Meeting room displays 211 212## Responsive Sizing 213 214### Fixed Size 215``` 216{{eventlist today width=300px height=400px}} 217``` 218Always 300x400px regardless of screen size. 219 220### Percentage-Based 221``` 222{{eventlist today width=100% height=400px}} 223``` 224Full width of container, 400px tall. 225 226### Viewport-Based 227``` 228{{eventlist today width=25vw height=80vh}} 229``` 23025% of viewport width, 80% of viewport height. 231 232### Em-Based 233``` 234{{eventlist today width=20em height=30em}} 235``` 236Scales with font size. 237 238## Content Features 239 240### Time Conversion 241Times automatically convert to 12-hour format: 242- `14:00` → `2:00 PM` 243- `09:30` → `9:30 AM` 244 245### Rich Content Support 246Descriptions support: 247- **DokuWiki links:** `[[wiki:page|text]]` 248- **Section anchors:** `[[wiki:page#section|text]]` 249- **External links:** `[[https://example.com|text]]` 250- **Images:** `{{image.jpg}}` 251- **Markdown links:** `[text](url)` 252- **HTML:** `<strong>`, `<em>`, `<code>` 253 254### Multi-Day Ranges 255When showing date ranges, dates are grouped: 256``` 257Mon, Jan 24 258 • Meeting (2:00 PM) 259 • Review (4:00 PM) 260 261Tue, Jan 25 262 • Standup (9:00 AM) 263 • Planning (3:00 PM) 264``` 265 266### Today Mode 267With `today` parameter, date header is hidden (redundant): 268``` 269�� Today's Events 270 271• Team Meeting (2:00 PM) 272• Code Review (4:00 PM) 273• Sprint Planning (5:00 PM) 274``` 275 276## Tips 277 2781. **Use `today` for persistent displays** - Auto-updates daily 2792. **Use `width=100%` for full-width widgets** - Adapts to container 2803. **Use `height=80vh` for tall displays** - Uses most of screen 2814. **Combine with namespace** - Filter to specific areas 2825. **Test on mobile** - Make sure widget is usable on small screens 283 284## Differences from Old EventList 285 286**Old (verbose):** 287- Large headers 288- Full date display (Monday, January 24, 2026) 289- Lots of spacing 290- Fixed layout 291 292**New (compact):** 293- Minimal header 294- Short date (Mon, Jan 24) 295- Tight spacing 296- Customizable size 297- Blue header bar 298- Better for sidebars 299 300--- 301 302**Version:** 3.2 303**Feature:** Compact Event List Widget 304**Last Updated:** January 24, 2026 305
