Event Planning & Budgeting

Plan corporate events with budget tracking, checklists, timelines, and variance reporting.

Overview

Event coordinators need one place to manage event details, line-item budgets, planning tasks, and milestones. This single-page browser app lists budget items in AG Grid, calculates planned vs actual variance, tracks a planning checklist and timeline, visualizes spend by category with Chart.js, and exports a multi-sheet Excel workbook. All data persists in localStorage.

Key features

Event details

• Editable event name, date, venue, and target attendee count in a header panel

Budget grid

• Sortable AG Grid with category, description, planned, actual, and variance columns
• Color-coded variance (red over budget, green under budget)
• Edit and Delete actions on each line item

Cost tracking

• Alpine.js form to add or edit budget lines with live variance preview
• Summary KPI cards: planned budget, actual spend, total variance, checklist progress

Checklist & timeline

• Planning checklist with add, complete, and remove tasks
• Event timeline with editable milestones, dates, and Pending / Upcoming / Done status

Charts & export

• Grouped bar chart: planned vs actual by category
• Export Excel with Event, Budget, Checklist, and Timeline sheets

Theme & persistence

• Dark mode toggle with remembered preference
• Event details, budget lines, checklist, and timeline saved to localStorage

Data & persistence

Sample data for a sales kickoff event loads on first visit. All edits persist in the browser. No server required.

Charts & reporting

Chart.js powers the budget breakdown chart. SheetJS handles Excel export with four worksheets.

Built with

Tailwind CSS, AG Grid Community, Alpine.js, Chart.js, and SheetJS — all loaded from CDN in a single HTML file.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.