日历周视图怎么设计？重叠、跨日与时间轴

日历周视图应先固定日期列和时间轴，把有起止时间的日程放进对应区间，全天事项单列在顶部；同一时段的多件事并列显示，不能互相完全遮住。短日程需要可辨认的标题和点击入口，跨日事项要表达连续关系。手机空间不足时可改为单日或日程列表，但要保留用户刚才查看的日期。

以项目负责人周三的安排为例：9:00—10:00需求讨论、9:30—10:30供应商沟通、10:15—10:45方案评审，同时还有“活动上线”这项全天事项。先在Pixso中排出日历界面，再用这组时间验证排列，比拿互不重叠的占位卡片更能发现问题。

先决定用户在这一周找什么

个人日历常用来发现空档、看下一场安排；资源日历则可能用于比较会议室或设备。前者适合按日期分列，后者有时更适合按资源分列。不要把一张七日个人日历直接搬给几十个资源，再要求用户在横向滚动中找空位。

本例是个人项目日历，默认显示工作周，周末可展开查看。顶部保留日期范围、今天、前一周和后一周，以及当前视图。显示工作日是本例的界面选择，不等于删除周末事件；切换到完整周时，原有日程仍应存在。标题不能只写“本周”，跨周浏览后应有明确的月日范围。

日期列头与时间刻度最好在滚动时持续提供上下文。滚到下午后仍能知道自己看的是周三14点，而不是只剩一排色块。若同时存在页面滚动和日历内部滚动，应确认鼠标、触摸与键盘各自控制哪一层，避免滚动一小段就丢失顶部日期。

同一时段的卡片如何分列

先按时间关系画出三个活动：需求讨论覆盖9:00—10:00，供应商沟通覆盖9:30—10:30，方案评审覆盖10:15—10:45。前两项重叠，后两项也重叠，但需求讨论与方案评审没有直接重叠。它们形成连续的拥挤区间，不能只比较相邻两张卡片就随意左右跳位。

一种容易解释的规则是：同一拥挤组使用固定列位置，开始较早的活动先占可用列，结束后该列才释放。两列足以放下本例：第一列放需求讨论和稍后的方案评审，第二列放供应商沟通。虽然局部有空白，卡片宽度和左右位置保持稳定，读者更容易追踪起止时间。

也可以允许卡片局部遮叠，但应保留可见标题或可操作区域，不能把被遮住的日程当成不存在。FullCalendar的时段事件重叠设置区分了视觉重叠与并排显示；是否允许用户预约冲突，是另外一条业务规则。本篇的并列仅表示同时存在，不代表系统允许同一个人无条件参加两场会议。

一天同一时段出现很多活动时，继续压窄成几根色条会失去意义。可以保留部分可读条目，并提供“另外3项”入口，打开当前时段的完整列表。列表中的每条仍显示起止时间和标题，让用户知道隐藏的是哪几项；不要只靠悬停才能看到剩余内容。

五分钟会议与全天事项不能共用高度逻辑

按每小时固定高度绘制，五分钟事项可能只剩很薄的一条。若为可点击性给它最小显示高度，应仍展示准确的“10:50—10:55”，避免扩大后的色块让人误以为占了半小时。开始位置要对准时间轴，附近同时段活动如何避让也要统一，不允许文字外溢到下一场活动里。

对于非常密集的短事项，日程列表比周网格更适合逐条阅读。日历可以保留时间分布，点击拥挤区域进入列表；不要用缩小字号解决所有密度问题。标题优先保留能区分活动的词，参加人头像、地点和备注放到详情中，不挤占本就有限的高度。

“活动上线”只有日期、没有具体时刻，放在日期标题下的全天区域，不要拉成从0点到24点的一条长色带。全天区太高时可折叠，但应显示隐藏条目数量，避免把上午日程推到首屏以下。全天事项并不一定代表整天不可安排其他工作，这层含义须由忙闲规则单独表达。

跨午夜与跨日事项保留连续身份

周三23:30到周四00:30的发布值守是一个有精确时间的活动。周视图可以在两天分别显示连续片段，在周三片段提示“延续至周四”，在周四片段提示“承接周三”；点开任一片段都进入同一活动详情。不要拆成两个看似可以分别取消的日程。

持续三天的展会则适合在全天区横跨三列。横条被屏幕边缘截断时，用连续标记表明活动开始于当前周之前或延续到下一周。月份切换不应打断事件身份，日期标题也不能因为整周跨月而只保留一个月份名称。

时区说明放在时间轴附近。切换时区可能改变活动所在日期，不只是改一个小时标签；本例采用北京时间，设计稿里的时间标注一致。跨时区或夏令时的具体换算交给真实日期和服务数据验证，不用固定加减小时的样例冒充所有日期都成立。

“今天”和“现在”承担不同导航任务

点击“今天”首先返回包含今天的日期范围；当前时间线则标明今天这一列里的此刻。两者不能相互代替。用户正在看下一周时，没有必要在未来日期上画一条“现在”的红线；只在今天所在日期表达当前位置即可。

初次进入可以定位到当前时段或工作日开始处。用户手动滚到晚上后，后台收到新日程不应每次把他拉回当前时间。日期切换、返回页面以及重新打开产品时是否记忆滚动位置，分别约定；同一个“恢复位置”开关很难同时满足所有情况。

点击活动详情再关闭时，恢复原活动和原滚动位置。若活动刚被移到其他日期，原位置给出变化提示并提供新位置入口，而不是凭空消失。预约发生冲突时的替代方案，可以继续阅读会议室占用冲突的处理流程；不要把视图排布与预约结果混在一起。

在同一画布比较周视图与手机日程

在Pixso中将工作周日历和手机日程列表并排。工作周重点展开周三，两份画板都使用9点至10点45分的同一组活动，保留各自时间与标题；全天“活动上线”始终在日期下方单列。宽屏画重叠分列，手机以时间顺序列出完整日程，突出重叠时段，不把周视图缩成不可读的七条窄列。

视图切换以当前选中日期为中心。周三进入手机单日后应仍停在周三；再切回周视图，保持日期选择，而不是返回系统今天。若选中的活动还在，可恢复其详情入口；若被删除，保留日期上下文并说明变化。

评审时先让同事回答“9:45正在发生什么”“10:30之后哪场还没结束”“全天上线事项是否一定占用所有时段”。再切换手机，要求他找到同一场方案评审。能用一致的时间与身份完成这些查找，日历才不只是漂亮的日程背景。