Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar Sync Onboarding Block for Vue

A full-screen step with three calendars to connect and a drawn Monday to Friday week that fills with their meetings in three weights, counts the overlaps from the times, and picks where new meetings go.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a new user what connecting a calendar does before they commit, with this step for Vue with Ark UI. It is a whole screen of Slotwick, a scheduling-links tool, split in two inside the page's band. At the start, under a step header (“Step 3 of 5” over a hairline of Progress), three calendars (Google Calendar, Outlook and iCloud Calendar, named in text with two-letter tiles) each have a Connect button that goes Connecting for one short tick and Disconnect, a “New meetings go to” Native Select of the calendars that are connected, and Continue. At the end a week from Monday to Friday, 08:00 to 17:00, framed with Guides, fills with each connected calendar's meetings; meetings from two calendars at the same time sit side by side with the word Overlap, and a line under the week counts them. Continue is the one Shine Button.

FAQ

How are the overlaps counted?

From the times, not from the picture. MEETINGS is a typed list; an overlap is two meetings from different connected calendars on the same day whose times intersect. The count and the day and start time of each are written under the week, the shared stretch is marked with the word Overlap, and the two meetings are drawn side by side. Disconnect a calendar and its meetings and the overlaps that involved them go.

How do I tell the calendars apart without colour?

By weight: one calendar's meetings are solid, another's are outlined and the third's are soft grey, and a small swatch of the same weight sits beside each calendar's name. Every meeting also carries its title, so nothing depends on seeing the difference.

What does New meetings go to list?

Only the calendars that are connected, in the order they are listed. Before any is connected it holds one line, “Connect a calendar first”. If the chosen calendar is disconnected the select moves to the first one still connected, and the sentence that Continue saves names it.

What stays local in the demo, and how do I wire it?

All of it: nothing is connected or read, and the meetings are the typed ones in the file. In your app start the real authorisation where press says so, replace MEETINGS with the events you read, and save the connected calendars and the chosen one where submit says so. The week is drawn from percentages of the working day, so any events fit.

How does it look on a phone?

The calendars come first, then the week under them showing Monday to Wednesday, with the line under it still counting the whole week. Continue and Skip pin to the bottom of the screen.

Does the week mirror in a right-to-left language?

No. Time reads the same way in every language, so the week and its hours stay left to right, while the calendars, the labels and the status line follow the page.