feat(calendar): Add endTime display to calendar event items

[VedantGupta-DTU]

• I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
• I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works (if applicable)
• I have added necessary documentation (if applicable)
• Any dependent changes have been merged and published in downstream modules

Proposed changes (including videos or screenshots)

Currently, in the Outlook Events sidebar, only the startTime of an event is displayed to the user. This leaves out critical context regarding the meeting's duration.

This PR updates OutlookEventItem.tsx to conditionally display the endTime right next to the startTime (e.g., March 28, 2026 10:00 AM - 11:00 AM). We utilize the useFormatTime hook so only the time portion of the endTime is displayed, preventing repetitive date text rendering. Note that this falls back gracefully if endTime is undefined (which is supported in ICalendarEvent).

(This PR is raised as an initial contribution towards the GSoC Personal Calendar project proposal).

Issue(s)

N/A (Related to Google Summer of Code 'Personal Calendar' Preparation)

Steps to test or reproduce

1. Setup and sync the Outlook Calendar integration in your workspace.
2. Open the Outlook Calendar contextual sidebar to view your events.
3. Observe that events with a specified end time will now correctly display their duration.

Further comments

This is a small UI/UX enhancement to better support the upcoming Personal Calendar features!

Summary by CodeRabbit

• New Features
  • Outlook calendar events now display end times in addition to start times, showing the complete time range for each event.

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: 4d6d82f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Walkthrough

The OutlookEventItem component now accepts an endTime prop and displays event duration as a formatted time range, appending the end time to the start time display when available.

Changes

Cohort / File(s)	Summary
Outlook Calendar Event Display apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventItem.tsx	Added endTime prop support to display event time ranges. Component now conditionally appends formatted end time suffix to existing start time metadata when endTime is provided. Imports new useFormatTime hook for time formatting.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested labels

type: feature

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely describes the main change: adding endTime display to calendar event items in the Outlook calendar component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cubic-dev-ai]

No issues found across 1 file

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventItem.tsx`:
- Around line 60-63: The displayed time range in OutlookEventItem currently only
shows the end time (using formatTime(endTime)), which is ambiguous for cross-day
events; update the rendering logic in OutlookEventItem to detect when endTime's
date differs from startTime's date and, in that case, render the end date plus
time (e.g., use formatDateAndTime(endTime) or compose formatDate(endTime) +
formatTime(endTime)) instead of just formatTime(endTime), otherwise keep the
existing " - formatTime(endTime)" behavior; ensure you reference startTime and
endTime and reuse the existing formatDateAndTime and formatTime helpers.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9b315273-2f1a-4e8b-a28d-5b942e663218

📥 Commits

Reviewing files that changed from the base of the PR and between 4235cd9 and 4d6d82f.

📒 Files selected for processing (1)

• apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventItem.tsx

📜 Review details

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: cubic · AI code reviewer

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

• apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventItem.tsx

🧠 Learnings (1)

📚 Learning: 2026-03-27T14:52:56.865Z

Learnt from: dougfabris
Repo: RocketChat/Rocket.Chat PR: 39892
File: apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx:150-155
Timestamp: 2026-03-27T14:52:56.865Z
Learning: In Rocket.Chat, there are two different `ModalBackdrop` components with different prop APIs. During review, confirm the import source: (1) `rocket.chat/fuselage` `ModalBackdrop` uses `ModalBackdropProps` based on `BoxProps` (so it supports `onClick` and other Box/DOM props) and does not have an `onDismiss` prop; (2) `rocket.chat/ui-client` `ModalBackdrop` uses a narrower props interface like `{ children?: ReactNode; onDismiss?: () => void }` and handles Escape keypress and outside mouse-up, and it does not forward arbitrary DOM props such as `onClick`. Flag mismatched props (e.g., `onDismiss` passed to the fuselage component or `onClick` passed to the ui-client component) and ensure the usage matches the correct component being imported.

Applied to files:

• apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventItem.tsx

🔇 Additional comments (1)

apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventItem.tsx (1)

8-8: Nice, clean wiring for optional endTime support.

The new prop destructuring and useFormatTime usage are consistent, and the fallback behavior remains safe when endTime is missing.

Also applies to: 26-26, 30-30

[VedantGupta-DTU]

@KevLehman @pierre-lehnen-rc hi kevin and other maintainers this is a small issue i have found so i raise pr for it
so plz review if you can spare some time