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