Noloco
Ask the CommunityHire an ExpertLoginSign up
  • Noloco Overview
  • 🚀Quickstart
    • Start with your data
    • Start with AI
    • Start with a template
  • Data to App
    • Database Consolidation
  • App Settings
  • Components
    • Containers
    • Video
  • Templates
  • 🔗Data Sources
    • Data Overview
      • Setting a Collection's Primary Field
      • Syncing
    • Noloco Tables
      • Field Types
      • Relationships
      • Automatic Links
      • Rollup Fields
      • Lookup Fields
      • Formulas
      • Noloco AI
      • Import a file
    • Airtable
    • Google Sheets
    • SmartSuite
    • MySQL
    • PostgreSQL
    • REST APIs
    • HubSpot
    • Xano
  • 📄Pages
    • Collection views
      • Show collection record count
      • Empty State
    • Blank pages
    • iFrame embeds
    • External links
    • The Home Page
    • User Profile Page
    • Parent pages & folders
    • Page visibility rules
    • Cloning pages
    • Renaming pages
    • Hiding pages
    • Sidebar dividers
    • Tabs
  • 📂Collections
    • Adding collection views
    • Display
      • Rows
      • Cards & columns
      • Tables
      • Kanban boards
      • Calendar
      • Timeline
      • Gantt
      • Split-view
      • Charts
      • Maps
      • Pivot Table
      • Single record view
      • Grouping records
      • Record Colors
    • Filters
      • Logged in user
      • Relative Filters
      • Record values
    • Filter fields
    • Sort & limit
    • Row Action
    • Column Summaries
  • 📝Forms
    • Forms
      • Customizing Form Fields
      • Passing Linked Record Values to a Form
      • Dynamic Form Field Filters
      • E-Signature Fields
    • Public Forms
  • 📃Record Pages
    • Overview
    • Visibility Settings
    • Hidden Field Values
    • Record Comments
  • ✏️Field Formatting
    • Field visibility conditions
    • In-line editing
    • Conditional Highlight Colors
    • Dates & Time Zones
  • 📊Charts
    • Overview
  • 📂Data Management
    • Export Data
    • Import Data
  • 👥Users & Permissions
    • User Table
    • User Management
    • User Roles & Permissions
      • Record-level permissions
      • Field-level permissions
    • Open Sign Up
    • Offboarding Users
    • Testing as other users
  • ⏩Actions
    • Action buttons
      • Create records
      • Update records
      • Bulk actions
      • Barcode Scanner
      • Add a Comment Action
  • ⚡Workflows
    • Workflows
      • On-demand workflows
      • Comment Added Trigger
      • Watched Fields
      • Trigger webhooks
      • Send automated emails
      • For each item in a list...do...
      • Only continue if
      • Create a Record Action
      • Update a Record Action
      • Delete a Record Action
      • Deactivate a User Action
      • Reactivate a User Action
      • Send an Invitation Email Action
      • Add a comment to a record
      • Send a Push Notification
      • Ask Chat GPT Action
      • Summarize Text Action
      • Correct Grammar Action
      • Extract Keywords Action
      • Analyze Sentiment
      • Finish Text Action
      • Send a message to a Slack Channel
      • Send a message to a Slack User
      • Generate a PDF with DocsAutomator
  • 🔔Notifications
    • Notifications
    • Notification Preferences
  • 📑API Documentation
    • API Overview
      • Fetching Records
      • Fetching a Record
      • Creating a Record
      • Update a Record
      • Deleting a record
  • ⚙️Settings
    • General Settings
      • Live Mode
      • Custom Logos
    • Theme & Design
    • Progressive web apps
    • Navigation Settings
    • Spaces
    • Email Settings
    • Custom Code
    • Custom Domain
    • Login & Signup
      • Sign in Options
      • Single Sign On
      • 2FA - Two Factor Authentication
      • Client Portal User Add-On
    • Login Screen
    • User Lists
    • Integrations & API Keys
    • Billing & Usage
    • Support
    • Publishing
      • App Version History
  • 🔄Integrations
    • Zapier
    • Make (Integromat)
    • Sign in With Google
    • Intercom
    • SMTP Emails
    • Documint
  • ⚙️Account
    • Workspaces
    • Pricing
      • Client Portal Add-on (Legacy)
    • Transferring an App
    • Onboarding Call Preparation
Powered by GitBook
On this page
  • Date Formats
  • Grouping timeline events
  1. Collections
  2. Display

Timeline

Learn how to use the timeline collection display option

PreviousCalendarNextGantt

Last updated 1 year ago

Timeline view is often the right choice if you have event-based data and want to track your records on a linear timeline.

Date Formats

Depending on the type of date field you're using, Noloco will display your timeline events differently. Date Time Fields

If your field has a date and time, then Noloco will (unless specified) display this in the user's local timezone. If you don't include an end date, the timeline event will default to one hour long.

A few examples of events with date times:

  • Meetings that start and end at specific times

  • Bookings that start and end at specific times

Date only Fields

If your field has only a date (and no time) then Noloco will display these as all-day events, using the date of the event, ignoring the user's timezone.

A few examples of events without dates:

  • Birthdays

  • Multi-day events such as conferences

  • Single-day events that don't have a specific start or end date

Mixing date-time fields with all day events:

If you need to display both variable time events and all-day events on the same calendar, it can be quite confusing to get this right with timezones.

But thankfully it is possible to do in Noloco.

Because you need to specify event start and end times, you'll need to use a date-time field.

But to indicate to Noloco that an event is an all-day event, regardless at timezone you can make the event start at midnight UTC (that's not your local timezone).

I.e. if you have an event that's meant to happen on February 1st, you would set the date to be 1st Feb 00:00 or as an ISO string 2023-02-01T00:00:00.000Z

Similarly, to indicate that it's an all-day event, you need to set the end-date to have the same value. That is to say, that the event is only on that day.

If an event needs to span multiple days, but be treated as an all-day event, regardless of timezone, you can adjust the end date to be on the last day of your event, but make sure it's time is midnight UTC (00:00) Below is an example where we mix all-day and specific event time events:

Sample data

Name
Start
End

Multiple days - non all-day

03/02/2023 00:00

04/02/2023 11:30

Starts at midnight

03/02/2023 00:00

03/02/2023 05:00

Multiple Days

01/02/2023 00:00

04/02/2023 00:00

All Day 1

02/02/2023 00:00

02/02/2023 00:00

All Day 2

03/02/2023 00:00

03/02/2023 00:00

Two hours long

05/02/2023 14:00

05/02/2023 16:00

Grouping timeline events

You can group your events by any Single Option field, like a status or type. This produces distinct lanes for your events, to see how events overlap between lanes.

📂