How I shipped a vertical week view without rewriting FullCalendar
Parmeet Singh
Project overview
Product needed the week view to render vertically instead of horizontally. On the surface it looked like a layout tweak. FullCalendar v3, the web component build we were on, did not support that layout at all.
I was a lead frontend engineer on Meltwater's publishing calendar. The stack was Vue with Stencil web components, and it supported week, month, and stacked views over schedules that could hold hundreds of posts. The question was whether we migrate the calendar stack or extend what we already had.
Confirm the gap
I confirmed the gap first. Vertical week layout was not a config flag or a CSS override. FullCalendar simply did not expose it. Day and stacked views could stay on the library. Week view needed something custom.
Weigh the options
That left two paths. Migrate to a calendar library that supported the new UX, or build a custom renderer on top of the existing system. Migration would improve long-term maintainability, but it came in around $200K and about three months of dedicated work. Delivery timeline and budget made that impossible.
I chose the custom renderer for week view only, and kept day and stacked on FullCalendar's existing configuration.
The original horizontal layout.
The new vertical layout.
Build the week-view renderer
The renderer had to look like FullCalendar and behave like it. That meant props-driven rendering, drag-and-drop, event handling, and seamless switching between views, without forking the whole calendar system.
The hard part was staying in sync with FullCalendar's internal data structures while owning custom UI logic. I spent most of the care on state consistency so existing flows did not break when week view went custom.
Because it was scoped to one view, maintenance stayed low. One vertical layout path, and the rest still on the library we already knew how to ship.
Outcome
Week view shipped with the vertical layout. Drag-and-drop, events, and view switching kept working. Day and stacked stayed on FullCalendar.
We avoided the library migration, roughly $200K and three months of dedicated work, without pausing the rest of the roadmap. The useful part was the tradeoff. Custom only where the library could not go, and leave the rest alone.
Tech used
Vue, Stencil web components, FullCalendar v3.
