Skip to content

feat: weekly view calendar improvements#9491

Merged
JeroenReumkens merged 16 commits into
mainfrom
feat/start-and-end-time-weekly-calendar
Jun 15, 2023
Merged

feat: weekly view calendar improvements#9491
JeroenReumkens merged 16 commits into
mainfrom
feat/start-and-end-time-weekly-calendar

Conversation

@JeroenReumkens
Copy link
Copy Markdown
Contributor

@JeroenReumkens JeroenReumkens commented Jun 13, 2023

What does this PR do?

  • Show 24 hours in event calendar
  • Make calendar scrollable
  • Show events in correct timezone
  • Add 'current time' indicator
  • Make calendar work with "odd" times (i.e. 05 and 35 min starting times)

Fixes CAL-1918

CleanShot.2023-06-14.at.20.09.43.mp4

Type of change

  • New feature (non-breaking change which adds functionality)

How should this be tested?

  • Test week view calendar
  • Current time indicator should be shown for your local time
  • timeformat toggle should update times
  • Calendar should always show 24 hours now, and 1 hour block has a fixed height. So you should be able to scroll the calendar.
  • Test offset start times, it should position the blocks correctly on the calendar, and leave the offset gaps

@linear
Copy link
Copy Markdown

linear Bot commented Jun 13, 2023

CAL-1918 Week view - base start/end time on event schedule

The start and end time props in packages/features/bookings/Booker/components/LargeCalendar.tsx should be based on the earliest and latest start/end time of the schedule for the current event.

Lets say you have the following availability schedule for the event:

mo - fr: 9am - 5pm
sa, sun: 11am - 9pm

In that case we want to get 9am and 9pm as start and end time respectively. That way we know for sure if we set this as bounds of the calendar, everything will be visible in view.

I tried to query the schedule from the event type (or with a separate db query), but somehow I kept getting 1970 as the start and end dates. I guess it's just me, but couldn't find out what I was doing wrong.

@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 13, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
api ❌ Failed (Inspect) Jun 15, 2023 10:00am
cal ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 15, 2023 10:00am
web ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 15, 2023 10:00am
web-staging ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 15, 2023 10:00am
1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
ui ⬜️ Ignored (Inspect) Visit Preview Jun 15, 2023 10:00am

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 13, 2023

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Ninety-six Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load % of Budget (350 KB)
/404 90.49 KB 241.77 KB 69.08% (🟡 +0.21%)
/500 89.43 KB 240.71 KB 68.78% (🟡 +0.21%)
/[user] 136.8 KB 288.08 KB 82.31% (🟡 +0.21%)
/[user]/[type] 184.22 KB 335.5 KB 95.86% (🟡 +0.21%)
/[user]/[type]/embed 184.25 KB 335.53 KB 95.87% (🟡 +0.21%)
/[user]/book 253.22 KB 404.5 KB 115.57% (🟡 +0.21%)
/[user]/embed 136.86 KB 288.15 KB 82.33% (🟡 +0.21%)
/apps 279.03 KB 430.31 KB 122.95% (🟡 +0.20%)
/apps/[slug] 296.97 KB 448.25 KB 128.07% (🟡 +0.21%)
/apps/[slug]/[...pages] 458.96 KB 610.24 KB 174.36% (🟡 +10.85%)
/apps/[slug]/setup 89.01 KB 240.29 KB 68.65% (🟡 +0.22%)
/apps/categories 241.37 KB 392.65 KB 112.19% (🟡 +0.20%)
/apps/categories/[category] 262.22 KB 413.5 KB 118.14% (🟡 +0.21%)
/apps/installed/[category] 278.47 KB 429.75 KB 122.79% (🟡 +0.19%)
/auth/error 101.46 KB 252.74 KB 72.21% (🟡 +0.21%)
/auth/forgot-password 134.84 KB 286.12 KB 81.75% (🟡 +0.21%)
/auth/forgot-password/[id] 142.04 KB 293.32 KB 83.81% (🟡 +0.21%)
/auth/login 150.41 KB 301.69 KB 86.20% (🟡 +0.21%)
/auth/logout 89.82 KB 241.1 KB 68.89% (🟡 +0.21%)
/auth/saml-idp 83.78 KB 235.07 KB 67.16% (🟡 +0.21%)
/auth/setup 172.85 KB 324.13 KB 92.61% (🟡 +0.20%)
/auth/signin 83.86 KB 235.15 KB 67.18% (🟡 +0.22%)
/auth/sso/[provider] 83.92 KB 235.2 KB 67.20% (🟡 +0.21%)
/auth/sso/direct 83.83 KB 235.11 KB 67.17% (🟡 +0.22%)
/auth/verify 101.53 KB 252.81 KB 72.23% (🟡 +0.21%)
/auth/verify-email 89.28 KB 240.56 KB 68.73% (🟡 +0.21%)
/availability 246.7 KB 397.98 KB 113.71% (🟡 +0.20%)
/availability/[schedule] 332.97 KB 484.25 KB 138.36% (🟡 +0.20%)
/availability/troubleshoot 242.11 KB 393.39 KB 112.40% (🟡 +0.20%)
/booking/[uid] 216.68 KB 367.96 KB 105.13% (🟡 +0.21%)
/bookings/[status] 335.92 KB 487.2 KB 139.20% (🟡 +0.19%)
/d/[link]/[slug] 183.82 KB 335.1 KB 95.74% (🟡 +0.21%)
/d/[link]/[slug]/embed 183.84 KB 335.12 KB 95.75% (🟡 +0.21%)
/d/[link]/book 252.87 KB 404.15 KB 115.47% (🟡 +0.21%)
/event-types 430.1 KB 581.38 KB 166.11% (🟡 +0.17%)
/event-types/[type] 480.94 KB 632.22 KB 180.63% (🟡 +0.19%)
/getting-started/[[...step]] 426.24 KB 577.52 KB 165.00% (🟡 +0.20%)
/insights 448.78 KB 600.07 KB 171.45% (🟡 +0.20%)
/maintenance 84 KB 235.28 KB 67.22% (🟡 +0.22%)
/more 241 KB 392.28 KB 112.08% (🟡 +0.20%)
/new-booker/[user]/[type] 395.1 KB 546.38 KB 156.11% (🟡 +0.43%)
/new-booker/[user]/[type]/embed 395.13 KB 546.41 KB 156.12% (🟡 +0.42%)
/new-booker/[user]/embed 136.88 KB 288.16 KB 82.33% (🟡 +0.21%)
/new-booker/d/[link]/[slug] 395.05 KB 546.33 KB 156.09% (🟡 +0.43%)
/new-booker/team/[slug]/[type] 395.1 KB 546.38 KB 156.11% (🟡 +0.42%)
/new-booker/team/[slug]/[type]/embed 395.13 KB 546.42 KB 156.12% (🟡 +0.42%)
/new-booker/team/[slug]/embed 225.29 KB 376.57 KB 107.59% (🟡 +0.21%)
/payment/[uid] 110.65 KB 261.93 KB 74.84% (🟡 +0.21%)
/settings/admin 246.57 KB 397.85 KB 113.67% (🟡 +0.20%)
/settings/admin/apps 258.31 KB 409.59 KB 117.03% (🟡 +0.19%)
/settings/admin/apps/[category] 258.29 KB 409.58 KB 117.02% (🟡 +0.19%)
/settings/admin/flags 249.31 KB 400.59 KB 114.45% (🟡 +0.19%)
/settings/admin/impersonation 246.85 KB 398.13 KB 113.75% (🟡 +0.21%)
/settings/admin/users 247.99 KB 399.27 KB 114.08% (🟡 +0.20%)
/settings/admin/users/[id]/edit 334.39 KB 485.67 KB 138.76% (🟡 +0.20%)
/settings/admin/users/add 334.06 KB 485.34 KB 138.67% (🟡 +0.20%)
/settings/billing 246.74 KB 398.02 KB 113.72% (🟡 +0.20%)
/settings/developer/api-keys 275.3 KB 426.58 KB 121.88% (🟡 +0.20%)
/settings/developer/webhooks 249.73 KB 401.01 KB 114.57% (🟡 +0.21%)
/settings/developer/webhooks/[id] 251.49 KB 402.77 KB 115.08% (🟡 +0.20%)
/settings/developer/webhooks/new 251.35 KB 402.63 KB 115.04% (🟡 +0.20%)
/settings/my-account/appearance 269.62 KB 420.9 KB 120.26% (🟡 +0.18%)
/settings/my-account/calendars 253.14 KB 404.42 KB 115.55% (🟡 +0.19%)
/settings/my-account/conferencing 252.27 KB 403.55 KB 115.30% (🟡 +0.19%)
/settings/my-account/general 331.58 KB 482.86 KB 137.96% (🟡 +0.20%)
/settings/my-account/profile 374.18 KB 525.46 KB 150.13% (🟡 +0.21%)
/settings/organizations/[id]/about 168.64 KB 319.92 KB 91.41% (🟡 +0.21%)
/settings/organizations/[id]/add-teams 168.67 KB 319.96 KB 91.42% (🟡 +0.21%)
/settings/organizations/[id]/onboard-admins 168.69 KB 319.97 KB 91.42% (🟡 +0.21%)
/settings/organizations/[id]/set-password 168.64 KB 319.92 KB 91.41% (🟡 +0.21%)
/settings/organizations/new 168.61 KB 319.89 KB 91.40% (🟡 +0.21%)
/settings/security/impersonation 248.53 KB 399.81 KB 114.23% (🟡 +0.20%)
/settings/security/password 258.01 KB 409.29 KB 116.94% (🟡 +0.20%)
/settings/security/sso 256.02 KB 407.3 KB 116.37% (🟡 +0.20%)
/settings/security/two-factor-auth 250.97 KB 402.25 KB 114.93% (🟡 +0.20%)
/settings/teams 246.34 KB 397.62 KB 113.61% (🟡 +0.20%)
/settings/teams/[id]/appearance 261.11 KB 412.39 KB 117.83% (🟡 +0.18%)
/settings/teams/[id]/billing 246.58 KB 397.87 KB 113.68% (🟡 +0.20%)
/settings/teams/[id]/members 359.53 KB 510.81 KB 145.95% (🟡 +0.20%)
/settings/teams/[id]/onboard-members 163.45 KB 314.73 KB 89.92% (🟡 +0.21%)
/settings/teams/[id]/profile 436.83 KB 588.11 KB 168.03% (🟡 +0.21%)
/settings/teams/[id]/sso 256.11 KB 407.39 KB 116.40% (🟡 +0.20%)
/settings/teams/new 186.82 KB 338.11 KB 96.60% (🟡 +0.21%)
/signup 134.32 KB 285.6 KB 81.60% (🟡 +0.21%)
/team/[slug] 225.21 KB 376.49 KB 107.57% (🟡 +0.21%)
/team/[slug]/[type] 183.82 KB 335.1 KB 95.74% (🟡 +0.21%)
/team/[slug]/[type]/embed 183.85 KB 335.13 KB 95.75% (🟡 +0.21%)
/team/[slug]/book 252.87 KB 404.15 KB 115.47% (🟡 +0.21%)
/team/[slug]/embed 225.28 KB 376.56 KB 107.59% (🟡 +0.21%)
/teams 241.09 KB 392.37 KB 112.11% (🟡 +0.20%)
/video/[uid] 240.18 KB 391.46 KB 111.85% (🟡 +0.21%)
/video/meeting-ended/[uid] 96.79 KB 248.07 KB 70.88% (🟡 +0.21%)
/video/meeting-not-started/[uid] 96.43 KB 247.71 KB 70.77% (🟡 +0.22%)
/video/no-meeting-found 88.72 KB 240 KB 68.57% (🟡 +0.21%)
/workflows 253.96 KB 405.24 KB 115.78% (🟡 +0.20%)
/workflows/[workflow] 368.18 KB 519.46 KB 148.42% (🟡 +0.20%)
Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

@deploysentinel
Copy link
Copy Markdown

deploysentinel Bot commented Jun 13, 2023

Current Playwright Test Results Summary

✅ 98 Passing - ⚠️ 2 Flaky

Run may still be in progress, this comment will be updated as current testing workflow or job completes...

(Last updated on 06/15/2023 09:59:17am UTC)

Run Details

Running Workflow PR Update on Github Actions

Commit: f348dd5

Started: 06/15/2023 09:57:33am UTC

⚠️ Flakes

📄   apps/web/playwright/auth/delete-account.e2e.ts • 1 Flake

Test Case Results

Test Case Last 7 days Failures Last 7 days Flakes
Can delete user account
Retry 2Retry 1Initial Attempt
1.20% (3) 3 / 250 runs
failed over last 7 days
28.40% (71) 71 / 250 runs
flaked over last 7 days

📄   apps/web/playwright/event-types.e2e.ts • 1 Flake

Test Case Results

Test Case Last 7 days Failures Last 7 days Flakes
Event Types tests user -- old-booker can add multiple organizer address
Retry 1Initial Attempt
0.83% (2) 2 / 240 runs
failed over last 7 days
15.42% (37) 37 / 240 runs
flaked over last 7 days

View Detailed Build Results


@JeroenReumkens JeroenReumkens changed the title feat: Base weekly view calendar start/end time on calendar schedule settings feat: weekly view calendar improvements Jun 14, 2023
@JeroenReumkens
Copy link
Copy Markdown
Contributor Author

Screenshot 2023-06-15 at 12 26 00 PM * left side shows 5:30 but starting time on hovering container shows 4:15PM

Thanks for the review @Udit-takkar! This has been fixed now. Could you please retest it? 😁

@Udit-takkar
Copy link
Copy Markdown
Contributor

@JeroenReumkens Still not fixed now it shows 5:00PM

Screenshot 2023-06-15 at 1 50 24 PM

@JeroenReumkens
Copy link
Copy Markdown
Contributor Author

@JeroenReumkens Still not fixed now it shows 5:00PM

Screenshot 2023-06-15 at 1 50 24 PM

Hmmm interesting. So there's an additional 30 min offset for you. Let me check again.

Copy link
Copy Markdown
Contributor

@Udit-takkar Udit-takkar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works Fine now

Copy link
Copy Markdown
Contributor

@Udit-takkar Udit-takkar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JeroenReumkens found some issues in multi duration

when i select 15min then the size of blocks feels 30minutes ( 9:30 - 10:00) and when i change the duration to 90min the empty block size is just half an hour

Screenshot 2023-06-15 at 3 01 04 PM Screenshot 2023-06-15 at 3 01 21 PM

@JeroenReumkens
Copy link
Copy Markdown
Contributor Author

@JeroenReumkens found some issues in multi duration

when i select 15min then the size of blocks feels 30minutes ( 9:30 - 10:00) and when i change the duration to 90min the empty block size is just half an hour

Screenshot 2023-06-15 at 3 01 04 PM Screenshot 2023-06-15 at 3 01 21 PM

Amazing find!! Just pushed a fix for this too. It should now adapt to the option you choose!

Copy link
Copy Markdown
Contributor

@Udit-takkar Udit-takkar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🙏

@JeroenReumkens JeroenReumkens enabled auto-merge (squash) June 15, 2023 09:55
@JeroenReumkens JeroenReumkens merged commit 955de31 into main Jun 15, 2023
@JeroenReumkens JeroenReumkens deleted the feat/start-and-end-time-weekly-calendar branch June 15, 2023 09:59
iamr-kumar pushed a commit to iamr-kumar/cal.com that referenced this pull request Jun 18, 2023
* Add correct start/end time for weekly calendar by looking at calendar's availability

* Always show 24h in weekly calendar, added scroll functionality, current time and events in correct timezone

* Improved current time style

* Show slots for every minute, so also odd timeslots due to offsets work

* Show correct timeformat for weekly view on left side time stamps

* Fix data attr for debug

* Position events differently so we can accomodate for offset start times.

* Removed schedule from public event api, because we don't use it anymore

* Fixed alignment of timeslots in weekview calendar.

* Added loading spinner to weekly calendar

* Force weekly view calendar hour labels to show 00 minutes, also for gmt x.5 timezones that are offset 30 mins.

* Change event duration blocks in weekly calendar when user changes duration in multi duration event

* Improved week view slot time label alignments for shorter durations

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants