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 recieved a new product requirement that introduced a major UX shift. The calender 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.
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:
The migration option would improve long-term maintainability of the app but would came with a very high cost (~$200K) and a timeline of around 3 months of dedicated development effort. But, Given the strict delivery timeline we had and the budget constraints, we had to chose to build a custom renderer.
Built a custom renderer aligned with FullCalendar’s internal specs.
Preserved drag-drop, events, and the view switching behavior.
The custom renderer was designed to replicate and extend the behavior of FullCalendar while introducing a new vertical layout system. The custom renderer was to 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 a 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.
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.
Vue.js is used in conjunction with Web Components compiled via Stencil.js.
OR
Write To Us At Your Own Convenience