Case Study • 1st Feb, 2026 • 8 mins read
How we saved $200k worth of costly rewrites?
Parmeet Singh
Project Overview
The project is a social media intelligence web app where users create, manage, and schedule posts across multiple platforms using a calendar.
The application supports multiple calendar views such as week, month, and stacked layouts to help users visualize and plan their content pipeline.
We received a new product requirement that introduced a major UX shift. The calendar views needed to render vertically instead of the existing horizontal layout. While this appeared to be a small visual change, the underlying calendar library did not support this capability, making it a non-trivial engineering problem.
Process
The application is built using Vue with web components powered by Stencil.js, and relies on FullCalendar v3 (web component version) for rendering the calendar view.
The new requirement exposed a limitation where FullCalendar did not support vertical layouts. This meant the change could not be achieved through a configuration change or minor overrides.
I evaluated two possibilities to implement the required changes:
- Migrating to a new calendar library that supported new UX.
- Building a custom renderer on top of the existing system.
The migration option would improve long-term maintainability of the app but would come with a very high cost (~$200K) and a timeline of around 3 months of dedicated development effort. Given the strict delivery timeline and budget constraints, we chose to build a custom renderer.
The original horizontal layout.
The new vertical layout.
The custom renderer was designed to replicate and extend the behavior of FullCalendar while introducing a new vertical layout system. The custom renderer was needed only for the Week view, while the Day and Stacked views we were able to support with the existing library configuration.
This involved building rendering logic driven by props, ensuring compatibility with existing features and views such as event handling, drag-drop interaction, and seamless switching between calendar views.
The key challenge I faced was maintaining synchronization with the internal data structures of FullCalendar while introducing custom UI logic. So, additional care was taken to manage state consistency and avoid breaking existing flows.
We ensured that this approach introduced the lowest maintenance overhead, and it allowed us to deliver the required UX without rewriting the entire calendar system.
Outcome
The custom renderer successfully enabled the vertical week view while preserving all existing calendar functionality.
The solution met product expectations without requiring a full library migration, allowing us to stay within both timeline and budget constraints.
Despite introducing the custom logic, the implementation was well structured to minimize the long-term technical debt and maintain compatibility with future updates.
Tech Used
Vue.js is used in conjunction with Web Components compiled via Stencil.js.
