shadcn.io is not affiliated with official shadcn/ui
Sync Settings Calendar Block for Svelte
Sync settings for three calendar services with a switch each and for the calendars inside them, a sync frequency, a conflict rule whose outcome is previewed on one example event, and Save and Discard.
Installation
Overview
Let people decide what a calendar bridge keeps in step, with these sync settings for Svelte with Ark UI. It is a screen of Tetherwick, a calendar bridge, in a hairline frame with a plus mark on each corner. The first band lists three calendar services named in text, Google Calendar, Outlook and iCloud, each beside a neutral two-letter tile (never a logo) with a Switch and the calendars it holds, each with its own switch that goes quiet while the service is off. The second band sets how often to sync with a Native Select, what to do when two services disagree about one event (keep the newest, keep both, or ask) as native radios, and previews the outcome on one example event that differs between two services: "Keeps the Outlook version, 10:30, and drops 10:00". Two more switches decline clashing invitations and show declined events. The foot counts the changes, and Save changes, the only Shine Button, and Discard stay in place and answer even when nothing changed. Nothing connects: a switched-on service says "Connected in this demo. No sign-in happened." For settings screens, integrations and any app that syncs.
FAQ
How do I change the services, calendars or example event?
Edit SERVICES: each has an id, a two-letter mark, a name and its calendars. Edit FIRST for the starting state (which services and calendars are on, the frequency and the conflict rule), EVERY for the frequency options and CONFLICTS for the rules. EXAMPLE holds the event the preview talks about, with each service's time and when it was edited.
How is the conflict preview worked out?
From the rule and from which services are on. "Keep the newest" keeps the version edited last, which in the example is Outlook at 10:30; "Keep both" keeps two events; "Ask me" changes nothing until you answer. If Google Calendar or Outlook is switched off the preview says there is nothing to compare. In your app derive the preview from a real pair of versions and their edit times.
Does anything connect?
No. The switches only change state in the page, and a service that is on says it is connected in this demo with no sign-in. In your app a service's switch starts an OAuth flow in a window your server controls, and its calendars come from that service's API; keep the calendar switches disabled until the connection succeeds.
What do Save and Discard do?
Save keeps the current choices as the saved ones and says so in a polite status message, "Sync settings saved in this demo. Nothing was connected."; Discard puts back the saved ones. Both stay in the foot at all times: with nothing changed they answer "No changes to save" or "No changes to discard" rather than disappearing. The foot line counts changes, such as "3 changes not saved yet". Nothing is stored; a reload goes back to the start.
Is it accessible from the keyboard?
Yes. Every switch is named with its service or calendar ("Sync Work, Google Calendar"), the conflict rule is a radio group you move through with the arrow keys, and the frequency is a native select. The disabled calendar switches are skipped while their service is off. A polite status message reports each service change and each save.