1# New Features - Quick Reference
2
3## AJAX Updates (No Page Reload)
4
5All calendar operations now happen without page reloads! ⚡
6
7### What Works with AJAX:
8
9✅ **Add Event** - Save and see it appear immediately
10✅ **Edit Event** - Changes show instantly
11✅ **Delete Event** - Removed in real-time
12✅ **Month Navigation** - Switch months smoothly
13✅ **Day Filter** - Click days to filter events instantly
14
15### How It Works:
16
171. **Add Event**: Click + Add → Fill form → Save → Calendar updates automatically
182. **Edit Event**: Click Edit → Modify → Save → Changes appear immediately
193. **Delete Event**: Click Delete → Confirm → Event disappears instantly
204. **Navigate**: Click ◄ ► arrows → New month loads without refresh
21
22No more waiting for page reloads! Everything updates in real-time.
23
24---
25
26## Event Panel Only
27
28Display just the event management panel (320px wide) without the calendar grid.
29
30### Syntax:
31
32```
33{{eventpanel}}
34```
35
36### With Options:
37
38```
39{{eventpanel year=2026 month=6}}
40{{eventpanel namespace=team}}
41{{eventpanel year=2026 month=3 namespace=projects:alpha}}
42```
43
44### Perfect For:
45
46- **Page sidebars** - 320px fits perfectly in side columns
47- **Dashboard widgets** - Compact event management
48- **Mobile layouts** - Smaller footprint
49- **Focus on events** - When you don't need the calendar grid
50
51### Example Sidebar Layout:
52
53```wiki
54<columns>
55<column 70%>
56===== Main Content =====
57Your main page content here...
58</column>
59
60<column 30%>
61{{eventpanel namespace=team}}
62</column>
63</columns>
64```
65
66### Features:
67
68✅ Month navigation (◄ ►)
69✅ Add events (+ Add button)
70✅ Edit/Delete events (inline buttons)
71✅ Scrollable list
72✅ Color-coded events
73✅ Full event details
74✅ AJAX updates (no reload)
75
76---
77
78## Comparison: Calendar vs Event Panel vs Event List
79
80### Full Calendar (`{{calendar}}`)
81- **Size**: 800x600 pixels
82- **Layout**: Calendar grid (500px) + Event panel (300px)
83- **Use for**: Full month overview with event management
84- **Interactive**: Yes - click days, add/edit/delete events
85- **AJAX**: Yes - all updates in real-time
86
87### Event Panel Only (`{{eventpanel}}`)
88- **Size**: 320x600 pixels
89- **Layout**: Event panel only (no calendar grid)
90- **Use for**: Sidebars, compact event management
91- **Interactive**: Yes - add/edit/delete events, month navigation
92- **AJAX**: Yes - all updates in real-time
93
94### Event List (`{{eventlist}}`)
95- **Size**: Variable width
96- **Layout**: Chronological list of events
97- **Use for**: Reports, print-friendly views, date ranges
98- **Interactive**: No - read-only display
99- **AJAX**: No - static content
100
101---
102
103## AJAX Technical Details
104
105### No More Page Reloads
106
107**Before** (old version):
108```
109Add Event → Submit → Page reloads → Calendar updates
110Delete Event → Confirm → Page reloads → Event gone
111Navigate month → Click → Page reloads → New month
112```
113
114**Now** (with AJAX):
115```
116Add Event → Submit → Calendar updates instantly ⚡
117Delete Event → Confirm → Event disappears immediately ⚡
118Navigate month → Click → New month loads smoothly ⚡
119```
120
121### How Calendar Rebuilds Work
122
123When you perform an action (add/edit/delete/navigate):
124
1251. **Action sent** to server via AJAX
1262. **Server processes** and returns updated data
1273. **Calendar rebuilds** on your screen
128   - Grid cells update with new dates
129   - Event dots appear/disappear
130   - Event list refreshes
131   - Navigation buttons update
1324. **All happens** in under 1 second - no page flash!
133
134### Benefits
135
136⚡ **Faster** - No full page reload
137✨ **Smoother** - No screen flash or scroll reset
138�� **Maintains state** - Your position on page stays
139�� **Better UX** - Instant feedback on actions
140
141---
142
143## Quick Syntax Reference
144
145```wiki
146# Full calendar (800x600)
147{{calendar}}
148{{calendar year=2026 month=6}}
149{{calendar namespace=team}}
150
151# Event panel only (320px wide)
152{{eventpanel}}
153{{eventpanel year=2026 month=6}}
154{{eventpanel namespace=team}}
155
156# Event list (read-only)
157{{eventlist date=2026-01-22}}
158{{eventlist daterange=2026-01-01:2026-01-31}}
159{{eventlist daterange=2026-01-01:2026-01-31 namespace=team}}
160```
161
162---
163
164## Example: Dashboard with Event Panel
165
166```wiki
167====== My Dashboard ======
168
169<columns>
170<column 65%>
171===== Today's Overview =====
172
173**Date**: {{CURRENTDATE}}\\
174**Tasks Completed**: 12/20\\
175**Meetings Today**: 3
176
177===== Quick Stats =====
178  * Open Tasks: 8
179  * In Progress: 5
180  * Blocked: 2
181  * Completed This Week: 15
182
183===== Recent Activity =====
184  * ✓ Completed design review
185  * ✓ Merged PR #234
186  * ⏳ Code review pending
187  * �� Sent weekly report
188
189[[dashboard:details|View Full Dashboard]]
190</column>
191
192<column 35%>
193{{eventpanel namespace=personal:me}}
194</column>
195</columns>
196
197===== This Week's Schedule =====
198
199{{eventlist daterange=2026-01-22:2026-01-28 namespace=personal:me}}
200```
201
202Creates a dashboard with:
203- Main content on left (65%)
204- Event panel on right (35%)
205- Event list below for full week view
206- All with AJAX updates!
207
208---
209
210## Tips for Best Performance
211
2121. **Use namespaces** - Separate calendars by team/project
2132. **Keep descriptions short** - Long text slows rendering
2143. **Archive old events** - Remove events older than 6 months
2154. **Use event panels** - For sidebars instead of full calendar
2165. **Combine views** - Use eventpanel for management, eventlist for reports
217
218---
219
220## Browser Compatibility
221
222AJAX features work on:
223- Chrome/Edge 90+ ✅
224- Firefox 88+ ✅
225- Safari 14+ ✅
226- Mobile browsers ✅
227
228Requires JavaScript enabled (standard for DokuWiki).
229
230---
231
232## Troubleshooting AJAX
233
234**Calendar not updating after save?**
235- Check browser console for errors (F12)
236- Verify JavaScript is enabled
237- Clear browser cache
238
239**"Access denied" errors?**
240- Check file permissions on data/meta/calendar/
241- Verify user has edit rights on page
242
243**Slow updates?**
244- Too many events? Archive old ones
245- Server overloaded? Check server resources
246
247**Still issues?**
248- Disable other plugins temporarily
249- Check DokuWiki error log
250- Test with browser console open (F12)
251