A method and apparatus for displaying and scrolling a multi-member side-by-side view calendar

Abstract

The application discloses a kind of multi-member parallel view calendar display and linkage scrolling method and device, it is related to mobile phone calendar APP technical field, to solve the existing APP multi-member schedule viewing operation cumbersome, context is easily interrupted, intuitive difference and so on.The core scheme includes: through the head portrait track module and column container module establish 1:1 mapping, N visible head portrait slot position corresponds N schedule column;Linkage synchronization module maintains index and binding array, responds to horizontal scrolling and based on midline threshold triggers column replacement;Using column multiplexing mechanism realizes seamless roll-in and roll-out of excess members, combined with uniform time axis alignment strategy keeps date and longitudinal position unchanged;The application realizes the efficient parallel presentation and low cognitive switching of multi-person schedule, solves the pain points such as positioning confusion, switching lag of excess members, adapts to multi-scenarios such as family cooperation, team scheduling, significantly improves operation efficiency and user experience.

Description

Technical Field

[0001] This invention relates to the field of mobile calendar app technology, and in particular to a method and apparatus for displaying and scrolling a calendar with multiple members in a side-by-side view. Background Technology

[0002] With the rapid development of mobile internet technology, calendar apps have become indispensable tools in people's daily lives, work, and team collaboration. Their core functions are not limited to recording and reminding personal schedules, but extend to multi-member scenarios such as coordinating family affairs, scheduling team work shifts, arranging class courses, and scheduling store employees on duty. Users' needs for viewing multiple people's schedules in parallel and switching efficiently are becoming increasingly urgent.

[0003] The mobile calendar apps we use nowadays are inconvenient for multiple people to view. The first common problem is that you can only see one person's schedule at a time. If you want to switch to see someone else's, you either have to tap the tab at the top or pull out the side drawer to select the name. Switching back and forth requires several steps, which is not only tedious but also makes it easy to forget which day or event you were looking at, and the context is easily broken. If you want to compare the schedules of two people in the same time period, you have to switch repeatedly, which affects efficiency.

[0004] The second type only provides a "busy / free overview," using small colored squares to indicate who is busy and when, without showing specifics like meetings, classes, or errands, making it impossible to know the detailed schedule. A few apps allow horizontal scrolling through multiple schedule columns, but the person labels at the top and the schedule content below move separately. After scrolling, it's impossible to distinguish which schedule corresponds to which person, and there's no way to "move" people not displayed on the screen into the schedule. When there are many people, finding a specific person's schedule requires flipping through many pages, which is extremely chaotic.

[0005] At the same time, if you need to check more people (e.g., more than 8 people), the problem becomes even more prominent: you have no idea where the person you're looking for is in the list, and it's easy to get lost while scrolling around; when switching members, the dates don't match up, you might be looking at Wednesday's schedule, and when you switch to the next person, it automatically jumps to Monday, interrupting your view and forcing you to find the date you were looking for again; sometimes you see the avatar at the top, but the schedule column below isn't synchronized, and you might get confused about "which schedule column this avatar corresponds to," making things more and more confusing.

[0006] In summary, current mobile calendars, when multiple people view schedules simultaneously and quickly switch between them for comparison, are either cumbersome and involve many steps, or lack intuitiveness and are prone to errors. They fail to meet the demand for "simple, efficient, and easy-to-understand multi-person schedules," especially in scenarios requiring frequent browsing and rapid coordination, resulting in a poor user experience. Based on this, we propose a method and device for displaying and scrolling a calendar with multiple members in a side-by-side view. Summary of the Invention

[0007] A method and apparatus for displaying and scrolling calendars in a multi-member side-by-side view is proposed to solve the problems of cumbersome operation, easy interruption of context, and poor intuitiveness in existing mobile calendar apps when viewing multiple members' schedules. Through modular design and linkage mechanism, it achieves efficient parallel presentation, seamless switching, and low cognitive load interaction for a large number of members' schedules. The technical solution is as follows:

[0008] A method for displaying and scrolling a calendar in a multi-member side-by-side view includes the following steps:

[0009] S1: Display avatar conveyor module. The avatar conveyor module arranges multiple member avatars in a horizontal scrolling queue. The number of visible avatar slots is N, where N is an integer greater than 1. The avatar conveyor module supports horizontal scrolling by users through left and right swipes. The avatar conveyor module is encapsulated in a horizontal scrolling container, which linearly arranges all member avatar components. The size of the avatar components is uniformly set to 56×56dp, the slot spacing between components is 8dp, and the bottom of the components is marked with 2-3 characters of the member's name abbreviation, with a font size of 12sp. The transparency of the unselected avatar component is 80%. When it falls into a visible slot and does not cross a preset scrolling threshold, a 2dp blue border is added (theme customization is supported). The border remains highlighted after the center of the avatar crosses the center line of the slot. It supports inertial scrolling, automatically aligns with the slot after scrolling ends, blocks vertical scrolling response, and only accepts horizontal swipe gestures.

[0010] S2: Display column container module, which displays N schedule columns. Each schedule column corresponds to a visible avatar slot in the avatar conveyor module and displays the schedule information of the corresponding member. Each schedule column arranges schedule cards for the next few days from top to bottom according to date. The column container module adopts a horizontally evenly distributed layout, and the width of each column corresponds one-to-one with the avatar slot. The inside of the schedule column is a vertically scrolling container, and the cards support independent vertical inertial scrolling. The schedule cards are rendered differently according to the event type. Events for the whole day are filled with a solid color and display a maximum of 2 lines of titles. Events for a time period are filled with a solid color + a 1dp dark border and display 1 line of titles and time range. Events spanning multiple days are rendered in segments and marked with a "spanning multiple days" label. The column container module manages N column rendering instances through a component reuse pool. During scrolling, only the instance data source and binding relationship are replaced, and the instance is not destroyed or rebuilt.

[0011] S3: The linkage synchronization module maintains an avatar index array and a column binding array. The avatar index array contains avatar information for all members (including member identifier, avatar resource path, whether it is fixed at the top, busy / idle status marker, etc.). The column binding array is used to form a 1:1 mapping relationship between each visible avatar slot in the avatar conveyor module and the corresponding schedule column in the column container module, so that at any given time, the i-th avatar in the top area will necessarily be mapped to the i-th schedule column below, where i is an integer from 1 to N. The linkage synchronization module calculates the starting index of the currently visible avatar using the formula "Current visible starting index = Math.floor((offsetX + slot width / 2) / total slot width)", thereby determining the complete set of visible avatars. When the center coordinate of an avatar crosses the center line coordinate of its slot, it is determined to have crossed a preset scrolling threshold, triggering an update of the column binding array. If it does not cross the preset scrolling threshold, it stops scrolling and automatically rolls back to the original set of visible avatars.

[0012] S4: Responds to horizontal scrolling operations, calculates scroll offset to determine the new set of visible avatars, and updates the column binding array to seamlessly replace the schedule column with the corresponding member schedule; when crossing a preset scrolling threshold, triggers the column reuse mechanism, reusing the rendering instance of the off-screen edge column as the newly entered member schedule column, achieving continuous scrolling in and out of an excessive number of members; during scrolling, the avatars and schedule columns scroll synchronously, and the time axis alignment and vertical scrolling position remain unchanged when the schedule column is replaced; the horizontal scrolling operation is decoupled from the main rendering thread through a scrolling damping mechanism, and the request frame technology is used to ensure a stable scrolling frame rate of 60fps; column replacement uses a fade-in or displacement animation of 80-150 milliseconds, and the single linkage response latency is ≤20ms.

[0013] As a further optimization of the present invention, a timeline alignment maintenance strategy is also included. Specifically, when the schedule column in the column container module is replaced with the schedule information of a new member, the same date alignment and the same vertical scrolling position are maintained to avoid interruption of the user's visual context due to member switching. The timeline alignment maintenance strategy is achieved by maintaining a unified date starting point and day grid alignment. A day grid system is established with the current date 00:00 as a unified reference point. The schedule cards in each schedule column are arranged with the current date as the reference, ensuring that the time scale of each column is completely consistent. This strategy effectively solves the problem of date misalignment when switching members in the existing calendar, ensures the continuity of user browsing, and improves information acquisition efficiency.

[0014] As a further optimization of the present invention, a lazy loading and differential update mechanism is also included. Specifically, the schedule data for the next few days is loaded only for the member corresponding to the currently visible avatar, and the schedule data of new members is fetched on demand when the column binding array is updated. Before the fetching is completed, a gray skeleton screen loading placeholder is displayed. The differential update method is adopted, and the schedule data of the loaded members is cached locally. When entering the visible area again, only the events added, modified or deleted since the last loading are requested. The differential data is filtered by member identifier + time range to avoid loading all the schedule data of all members at once. The lazy loading and differential update mechanism is implemented through a data module. The data module stores the schedule event structure of each member. The schedule event structure includes member identifier, event start time, event end time, all-day event flag and event metadata (including event color, title, location, reminder time, participants, etc.). This mechanism greatly reduces the amount of network data transmission and system resource occupation, and improves data loading speed and application running smoothness.

[0015] As a further optimization of the present invention, the preset scrolling threshold is set based on the center position of the avatar slot or 50% of the avatar width. When the center of the avatar crosses the center position or 50% of the avatar width, it is determined to have crossed the preset scrolling threshold and triggers column replacement. The column replacement uses tweening animation, which includes fade-in animation or displacement animation. The animation duration is 80 milliseconds to 150 milliseconds (default 100ms, supports parameterized adjustment). The horizontal scrolling operation and column mapping update are decoupled from the main rendering thread through a scrolling damping mechanism. Throttling technology or request frame technology is used to ensure that the scrolling frame rate reaches 60fps. This optimization scheme reduces the user's visual perception jump through precise threshold determination and smooth animation effects, while ensuring smooth response of scrolling operation and improving the interactive experience.

[0016] As a further optimization of the present invention, the column reuse mechanism specifically includes: when crossing a preset scrolling threshold, identifying the leftmost or rightmost off-screen edge column in the column container module; replacing the data source and avatar mapping of the rendering instance of the off-screen edge column with the schedule information of the newly entered visible area, and updating the column binding array at the same time; the column reuse mechanism supports a circular queue or a queue with head and tail buffers to achieve seamless cyclic scrolling of the avatar conveyor belt. This mechanism avoids frequent creation and destruction of column rendering instances, effectively reducing memory overhead and rendering latency, and ensuring scrolling smoothness in scenarios with a large number of members.

[0017] As a further optimization of the present invention, an exception and boundary handling strategy is also included. Specifically, when the number of members is less than N, placeholders (gray humanoid icons for avatars and light gray "No Members" prompt text for schedule columns) are used to fill empty avatars or empty schedule columns in the avatar conveyor module and column container module. Users can add or replace these empty avatars using the "Add Member" button. When the number of members exceeds N, a circular buffer strategy or a dynamic expansion strategy is used to manage the avatar conveyor queue. Gradient shadows are added to both ends of the avatar conveyor to indicate the scrolling direction and ensure smooth scrolling. For all-day events and multi-day events, a grid layout is used in the schedule column to visualize the duration of the events. All-day events occupy the entire grid of the corresponding date, while multi-day events are rendered in segments and labeled with "Start," "Ongoing," and "End" indicators. Multiple events on the same date are sorted by their start time, and overlapping events are displayed in layers (5dp offset vertically and 80% transparency). This strategy comprehensively covers various exception scenarios and special events, ensuring the integrity of the view structure and the accuracy of information display, and improving application robustness.

[0018] As a further optimization of this invention, it also includes enhanced interaction and usability features, specifically: supporting users to directly jump to the corresponding member's schedule by tapping their avatar; the system calculates the distance between the avatar and the visible slot and scrolls smoothly, while maintaining a 1:1 mapping between the avatar track and the schedule; providing member pinning or top-pinning functions; users can long-press on an avatar to select "pin," supporting up to 3 pinned members; pinned avatars display a small lock icon in the upper right corner, and pinned members always remain in the visible slot, with other avatars scrolling in / out around them; supporting filtering based on busy / idle status or the presence or absence of events, displaying only members with events to simplify the view; integrating accessibility features, including providing readable names with the full member's name for avatars, setting a focus order consistent with the sorting order, and providing button controls equivalent to gesture operations (scroll left, scroll right, refresh, filter), adapting to screen readers and keyboard operations. This optimization enriches the interaction methods, meets the needs of different users, and improves the ease of use and universality of the application.

[0019] As a further optimization of the present invention, the method is compatible with mainstream Android (Android 10 and above) and iOS (iOS 14 and above) mobile devices, supports the adjustment of the number of visible avatar slots N in the range of 4-8 (6 by default), and the display period of the calendar column can be switched to 3 days, 7 days, and 14 days (7 days by default). The core performance indicators ensure a stable scrolling frame rate of 60fps, a column replacement animation duration of 100ms, and a single linkage response latency of ≤20ms. This adaptation and parameter configuration function enables the application to be compatible with different screen sizes and user habits, improving the versatility and flexibility of the application.

[0020] A calendar display and linked scrolling device for a multi-member side-by-side view, applied to the calendar display and linked scrolling method for a multi-member side-by-side view described above, the device includes an avatar conveyor module, a column container module, a linkage synchronization module, a data and timeline module, and an interaction enhancement module, with each module achieving collaborative linkage through interface calls:

[0021] Avatar conveyor module: used to display a horizontal scrolling queue of all member avatars, respond to scrolling operations, and provide visual status feedback, ensuring that the positions of the avatars and the schedule column correspond accordingly;

[0022] Column container module: used to display N fixed schedule columns, and to handle the differentiated rendering of schedule cards, independent vertical scrolling, and the reuse management of column rendering instances;

[0023] Linkage and synchronization module: used to maintain the avatar index array and column binding array, realize the calculation of scroll offset, threshold determination, mapping relationship update and linkage control between avatar and calendar column;

[0024] Data and Timeline Module: Used for storing, lazy loading, and differential updating of schedule event data, as well as establishing a unified timeline benchmark and maintaining date alignment;

[0025] Interaction Enhancement Module: This module is used to implement enhanced interactive functions such as tap-to-access, fixed members, filtering, and barrier-free access, thereby improving user operation convenience and application usability.

[0026] Compared with the prior art, the beneficial effects of the present invention are as follows:

[0027] 1. This invention employs a strict 1:1 mapping design between avatars and schedule columns. At any given time, the i-th avatar in the top area corresponds to the i-th schedule column below, ensuring stable user spatial memory and eliminating the need to re-locate the correspondence. During scrolling, avatars and schedule columns respond synchronously, eliminating the cumbersome operations of traditional tab switching or hierarchical jumps and completely resolving the pain point of easily losing context. Users can intuitively locate corresponding schedules by avatar, quickly compare multiple people's concurrent schedules, and are particularly well-suited for multi-member collaborative scenarios such as family task coordination and team scheduling, significantly reducing cognitive load and improving schedule browsing and switching efficiency.

[0028] 2. This invention, relying on a column reuse mechanism and a conveyor belt scrolling logic, breaks through the limitations of simultaneous display on mobile screens. Even with more than 10 members, seamless scrolling in and out of the extra members can be achieved through left and right swiping. Users can view N member schedule columns at once, forming a clear "queue sense" during scrolling, clearly perceiving the relative positions of members and avoiding the problem of confusing member positioning in traditional views. It supports the expansion of multiple members without changing the main view structure, allowing users to browse the future schedules of all members like browsing a "team," achieving efficient panoramic viewing of multi-person schedules.

[0029] 3. This invention employs a unified date base and grid alignment strategy, maintaining the same date alignment and vertical scrolling position when switching members. This completely resolves the pain points of traditional calendars where date misalignment and the need to re-search for the target date occur when switching members. Users can remain within the original area of ​​interest after switching members, ensuring uninterrupted visual context and eliminating the need to readjust the view, allowing them to focus on comparing schedule content. This seamless design significantly reduces the cost of context switching, improves the smoothness of obtaining schedule information from multiple users, and makes cross-member schedule comparison more efficient.

[0030] 4. This invention combines lazy loading and differential update mechanisms, loading only the schedule data of currently visible members on demand and refreshing only changed content, avoiding loading all data at once and significantly reducing network transmission volume and system resource consumption. Simultaneously, scroll damping and request frame technology ensure a stable 60fps frame rate, and 80-150ms tweening animation enables seamless replacement of schedule columns without visual jumps. Even in scenarios with a large number of members, it maintains smooth scrolling without lag, balancing efficient utilization of mobile resources with a superior interactive experience, and solving the problems of slow loading and lag when switching between traditional multi-user calendars.

[0031] 5. This invention offers rich interactive enhancements to meet personalized operation needs. Features such as tapping an avatar to directly access the corresponding schedule column, pinning members to the top, and filtering by busy / idle status improve ease of use. Its accessibility design covers different user groups, expanding the application's applicability. Furthermore, for abnormal scenarios such as insufficient / excessive member counts or cross-day events, placeholder filling, circular buffering, and grid layout strategies ensure the integrity of the view structure and the accuracy of information. Adaptable to diverse scenarios such as families, teams, classes, and store duty shifts, significantly improving the application's practicality, reliability, and versatility. Attached Figure Description

[0032] Figure 1 This is a schematic diagram illustrating the architecture of the present invention;

[0033] Figure 2 This is a diagram of the overall module collaborative architecture of the present invention;

[0034] Figure 3 This is the 1:1 mapping base diagram for the initialization phase of this invention;

[0035] Figure 4 This is a diagram illustrating the linkage scrolling triggering and threshold judgment of the present invention;

[0036] Figure 5 This is a flowchart of the column reuse and mapping update process of the present invention;

[0037] Figure 6 This is a schematic diagram illustrating the interactive enhancement function of the present invention. Detailed Implementation

[0038] The present invention will now be further described in conjunction with the accompanying drawings and specific embodiments. It should be noted that, without conflict, the various embodiments or technical features described below can be arbitrarily combined to form new embodiments.

[0039] This embodiment uses family scheduling (11 members including parents, children, and elderly) and team work scheduling (project groups of 10 or more people) as typical application scenarios. It is compatible with mainstream Android (Android 10 and above) and iOS (iOS 14 and above) mobile devices. The core parameters are set as follows to ensure compatibility with screen size and interaction habits:

[0040] Total number of members M: Supports expansion to more than 10 people (in this embodiment, M=11, and the member identifiers are A, B, C, D, E, F, G, H, I, J, K);

[0041] The number of visible avatar slots, N, is 6 by default (compatible with 4.7-6.7 inch mobile phone screens, providing clear display on a single screen without any crowding; users can adjust this to 4-8 slots in the settings).

[0042] The schedule column displays the next 7 days by default (based on the current date, arranged from top to bottom from base date +0 to base date +6), and users can switch to 3-day or 14-day modes.

[0043] Key performance metrics: Stable scrolling frame rate of 60fps, column replacement animation duration of 100ms (can be parameterized within the range of 80-150ms), and single-link response latency ≤20ms.

[0044] The hardware architecture of this embodiment is based on the display module, touch input module (supporting multi-touch and gesture recognition), processor module and storage module of the mobile terminal; the software architecture consists of avatar conveyor module, column container module, linkage synchronization module, data and timeline module and interaction enhancement module, and each module achieves collaborative linkage through interface calls.

[0045] II. Detailed Implementation of Core Modules

[0046] (a) Headshot Track Module

[0047] Layout Design: A horizontally scrolling container is used to encapsulate all member avatar components in a linear arrangement. The horizontal scrollable area of ​​the container covers the entire queue of member avatars (supporting circular expansion). The avatar component size is uniformly set to 56×56dp, with an 8dp spacing between component slots. The bottom of each component displays the member's initials (2-3 characters, 12sp font size) to ensure clear visual recognition.

[0048] Visual feedback: The transparency of the avatar component in the unselected state (not falling into the visible slot or not crossing the preset scroll threshold) is 80%; when it falls into the visible slot and does not cross the preset scroll threshold, a 2dp blue border is added (the border color can be customized with the theme); when the center of the avatar crosses the center line of the slot, the border color remains highlighted, and the corresponding schedule column below is triggered to prepare for replacement, enhancing the association guidance of "avatar-column".

[0049] Scrolling features: Supports inertial scrolling (scrolling decay coefficient 0.92), automatically aligns the slots after scrolling ends—that is, ensures that each visible slot fully displays an avatar, avoiding a half-revealed avatar; at the same time, it blocks vertical scrolling response, only accepts horizontal swipe gestures to prevent accidental operation.

[0050] (ii) Column container module

[0051] Column layout structure: A horizontally evenly distributed layout is used to support N schedule column components. The width of each column corresponds one-to-one with the avatar slot (total width including spacing = (56+8) dp), and the column spacing is 8dp, which is horizontally aligned with the slots of the avatar conveyor module. The schedule column uses a vertical scrolling container to hold schedule cards. The card height is set according to "1 day = 80dp", and it supports independent vertical scrolling (the vertical scrolling offset is stored independently and does not affect the horizontal linkage relationship). Vertical scrolling also supports inertia decay.

[0052] Calendar card rendering: Calendar cards are encapsulated using rounded rectangles (rounded corner radius 4dp) and displayed differently based on event type.

[0053] All-day events: solid color fill (no extra border), background color defined by event category (e.g., blue for work, orange for family), event title displayed in the card (maximum 2 lines, any excess is omitted with "...");

[0054] Time period event: solid color fill + 1dp border, border color is 20% darker than background color, the event title (1 line) and time range (e.g. "09:30-11:00", font size 11sp) are displayed inside the card.

[0055] Cross-day events: A segmented rendering method is used to display event fragments in the calendar card of the corresponding date, marked with a "cross-day" label to ensure the visualization of time continuity.

[0056] Column reuse mechanism carrier: The schedule column rendering instance is managed by a component reuse pool. During initialization, N column rendering instances are created (consistent with the number of visible slots). During scrolling, only the data source and binding relationship of the instance are replaced, without destroying or rebuilding the instance, thus reducing memory usage and rendering overhead. For example, when swiping left, the instance of the leftmost off-screen column is directly reused in the newly entered visible slot on the right, and only the member identifier and schedule data are updated.

[0057] (III) Linkage and Synchronization Module

[0058] Core array maintenance:

[0059] Avatar Index Array: Stores complete information for all members, including member ID, avatar resource path, whether it is fixed at the top, busy / idle status flag, etc. The array index is consistent with the original order of members in the conveyor queue;

[0060] Column binding array: Length N, each element stores the member identifier, data source pointer, and vertical scroll offset of the corresponding schedule column binding, ensuring a 1:1:1 mapping relationship between "visible slot i-column i-member i".

[0061] Scroll offset calculation: Real-time capture of the horizontal scroll offset (offsetX), combined with the width of the avatar component and the slot spacing, calculates the starting index of the avatar currently falling into the visible slot using the formula "Current visible starting index = Math.floor((offsetX + slot width / 2) / total slot width)", thereby determining the complete set of visible avatars.

[0062] Threshold determination logic: When the center coordinate (x-axis) of a member's avatar crosses the center coordinate (left boundary of the slot + slot width / 2) of its slot, it is determined that the preset scrolling threshold has been crossed, triggering the column binding array update and schedule column replacement; if the preset scrolling threshold has not been crossed, the system will stop and automatically roll back to the original set of visible avatars, maintaining the original mapping relationship.

[0063] (iv) Data and Timeline Module

[0064] Event data structure: Schedule events are stored uniformly in JSON format, with fields including:

[0065] Basic fields: memberId (member identifier, consistent with the avatar index array), start (event start time, timestamp format), end (event end time, timestamp format), allDay (all-day event flag, boolean value);

[0066] Extended fields include metadata such as color (event color value, hexadecimal format), title (event title), location (location), reminder (reminder time), and participants (participants).

[0067] Timeline alignment mechanism: Using the current date 00:00 as a unified reference point, a day grid system is established. The vertical axis of each schedule column is divided into grids according to "days". Each grid corresponds to a time range of one day (00:00-24:00). The schedule card is positioned in the corresponding grid according to the start and end time of the event - for example, an event from 13:00 to 15:00 will start rendering at the height of 13 / 24 of the corresponding date grid, with a height ratio of 2 / 24.

[0068] Lazy loading and incremental updates:

[0069] Lazy loading: Only the schedule data for the corresponding display period is fetched for the N currently visible members. Data for members not yet in the visible area is not loaded. When a member is "scrolled into" the visible area, asynchronous data retrieval is triggered. Before the retrieval is complete, a loading placeholder (gray skeleton screen) is displayed.

[0070] Differential Update: The local cache has already loaded the members' schedule data. When entering the visible area again, only "events added, modified or deleted since the last load" are requested from the server. Differential data is filtered by member ID and time range, which greatly reduces the amount of data transmission.

[0071] (v) Interaction Enhancement Module

[0072] Tap to Access Function: When a user taps any avatar in the avatar conveyor belt (regardless of whether it is in a visible slot), the system calculates the distance between the avatar and the visible slot, moves it to the nearest visible slot through smooth scrolling, and updates the column binding array so that the corresponding schedule column below switches to the schedule data of that member. The frame rate is maintained at 60fps during scrolling.

[0073] Member pinning / pinning: Users can long-press on an avatar to bring up an operation menu. After selecting "pin", the avatar will always remain in the currently visible slot. When scrolling the track, other avatars will "roll in / roll out" around it. Up to 3 members can be pinned. A "pinned icon" (small lock icon) will be displayed in the upper right corner of the pinned avatar. To unpin, you can long-press the menu again.

[0074] Filtering function: Offers two filtering dimensions, which users can switch between using the filter button at the top:

[0075] Busy / Idle Filter: Only display members with scheduled events; hide the avatars and schedule columns of members without events; visible slots are automatically filled with subsequent members.

[0076] Event type filtering: Supports filtering by type such as work, family, study, etc., and only displays members with events under that type and their corresponding schedules.

[0077] Accessibility: Configure a readable name (full member name) for each avatar component, supporting screen reader reading; set the focus order to be consistent with the avatar arrangement order, support keyboard arrow keys to control scrolling and selection; provide button controls equivalent to gesture operations (scroll left, scroll right, refresh, filter), adapted for operation by users with physical disabilities.

[0078] III. Implementation of Core Workflows

[0079] (I) Initialization Phase

[0080] Module startup: After the user enters the multi-member calendar view, the system initializes the five core modules in sequence and loads the user-preset configuration information such as the number of visible slots N, display period, and animation parameters.

[0081] Array initialization: The avatar index array is sorted according to the user-defined members (default is ascending order of name pinyin, custom sorting is supported) and all member information is loaded; the column binding array is initially bound to the first N members, that is, column i (i∈[1,N]) is bound to the member with index i-1 in the avatar index array.

[0082] Time axis calibration: Based on the current system date, generate a list of dates within the display period and synchronize it to all schedule columns to ensure that the time scales of each column are perfectly aligned.

[0083] Initial data loading: Triggers the lazy loading mechanism, only fetching the schedule data of the initially bound N members. After loading is complete, the schedule card is rendered, and dates without data are displayed as blank cells (light gray background).

[0084] (II) Coordinated Rolling Phase

[0085] Scrolling operation response: When the user swipes left or right on the avatar's conveyor belt, the system captures the scrolling direction and offset in real time. The scrolling operation is decoupled from the main rendering thread through a scrolling damping mechanism. The rendering rhythm is controlled by requestAnimationFrame technology to ensure that the frame rate is stable at 60fps and avoid scrolling stutters.

[0086] Visible Avatar and Threshold Judgment: The set of visible avatars is dynamically calculated based on the scroll offset, while the relationship between the center position of each avatar and the center line of its slot is detected in real time. For example, when the user swipes left, the original visible starting index is 0 (member AF). As the offset increases, the avatar of member G enters the visible area from the right. When the center of member G's avatar crosses the center line of its target slot (the slot where member A was originally located), it is determined that a preset scroll threshold has been crossed.

[0087] Mapping updates and column replacements:

[0088] Column-bound array update: The linkage synchronization module shifts all elements of the column-bound array one position to the left, unbinds member A at the original index 0, and binds member G at the new index 5, forming a new mapping relationship (members BG correspond to columns 1-6).

[0089] Schedule column replacement: The column container module responds to the update command, reuses the original off-screen column 1 (member A) instance, replaces its data source with the schedule data of member G, and starts a fade-in animation (gradually changing from 0% transparency to 100% for 100ms); other columns keep their data unchanged, only adjusting their horizontal position synchronously to ensure visual continuity;

[0090] Timeline alignment: The replaced column 1 (member G) maintains the same date alignment and vertical scroll position as other columns—for example, if the user previously scrolled vertically to the base date + 3 (day 4), the replaced column will remain in that date area without interrupting the user's visual context.

[0091] (III) Anomaly and Boundary Handling Phase

[0092] If the number of members is less than N: When the total number of members M < N, a default placeholder avatar (gray humanoid icon) is displayed in the empty avatar slot, and the corresponding schedule column below displays the message "No members" (centered, light gray font) to maintain the integrity of the view structure; users can add members by clicking the "Add Member" button, and the placeholder will be automatically replaced after the addition.

[0093] For groups with more than N members: A circular buffer queue is used to manage the avatar conveyor queue. When scrolling to the end of the member list (e.g., member K) and continuing to swipe right, the leftmost off-screen column (e.g., member B) is reused as member A's schedule column, achieving seamless circular scrolling and making the queue boundaries imperceptible to the user. At the same time, a faint gradient shadow (transparency decreasing from 100% to 0%) is added to both ends of the avatar conveyor to indicate the scrolling direction.

[0094] Special event handling: All-day events occupy the entire grid of the corresponding date; cross-day events display a "Start" indicator on the start date and a "End" indicator on the end date, with an "Ongoing" indicator for the dates in between. The duration of the event is clearly presented through the grid arrangement. If there are multiple events on the same date, they are sorted from top to bottom according to the start time. When events overlap, they are displayed in a stacked manner (5dp offset vertically, 80% transparency) to avoid occlusion.

[0095] (iv) Data update phase

[0096] Active refresh: When a user pulls down the schedule column area to trigger a global refresh, the system re-fetches the latest schedule data for the currently visible N members and uses an differential update method to replace only the changed events. For example, if member B adds a meeting event, only the card for that date in member B's schedule column will be refreshed, while other columns remain unchanged.

[0097] Passive update: When the server pushes a schedule change notification (such as someone else modifying a shared schedule), the system only pulls the difference data for the corresponding time period of that member based on the memberId and time range in the notification, and updates the cards in the corresponding schedule column without the need for a global refresh, thus improving response speed.

[0098] The implementation process of multi-member side-by-side view calendar display and linked scrolling principle:

[0099] The core of this patented technology is to achieve continuous parallel presentation and low-awareness switching of a large number of members' schedules within the limited visual width of a mobile device through an integrated linkage mechanism of "avatar conveyor belt - schedule column". Its working principle revolves around six core links: module initialization, linkage triggering, mapping update, column reuse optimization, data loading, and interaction enhancement, as detailed below:

[0100] I. Initial Configuration: Laying the Foundation for Collaboration

[0101] When the application starts or enters a multi-member calendar view, the system first completes the initialization configuration of the core modules, providing underlying support for subsequent linked scrolling:

[0102] Module parameter settings: Specify the number of visible avatar slots N in the avatar conveyor module (N is an integer greater than 1, such as 6 by default), and at the same time, configure N schedule column slots in the column container module to ensure that the number of avatar slots and schedule column slots are equal.

[0103] Data structure initialization: Two core arrays are created through the linkage synchronization module: the avatar index array (stores the avatar information and member identifier of all members) and the column binding array (establishes a 1:1 mapping relationship between "visible avatar slots and schedule columns"). In the initial state, the avatars of the first N members are bound to the schedule columns in order, that is, the i-th avatar slot in the top area corresponds to the i-th schedule column below (i∈[1,N]).

[0104] Time axis benchmark calibration: The data and time axis module uses the current date as a unified benchmark to establish a day grid alignment system. All schedule cards in the schedule column are arranged from top to bottom according to "future several days (e.g., 7 days)" to ensure that the time scale of each column is completely consistent.

[0105] Initial data loading: Based on the lazy loading mechanism, only the schedule data of the next few days is pulled for the N members that are initially visible. The data format follows the preset event structure (including member ID, event start and end time, all-day event flags, event metadata, etc.) to avoid wasting resources by loading all member data at once.

[0106] II. Linked Trigger: Responding to user scrolling operations

[0107] When a user interacts with the avatar track module by swiping left or right, the system initiates a synchronized scrolling response process. The core of this process is to achieve real-time seamless integration of the scrolling action and module interaction.

[0108] Scroll signal capture: The system captures the user's horizontal scrolling operation in real time, records the scrolling direction (left swipe / right swipe) and scroll offset (offsetX), and decouples the scrolling operation from the main rendering thread through a scrolling damping mechanism. Throttling technology or request frame technology is used to ensure that the frame rate is stable at 60fps during the scrolling process to avoid stuttering.

[0109] Visible avatar set calculation: Based on the scroll offset, the system dynamically calculates the set of member avatars currently falling into the visible avatar slot. For example, when swiping left, the leftmost avatar in the original visible slot gradually moves out of the view window, and the undisplayed member avatars are "rolled in" into the visible area from the right, and vice versa.

[0110] Threshold judgment trigger condition: The system detects the position change of the avatar in real time during the scrolling process. When the center of a member's avatar crosses the center line of its slot (or 50% of the avatar width), it is determined that the preset scrolling threshold has been crossed, triggering the subsequent column binding update and schedule column replacement process.

[0111] III. Mapping Update: Maintain 1:1 linkage relationship

[0112] Once the preset scrolling threshold is exceeded, the linkage synchronization module initiates a mapping update to ensure a strict correspondence between "avatar position - schedule column content":

[0113] Column binding array update: The linkage synchronization module updates the column binding array again based on the new set of visible avatars, and rebinds the member identifier corresponding to each visible avatar slot to the data source pointer of the schedule column below, ensuring that at any time the i-th avatar in the top area will be mapped to the i-th schedule column below, without destroying the user's spatial memory.

[0114] Synchronous replacement of schedule column content: The column container module responds to the update command of the column bound array, seamlessly replacing the data source of each schedule column with the schedule data of the newly bound member. During the replacement process, tween animation (fade-in or displacement animation) is enabled, and the animation duration is controlled within 80-150 milliseconds to avoid visual abruptness and ensure smooth transition.

[0115] Timeline alignment is maintained: When the content of the schedule column is replaced, the system strictly implements the timeline alignment strategy—maintaining the original date alignment and vertical scroll position (for example, if the user previously browsed to the "Thursday" area, they will still stay in that area after switching members). Through a unified date start point and day grid alignment mechanism, the system avoids interruption of the user's visual context.

[0116] IV. Column Reuse Optimization: Achieving Seamless Wrap-in / Wrap-out of Excess Members

[0117] When the total number of members exceeds the number of visible slots N, the system solves the dual problems of "accommodating excessive members" and "performance optimization" through column reuse mechanism. The core is to reuse the rendering instances of off-screen columns rather than rebuilding them:

[0118] Off-screen edge column recognition: After crossing the preset scrolling threshold, the system automatically recognizes the leftmost (when swiping left) or rightmost (when swiping right) off-screen edge column in the column container module - the column has been completely moved out of the user's visible area, and its rendering instance is still in memory and has not been destroyed.

[0119] Rendering instance reuse and data replacement: The rendering instances of off-screen edge columns can be directly reused as the schedule columns corresponding to newly entered members in the visible area. Only the data source (the schedule data of the new member) and the avatar mapping relationship are replaced. There is no need to recreate the column rendering instances, which greatly reduces system overhead.

[0120] Circular scrolling support: The column reuse mechanism supports circular queues or queues with head and tail buffers. When scrolling to the head and tail boundaries of the member list, the farthest off-screen column can be reused to the visible slot at the other end, achieving seamless circular scrolling of the avatar conveyor belt, so that users are not aware of the boundary limitations of the member list.

[0121] V. Data Loading Optimization: Lazy Loading and Incremental Update Collaboration

[0122] During the linked scrolling process, data loading always follows the principle of "on-demand allocation and minimum refresh" to ensure a balance between response speed and resource utilization.

[0123] On-demand data retrieval: When the column binding array is updated, if the newly bound member has not been loaded with the corresponding time period's schedule data, the data module will automatically trigger on-demand data retrieval, only retrieving the schedule data for the next few days of that member, without loading additional data for other unseen members.

[0124] Differential updates reduce redundancy: If a member's schedule data has been partially loaded (e.g., they have previously entered the visible area), the system only detects and refreshes the changed schedule data (e.g., added, modified, or deleted events), without having to reload all the data, further improving response efficiency.

[0125] Data caching management: Loaded member schedule data will be temporarily cached. When a member re-enters the visible area, the data will be read from the cache first, and will only be retrieved again when the data expires or changes, thus reducing the frequency of network requests.

[0126] VI. Enhanced Interaction and Exception Handling: Improving Usability and Robustness

[0127] Based on the core collaborative processes, the system optimizes the user experience through interactive enhancements and handles various abnormal scenarios through boundary handling strategies:

[0128] Diverse interaction support:

[0129] Tap to access: Users can directly tap any avatar in the avatar conveyor. The system will quickly update the column binding array, jump the schedule column corresponding to that avatar to the visible area and maintain a 1:1 mapping.

[0130] Member pinning: Allows users to pin the avatar of a specific member to the top or fix it in a visible slot, unaffected by scrolling.

[0131] Filtering: Provides filtering functionality based on busy / idle status or the presence or absence of events, displaying only members with scheduled events to simplify the view;

[0132] Accessibility: Configure readable names and focus order for all avatars, while providing button controls equivalent to gesture operations to adapt to different user needs.

[0133] Anomaly and Boundary Scene Handling:

[0134] Insufficient number of members N: When the total number of members is less than the number of visible slots N, placeholders are displayed in the empty avatar slots and calendar column slots to maintain the integrity of the view structure;

[0135] Excessive number of members: Manage the avatar conveyor queue through a circular buffer or dynamic expansion strategy to ensure smooth scrolling even when the number of members exceeds 10.

[0136] Special event visualization: For all-day events and multi-day events, a grid layout is used to intuitively present the duration of the event, avoiding ambiguity in the time dimension.

[0137] The above embodiments are merely preferred embodiments of the present invention and should not be construed as limiting the scope of protection of the present invention. Any non-substantial changes and substitutions made by those skilled in the art based on the present invention shall fall within the scope of protection claimed by the present invention.

Claims

1. A method for displaying and scrolling a calendar in a multi-member side-by-side view, characterized in that, Includes the following steps: S1: Display avatar conveyor module, the avatar conveyor module arranges the avatars of multiple members in a horizontal scrolling queue, wherein the number of visible avatar slots is N, where N is an integer greater than 1, and the avatar conveyor module supports horizontal scrolling by the user through left and right swipe operations; S2: Display column container module, the column container module displays N schedule columns, each schedule column corresponds to a visible avatar slot in the avatar conveyor module, and displays the schedule information of the corresponding member. Each schedule column arranges the schedule cards for the next few days from top to bottom according to the date. S3: The linkage synchronization module maintains the avatar index array and column binding array. The avatar index array contains the avatar information of all members. The column binding array is used to form a 1:1 mapping relationship between each visible avatar slot in the avatar conveyor module and the corresponding schedule column in the column container module, so that at any time the i-th avatar in the top area must be mapped to the i-th schedule column below, where i is an integer from 1 to N. S4: Respond to horizontal scrolling operations, calculate the scroll offset to determine the new set of visible avatars, and update the column binding array to seamlessly replace the schedule column with the corresponding member schedule; When the preset scrolling threshold is crossed, the column reuse mechanism is triggered, and the rendering instance of the off-screen edge column is reused as the newly entered member schedule column, so as to realize the continuous scrolling in and out of the excessive number of members. During scrolling, the avatar and the schedule column scroll synchronously, and the time axis alignment and vertical scroll position remain unchanged when the schedule column is replaced; The column reuse mechanism specifically includes: When a preset scrolling threshold is crossed, the leftmost or rightmost off-screen edge column in the column container module is identified. Replace the data source and avatar mapping of the rendering instance of the off-screen edge column with the schedule information of the newly entered member in the visible area, and update the column binding array at the same time; The column reuse mechanism supports either a circular queue or a queue with head and tail buffers, enabling seamless cyclic scrolling of the avatar track.

2. The method for displaying and scrolling a calendar in a multi-member side-by-side view as described in claim 1, characterized in that, It also includes a timeline alignment preservation strategy, specifically: When the schedule column in the column container module is replaced with the schedule information of the new member, the same date alignment and the same vertical scroll position are maintained to avoid interruption of the user's visual context due to member switching; The timeline alignment maintenance strategy is achieved by maintaining a unified date start point and day grid alignment, with the schedule cards in each schedule column arranged based on the current date.

3. The method for displaying and scrolling a calendar in a multi-member side-by-side view as described in claim 1, characterized in that, It also includes lazy loading and differential update mechanisms, specifically: Only load the schedule data for the next few days for the member whose avatar is currently visible, and fetch the schedule data of new members as needed when the column binding array is updated; The differential update method is used to refresh only the changed portion of the schedule data, avoiding loading all schedule data of all members at once; The lazy loading and differential update mechanism is implemented through a data module, which stores the schedule event structure for each member. The schedule event structure includes member identifier, event start time, event end time, all-day event flag, and event metadata.

4. The method for displaying and scrolling a calendar in a multi-member side-by-side view as described in claim 1, characterized in that, The preset scrolling threshold is set based on the center position of the avatar slot or 50% of the avatar width. When the center of the avatar crosses the center position or 50% of the avatar width, it is determined to have crossed the preset scrolling threshold and column replacement is triggered. The column replacement uses tweening animation, which includes fade-in animation or displacement animation, with an animation duration of 80 milliseconds to 150 milliseconds; The horizontal scrolling operation and column mapping update are decoupled from the main rendering thread through a scrolling damping mechanism, and throttling or request frame techniques are used to ensure that the scrolling frame rate reaches 60fps.

5. The method for displaying and scrolling a calendar in a multi-member side-by-side view as described in claim 1, characterized in that, It also includes exception and boundary handling strategies, specifically: When the number of members is less than N, placeholders are used in the avatar conveyor module and column container module to fill empty avatars or empty schedule columns. When the number of members exceeds N, a circular buffer strategy or a dynamic expansion strategy is used to manage the avatar conveyor queue to ensure smooth scrolling. For both day-long and multi-day events, the duration of the event is visualized using a grid layout in the schedule column.

6. The method for displaying and scrolling a calendar in a multi-member side-by-side view as described in claim 1, characterized in that, It also includes features to enhance interaction and usability, specifically: Users can directly jump to the corresponding member's schedule by tapping their avatar, while maintaining a 1:1 mapping between the avatar feed and the schedule. Provides the option to pin or pin members, allowing users to keep a specific member's avatar always in the visible slot; Supports filtering based on busy / idle status or the presence or absence of events, displaying only members with events; It integrates accessibility features, including providing readable names and focus order for avatars, as well as providing button controls equivalent to gesture operations.

7. A calendar display and linked scrolling device for a multi-member side-by-side view, applied to the calendar display and linked scrolling method for a multi-member side-by-side view as described in any one of claims 1-6, the device comprising an avatar conveyor module, a column container module, a linked synchronization module, a data and timeline module, and an interaction enhancement module, wherein each module achieves coordinated linkage through interface calls: Avatar conveyor module: used to display a horizontal scrolling queue of all member avatars, respond to scrolling operations, and provide visual status feedback, ensuring that the positions of the avatars and the schedule column correspond accordingly; Column container module: used to display N fixed schedule columns, and to handle the differentiated rendering of schedule cards, independent vertical scrolling, and the reuse management of column rendering instances; Linkage and synchronization module: used to maintain the avatar index array and column binding array, realize the calculation of scroll offset, threshold determination, mapping relationship update and linkage control between avatar and calendar column; Data and Timeline Module: Used for storing, lazy loading, and differential updating of schedule event data, as well as establishing a unified timeline benchmark and maintaining date alignment; Interaction Enhancement Module: This module is used to enhance interactive functions such as tap-to-access, fixed members, filtering, and barrier-free access, thereby improving user operation convenience and application usability.

Images