KakaoTalk Booking: Developing a Graph DFS-Based Time Block Calendar

A frontend developer from the KakaoTalk Booking Partner Center shared the technical challenges and solutions encountered while implementing a time block calendar. Following feedback that the existing card list UI made it difficult for sellers to grasp information, it became necessary to introduce a calendar that allows users to view inventory and booking status at a glance.

The core requirement was to optimize the placement of bookings, which can number up to 10 per time slot and last up to 6 hours, without leaving any empty spaces. The developer established rules considering visual priority: sorting by earliest usage time and, within the same time slot, placing bookings with longer durations first. This ensured that long bookings were placed at the front to prevent them from blocking expansion, allowing other blocks to secure space.

To enable block expansion, bookings were modeled using a Graph data structure. Each node holds information about its connection to previous/next bookings, its depth within the graph, and the maximum length to the end (maxLength). By applying formulas to calculate each node's position (left) and width (width) via DFS (Depth-First Search), booking blocks were arranged to fill available space as much as possible without overlapping.

In particular, the developer discovered edge cases where gaps remained between child nodes due to the width determination of the root node, and implemented additional logic to identify non-adjacent nodes and expand them by the minimum required space.