{
    "componentChunkName": "component---src-pages-blog-mdx-frontmatter-slug-js",
    "path": "/blog/meltwater-calendar/",
    "result": {"data":{"mdx":{"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"How we saved $200k worth of costly rewrites?\",\n  \"date\": \"2026-02-01T00:00:00.000Z\",\n  \"slug\": \"meltwater-calendar\",\n  \"description\": \"Building a custom vertical week-view renderer for FullCalendar instead of a $200K library migration at Meltwater.\",\n  \"series\": \"Case Study\",\n  \"published\": true,\n  \"tint_color\": \"#dc684a\",\n  \"tags\": [\"Vue\", \"Stencil\", \"Web Components\", \"Frontend Development\", \"Case Study\"],\n  \"cover_src\": \"https://images.clickforcode.workers.dev/png/MeltwaterCaseStudy2.jpg\",\n  \"read_time\": 8\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar CaseStudySection = makeShortcode(\"CaseStudySection\");\nvar CaseStudySectionHeader = makeShortcode(\"CaseStudySectionHeader\");\nvar CaseStudySectionTitle = makeShortcode(\"CaseStudySectionTitle\");\nvar CaseStudySectionBody = makeShortcode(\"CaseStudySectionBody\");\nvar CaseStudyOverviewGrid = makeShortcode(\"CaseStudyOverviewGrid\");\nvar CaseStudyCard = makeShortcode(\"CaseStudyCard\");\nvar CaseStudyImage = makeShortcode(\"CaseStudyImage\");\nvar CaseStudyProcessStack = makeShortcode(\"CaseStudyProcessStack\");\nvar CaseStudyCaptionedImage = makeShortcode(\"CaseStudyCaptionedImage\");\nvar CaseStudyOutcomeGrid = makeShortcode(\"CaseStudyOutcomeGrid\");\nvar CaseStudyOutcomeImage = makeShortcode(\"CaseStudyOutcomeImage\");\nvar CaseStudyOutcomeStats = makeShortcode(\"CaseStudyOutcomeStats\");\nvar CaseStudyStat = makeShortcode(\"CaseStudyStat\");\nvar CaseStudyTechIcons = makeShortcode(\"CaseStudyTechIcons\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(CaseStudySection, {\n    mdxType: \"CaseStudySection\"\n  }, mdx(CaseStudySectionHeader, {\n    mdxType: \"CaseStudySectionHeader\"\n  }, mdx(CaseStudySectionTitle, {\n    mdxType: \"CaseStudySectionTitle\"\n  }, \"Project Overview\"), mdx(CaseStudySectionBody, {\n    mdxType: \"CaseStudySectionBody\"\n  }, mdx(\"p\", null, \"The project is a social media intelligence web app where users create, manage, and schedule posts across multiple platforms using a calendar.\"), mdx(\"p\", null, \"The application supports multiple calendar views such as week, month, and stacked layouts to help users visualize and plan their content pipeline.\"), mdx(\"p\", null, \"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.\"))), mdx(CaseStudyOverviewGrid, {\n    mdxType: \"CaseStudyOverviewGrid\"\n  }, mdx(CaseStudyCard, {\n    mdxType: \"CaseStudyCard\"\n  }, mdx(CaseStudyImage, {\n    src: \"https://images.clickforcode.workers.dev/png/MeltwaterUX.jpg\",\n    alt: \"Meltwater calendar product UX\",\n    mdxType: \"CaseStudyImage\"\n  })), mdx(CaseStudyCard, {\n    mdxType: \"CaseStudyCard\"\n  }, mdx(CaseStudyImage, {\n    src: \"https://images.clickforcode.workers.dev/png/MeltwaterCalender.webp\",\n    alt: \"Meltwater calendar week view\",\n    mdxType: \"CaseStudyImage\"\n  })))), mdx(CaseStudySection, {\n    mdxType: \"CaseStudySection\"\n  }, mdx(CaseStudySectionHeader, {\n    mdxType: \"CaseStudySectionHeader\"\n  }, mdx(CaseStudySectionTitle, {\n    mdxType: \"CaseStudySectionTitle\"\n  }, \"Process\"), mdx(CaseStudySectionBody, {\n    mdxType: \"CaseStudySectionBody\"\n  }, mdx(\"p\", null, \"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.\"), mdx(\"p\", null, \"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.\"), mdx(\"p\", null, \"I evaluated two possibilities to implement the required changes:\"), mdx(\"ol\", null, mdx(\"li\", null, \"Migrating to a new calendar library that supported new UX.\"), mdx(\"li\", null, \"Building a custom renderer on top of the existing system.\")), mdx(\"p\", null, \"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.\"))), mdx(CaseStudyProcessStack, {\n    mdxType: \"CaseStudyProcessStack\"\n  }, mdx(CaseStudyCaptionedImage, {\n    src: \"https://images.clickforcode.workers.dev/png/HorizontalCalnder.webp\",\n    alt: \"The original horizontal layout\",\n    caption: \"The original horizontal layout.\",\n    fit: \"contain\",\n    bg: \"#fff\",\n    mdxType: \"CaseStudyCaptionedImage\"\n  }), mdx(CaseStudyCaptionedImage, {\n    src: \"https://images.clickforcode.workers.dev/png/VerticalCalender.webp\",\n    alt: \"The new vertical layout\",\n    caption: \"The new vertical layout.\",\n    fit: \"contain\",\n    bg: \"#fff\",\n    mdxType: \"CaseStudyCaptionedImage\"\n  })), mdx(CaseStudySectionBody, {\n    mdxType: \"CaseStudySectionBody\"\n  }, mdx(\"p\", null, \"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.\"), mdx(\"p\", null, \"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.\"), mdx(\"p\", null, \"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.\"), mdx(\"p\", null, \"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.\"))), mdx(CaseStudySection, {\n    mdxType: \"CaseStudySection\"\n  }, mdx(CaseStudySectionHeader, {\n    mdxType: \"CaseStudySectionHeader\"\n  }, mdx(CaseStudySectionTitle, {\n    mdxType: \"CaseStudySectionTitle\"\n  }, \"Outcome\"), mdx(CaseStudySectionBody, {\n    mdxType: \"CaseStudySectionBody\"\n  }, mdx(\"p\", null, \"The custom renderer successfully enabled the vertical week view while preserving all existing calendar functionality.\"), mdx(\"p\", null, \"The solution met product expectations without requiring a full library migration, allowing us to stay within both timeline and budget constraints.\"), mdx(\"p\", null, \"Despite introducing the custom logic, the implementation was well structured to minimize the long-term technical debt and maintain compatibility with future updates.\"))), mdx(CaseStudyOutcomeGrid, {\n    mdxType: \"CaseStudyOutcomeGrid\"\n  }, mdx(CaseStudyOutcomeImage, {\n    mdxType: \"CaseStudyOutcomeImage\"\n  }, mdx(CaseStudyCard, {\n    mdxType: \"CaseStudyCard\"\n  }, mdx(CaseStudyImage, {\n    src: \"https://images.clickforcode.workers.dev/png/VerticalCalender.webp\",\n    alt: \"Vertical week-view calendar rendering\",\n    fit: \"contain\",\n    bg: \"#fff\",\n    mdxType: \"CaseStudyImage\"\n  }))), mdx(CaseStudyOutcomeStats, {\n    mdxType: \"CaseStudyOutcomeStats\"\n  }, mdx(CaseStudyStat, {\n    value: \"$200K\",\n    label: \"Development Cost avoided\",\n    mdxType: \"CaseStudyStat\"\n  }), mdx(CaseStudyStat, {\n    value: \"3 Months\",\n    label: \"Development time saved\",\n    mdxType: \"CaseStudyStat\"\n  })))), mdx(CaseStudySection, {\n    mdxType: \"CaseStudySection\"\n  }, mdx(CaseStudySectionHeader, {\n    mdxType: \"CaseStudySectionHeader\"\n  }, mdx(CaseStudySectionTitle, {\n    mdxType: \"CaseStudySectionTitle\"\n  }, \"Tech Used\"), mdx(CaseStudySectionBody, {\n    mdxType: \"CaseStudySectionBody\"\n  }, mdx(\"p\", null, \"Vue.js is used in conjunction with Web Components compiled via Stencil.js.\"))), mdx(CaseStudyTechIcons, {\n    technologies: [\"Vue\", \"Stencil\", \"Web Components\"],\n    mdxType: \"CaseStudyTechIcons\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{},"excerpt":"","frontmatter":{"published":true,"slug":"meltwater-calendar","title":"How we saved $200k worth of costly rewrites?","description":"Building a custom vertical week-view renderer for FullCalendar instead of a $200K library migration at Meltwater.","tags":["Vue","Stencil","Web Components","Frontend Development","Case Study"],"series":"Case Study","tint_color":"#dc684a","cover_src":"https://images.clickforcode.workers.dev/png/MeltwaterCaseStudy2.jpg","date":"1st Feb, 2026","read_time":8}}},"pageContext":{"id":"59a2064b-8b2b-53c9-8ce1-4a45ee041800","frontmatter__slug":"meltwater-calendar","__params":{"frontmatter__slug":"meltwater-calendar"}}},
    "staticQueryHashes": ["2419633199","3238812247","4257045614"]}