1# DokuWiki Compact Calendar Plugin 2 3A sleek, space-efficient calendar plugin with integrated event list panel. 4 5## Design Specifications 6 7- **Dimensions**: 800x600 pixels (compact, fixed-size) 8- **Layout**: Split view with calendar on left (500px) and event list on right (300px) 9- **Cell Size**: Excel-like cells (~65px height, proportional width) 10- **Style**: Clean, modern, professional 11 12## Features 13 14✨ **Compact Design**: Fits perfectly in 800x600 area 15�� **Month View**: Excel-style grid with clean borders 16�� **Integrated Event List**: View and manage events in right panel 17��️ **Event Panel Only**: Display just the event panel (320px width) 18�� **Day Popup**: Click any date to see/edit events in popup window 19➕ **Quick Add**: Add events from calendar, panel, or popup 20✏️ **Edit/Delete**: Full event management with date changes 21�� **Color Coding**: Custom colors for events 22⚡ **Real-time Updates**: AJAX-powered, no page reloads needed 23�� **Responsive Event List**: Scrollable panel for many events 24�� **Day Filter**: Click any day to see events in popup 25�� **Standalone Event Lists**: Display events independently 26 27## Installation 28 291. Extract to `lib/plugins/calendar/` 302. Create data directory: 31 ```bash 32 mkdir -p data/meta/calendar 33 chmod 775 data/meta/calendar 34 ``` 353. Plugin will be auto-detected by DokuWiki 36 37## Usage 38 39### Basic Calendar 40 41``` 42{{calendar}} 43``` 44 45Displays current month with event list panel. 46 47### Specific Month 48 49``` 50{{calendar year=2026 month=6}} 51``` 52 53### With Namespace 54 55``` 56{{calendar namespace=team}} 57``` 58 59Events stored separately for different teams/projects. 60 61### Event Panel Only (Right Panel) 62 63Display just the event panel without the calendar grid: 64 65``` 66{{eventpanel}} 67``` 68 69Or with specific month: 70 71``` 72{{eventpanel year=2026 month=6 namespace=team}} 73``` 74 75Perfect for sidebars or when you want event management without the full calendar view. 76 77### Standalone Event List 78 79Display events in a list without the calendar: 80 81``` 82{{eventlist date=2026-01-22}} 83``` 84 85Or date range: 86 87``` 88{{eventlist daterange=2026-01-01:2026-01-31}} 89``` 90 91With namespace: 92 93``` 94{{eventlist daterange=2026-01-01:2026-01-31 namespace=team}} 95``` 96 97## How to Use 98 99### Adding Events 100 1011. Click **+ Add** button in event panel, OR 1022. Click any day in the calendar to open day popup 1033. Fill in event details: 104 - Date (required - can be changed) 105 - Title (required) 106 - Time (optional) 107 - Color (optional, default blue) 108 - Description (optional) 1094. Click **Save** 110 111### Viewing Events 112 113- **See all month events**: Scroll through event list panel 114- **View day events**: Click any calendar day to see popup with that day's events 115- **Orange dot**: Indicates day has events 116- **Day popup**: Shows all events for clicked date with full details 117 118### Editing Events 119 1201. Click calendar day to open popup, OR find event in list panel 1212. Click **Edit** button 1223. Modify details (including date if you want to move the event) 1234. Click **Save** 124 125### Deleting Events 126 1271. Click calendar day to open popup, OR find event in list panel 1282. Click **Delete** button 1293. Confirm deletion 130 131## Design Details 132 133### Calendar Grid 134- **Cell size**: ~65px height (similar to Excel) 135- **Grid lines**: Light gray borders 136- **Today**: Blue highlight 137- **Has events**: Yellow tint with orange dot 138- **Hover**: Subtle highlight 139 140### Event List Panel 141- **Scrollable**: Handle many events efficiently 142- **Color bar**: Left edge shows event color 143- **Compact info**: Date, time, title, description 144- **Action buttons**: Edit and Delete for each event 145 146### Color Indicators 147- **Blue background**: Today 148- **Yellow background**: Days with events 149- **Orange dot**: Event indicator 150- **Gray**: Empty days 151 152## Examples 153 154### Team Calendar 155 156``` 157====== Development Team Calendar ====== 158 159{{calendar namespace=team:dev}} 160 161**Color Code**: 162 * �� Blue: Meetings 163 * �� Green: Deadlines 164 * �� Yellow: Code reviews 165 * �� Red: Releases 166``` 167 168### Project Timeline 169 170``` 171====== Project Alpha - January 2026 ====== 172 173{{calendar namespace=projects:alpha year=2026 month=1}} 174 175**Milestones**: 176 * Jan 5: Kickoff 177 * Jan 15: Design complete 178 * Jan 30: Development start 179``` 180 181### Personal Schedule 182 183``` 184====== My Schedule ====== 185 186{{calendar namespace=personal:john}} 187 188**Regular Events**: 189 * Monday: Team standup 9 AM 190 * Wednesday: Client calls 191 * Friday: Sprint review 192``` 193 194### Event Panel Sidebar 195 196``` 197====== Team Events ====== 198 199{{eventpanel namespace=team}} 200 201Shows only the event management panel (320px wide) - perfect for page sidebars. 202``` 203 204### Event Report 205 206``` 207====== This Month's Events ====== 208 209{{eventlist daterange=2026-01-01:2026-01-31 namespace=team}} 210 211**Summary**: 24 events scheduled 212``` 213 214## File Storage 215 216Events are stored in JSON format: 217 218``` 219data/meta/calendar/2026-01.json 220data/meta/calendar/2026-02.json 221data/meta/[namespace]/calendar/2026-01.json 222``` 223 224Each file contains all events for that month. 225 226## Event Data Structure 227 228```json 229{ 230 "2026-01-22": [ 231 { 232 "id": "abc123", 233 "title": "Team Meeting", 234 "time": "14:00", 235 "description": "Weekly sync", 236 "color": "#3498db", 237 "created": "2026-01-20 10:00:00" 238 } 239 ] 240} 241``` 242 243## Troubleshooting 244 245### Calendar not showing 246- Check plugin is in `lib/plugins/calendar/` 247- Verify all files present (syntax.php, action.php, style.css, script.js) 248- Clear DokuWiki cache 249 250### Events not saving 251- Check `data/meta/calendar/` is writable 252- Verify web server user has permissions 253- Check browser console for errors 254 255### Events not displaying 256- Manually create test event file (see below) 257- Check JSON is valid 258- Verify date format is YYYY-MM-DD 259 260### Test Event 261 262Create `data/meta/calendar/2026-01.json`: 263 264```json 265{ 266 "2026-01-22": [ 267 { 268 "id": "test1", 269 "title": "Test Event", 270 "time": "10:00", 271 "description": "Testing", 272 "color": "#e74c3c", 273 "created": "2026-01-22 09:00:00" 274 } 275 ] 276} 277``` 278 279Then refresh calendar page. 280 281## Technical Details 282 283- **PHP**: 7.4+ 284- **DokuWiki**: 2020-07-29 "Hogfather" or newer 285- **JavaScript**: ES6, uses Fetch API 286- **CSS**: Modern flexbox layout 287- **Size**: Exactly 800x600px 288 289## Browser Support 290 291- Chrome/Edge: ✅ 292- Firefox: ✅ 293- Safari: ✅ 294- Mobile: ⚠️ Fixed size may require horizontal scroll 295 296## License 297 298GPL 2.0 299 300## Support 301 302For issues or questions, refer to DokuWiki plugin documentation or forums. 303