Calendar Sync Onboarding Block for React

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.

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.

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.

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.

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.

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.