Upcoming Items

A timeline lists its rows newest first, from now back, so a meeting next week or a task due tomorrow isn't on it. Two settings bring what is coming up into view: Upcoming puts the next days' rows above the history, and Ascending turns the timeline into a list of what's next. A row is placed by the date its table is dated by: an appointment by its start, a task or phone call by its due date, a note or message by when it was written.

A timeline opens with its notes, emails and messages shown and its other tables switched off for the viewer to turn on, and none of those three is dated ahead of now. To show what is coming, name the tables it is in with DefaultTables (React: defaultTables), as the examples below do with the account's appointments, tasks and phone calls.

Upcoming rows above the history

Upcoming (React: upcoming) starts the timeline that far ahead: a TimeSpan, or in React a number of days and hours. The rows between now and then come first, under an Upcoming heading, and the rest under Earlier. Like the rest of the timeline they are newest first, so the furthest ahead is at the top and the soonest just above Earlier. Rows further ahead than that aren't listed. The upcoming rows are shaded, and in a timeline with a MaxHeight each heading stays at the top while its rows scroll under it, until the Earlier heading pushes the Upcoming one off.

React Blazor

The next few days, then the history

Schmeler and Sons' timeline with Upcoming set to the number of days above it, three to begin with: its meetings, calls and tasks of those days, then its notes, messages and activities as they went. Change the number to look further ahead.

React example Blazor example React TypeScript Razor
Upcoming
  1. # ppp-data-import Edited
    Share the product roadmap
  2. # ppp-data-import
    Introduce the new contact
  3. # ppp-data-import Edited
    Book the on-site visit
  4. # ppp-data-import Edited
    Prepare the quarterly report
  5. # ppp-data-import Edited
    Confirm the training dates
  6. # ppp-data-import Edited
    Prepare the quarterly report
  7. # ppp-data-import Edited
    Draft the statement of work
  8. # ppp-data-import Edited
    Share the product roadmap

What's next

Ascending (React: ascending) lists the rows from now on, soonest first, with Load more reading further ahead: a list of what is coming, without the history. No row is headed Upcoming then, since every row is.

React Blazor

Schmeler and Sons' next rows

The account's coming meetings, calls and tasks, soonest first.

React example Blazor example React TypeScript Razor
  1. # ppp-data-import Edited
    Update the account plan
  2. # ppp-data-import Edited
    Share the product roadmap
  3. # ppp-data-import Edited
    Draft the statement of work
  4. # ppp-data-import Edited
    Prepare the quarterly report
  5. # ppp-data-import Edited
    Confirm the training dates
  6. # ppp-data-import Edited
    Prepare the quarterly report

The Calendar shows the same rows laid out by day, week or month, and its agenda layout lists a week of them day by day.