The Directory Got an Events Calendar. Here's How It All Came Together.

When I launched ThanetDirectory the plan was a business directory. A day later it also has a full events calendar with 706 real local events, a live calendar view, accordion filters, age group detection, auto-tagging and image cards with hover animations.

That was not the plan. But that is what happened.

Here is everything that got built.

Where It Started

The directory already had business listings, a map, search and a claim flow. The natural next step was events — Thanet has a genuinely active events scene across Margate, Ramsgate and Broadstairs and there was nowhere pulling it all together in one place.

The decision was made to import real events from Visit Thanet rather than seeding fictional ones. That turned out to be the right call. 706 real upcoming events from across the area went straight into the database, making the platform feel like a real resource rather than a demo on day one.

The Events Feature — What Was Built

Business owners can create and manage events directly from their dashboard. Each event has a title, description, location, start and end date and time, event type, age group suitability, tags, a general info link and a direct booking URL. The booking URL becomes the primary call to action button on the event card when set.

Age groups cover seven categories from under fives through to seniors and families. The logic is inclusive rather than strict — an all ages event always appears regardless of which age filter is selected, since all ages means exactly that.

Tags cover twenty predefined options including outdoor, indoor, dog friendly, wheelchair accessible, free entry, beachside, historic venue, live performance, workshop, craft fair and more. Business owners can also add custom tags beyond the predefined list. Tags are stored as a PostgreSQL array with a GIN index for efficient filtering.

The Import — 706 Real Events

Visit Thanet publishes event data and the import pulls from that source, parses each event and writes it to the database. After fixing a missing database column that had never been added despite existing in the migration file, the import ran successfully — 406 new events imported and 296 existing events updated with fresh data.

Past events are automatically skipped. Only events with an end date in the future make it through.

Two intelligent functions run on every imported event automatically.

The first detects age group from the event name and description using keyword matching. An event mentioning toddler or nursery gets tagged under fives. An event mentioning retirement or over 60 gets tagged seniors. Everything else defaults to all ages.

The second auto-tags events based on content. An event at a seafront location gets the beachside tag. Free entry in the description gets the free entry tag. References to workshops, craft fairs, live music, charity fundraising and seasonal events like Christmas or Halloween all trigger their corresponding tags automatically. This means every imported event arrives with meaningful tags without anyone having to add them manually.

The Events Page

The events page has three panels running side by side — a filter sidebar on the left, the event cards in the centre and a calendar on the right.

The filter sidebar uses an accordion design. When and Area sections are open by default. Type, Age Group and Tags sections are collapsed. Each section header shows a count badge when a filter is active so you can see at a glance what is applied. The number of event cards per page scales dynamically based on how many filter sections are open, since more open sections make the page taller and allow more cards to sit alongside without excess scrolling.

The calendar shows the current month with dot indicators on dates that have events. Clicking a date filters the event list to that specific day. The coming up panel below the calendar shows the next five events matching the current filters, switching to show events on the selected day when a date is picked.

The age filter uses inclusive logic. Selecting under fives shows all ages events alongside specifically under fives tagged events. Only events tagged for an incompatible group like adults only or seniors get excluded. This matters because most events default to all ages and a strict equality filter would have returned near zero results for most age selections.

The Event Card Redesign

The first card design had a small date block, a tiny thumbnail and a horizontal layout. It felt cramped.

The redesigned card uses a full width banner image at the top with a subtle zoom animation on hover. Frosted glass badge pills float over a dark gradient at the bottom of the image showing event type, whether it is free and the age group. The card body shows the title, date with icon and location. Clicking expands an inline detail section showing the full date and time, description, price, tags and action buttons.

Events without images get a compact badge strip instead of a banner, keeping the layout consistent without leaving an empty image placeholder.

Bugs Fixed Along the Way

The events list header was scrolling with the content instead of staying fixed at the top, which meant it fell out of alignment with the filter and calendar panel headers as you scrolled. Fixed by restructuring the panel to keep the header outside the scrollable area.

The per page card count logic was initially implemented backwards, showing fewer cards when more filter sections were open rather than more. Caught and fixed in the same session.

The age filter was using strict equality and returning zero results for most selections because all imported events defaulted to all ages. Fixed by switching to inclusive logic.

What Is Still Outstanding

The import needs re-running with the refresh existing option ticked to backfill auto-tags and age groups onto all 706 existing events. Currently 406 have full data and 296 have images but are missing tags and age group detection.

Recurring events are not built. Weekly markets, monthly club nights and annual festivals all need a recurrence pattern rather than a one-off date. This is noted as the most significant missing feature compared to established events platforms.

Facebook events integration was researched but not built. The technical approach is clear — a business connects their Facebook page via OAuth, the app stores a page access token and a scheduled job pulls upcoming events automatically. That goes on the roadmap.

What Comes Next

The directory now covers businesses and events in one place. The next session focuses on getting it deployed — fixing the remaining Stripe configuration, setting up email notifications, and getting thanetdirectory.com pointing at a live Vercel deployment.

Once it is live the events calendar becomes the first thing to share in local Facebook groups. A directory of 2,000 businesses and 706 real local events is a genuinely useful resource from day one.

Follow along at madewithprompts.co.uk