# Timeline Format

The xViz Gantt Chart offers formatting options for dates in the timeline header.

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FmKaeruJz0sXCxaCOisUI%2Fimage.png?alt=media&#x26;token=3bd5107e-f3f3-4d24-b3a5-ecd6d279ece1" alt=""><figcaption><p>Image 1: Timeline formatting with xViz Gantt Chart</p></figcaption></figure>

### Steps to format dates for Timeline:

1. Go to the Advance Editor

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FtgpwcL8FG8CfS4IJ0gcr%2Fimage.png?alt=media&#x26;token=9d21584a-a702-44ea-8abb-c08b54ccb6b1" alt="" width="73"><figcaption><p>Image 2: Advance Editor icon</p></figcaption></figure>

2. Then, navigate to the Timeline tab, where you will find the Format text box located below the Interval text box.

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FJzJK9RjApUDEUMyHgltT%2Fimage.png?alt=media&#x26;token=8f40a225-dd36-4cb1-bea6-8c96053c68cd" alt="" width="375"><figcaption><p>Image 3: Format text box in Timeline tab</p></figcaption></figure>

3. Afterwards, you can format the date to determine how dates are displayed on the timeline header.

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FR4o1SHIKDuuDIHp9b9yh%2Fimage.png?alt=media&#x26;token=45bbab50-530f-47dd-b73a-f1efbd2ceec1" alt="" width="309"><figcaption><p>Image 4: Format Timeline</p></figcaption></figure>

The final result, the timeline header is formatted, is displayed in the image below:

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FmKaeruJz0sXCxaCOisUI%2Fimage.png?alt=media&#x26;token=3bd5107e-f3f3-4d24-b3a5-ecd6d279ece1" alt=""><figcaption><p>Image 5: Timeline formatting with xViz Gantt Chart</p></figcaption></figure>

### Format Keywords:

Below are the format keywords for customizing the timeline, along with an example. In this example, the date is August 6, 2024, 3:05:02 AM, and week start is set to Monday. Note that the format keywords are case sensitive.

<table data-header-hidden><thead><tr><th></th><th width="327"></th><th></th></tr></thead><tbody><tr><td><strong>Format</strong></td><td><strong>Notes</strong></td><td><strong>Result</strong></td></tr><tr><td>YYYY</td><td>4-digit year</td><td>2024</td></tr><tr><td>YY</td><td>Last 2 digits of the year</td><td>24</td></tr><tr><td>MMMM</td><td>Full month name</td><td>August</td></tr><tr><td>MMM</td><td>3-letter month abbreviation</td><td>Aug</td></tr><tr><td>MM</td><td>Month number with leading zeros</td><td>08</td></tr><tr><td>M</td><td>Month number without leading zeros</td><td>8</td></tr><tr><td>Q</td><td>Quarter number</td><td>3</td></tr><tr><td>w</td><td>Week number of the year without leading zeros</td><td>32</td></tr><tr><td>ww</td><td>Week number of the year with leading zeros</td><td>32</td></tr><tr><td>D</td><td>Day of the month without leading zeros</td><td>6</td></tr><tr><td>DD</td><td>Day of the month with leading zeros</td><td>06</td></tr><tr><td>ddd</td><td>3-letter weekday abbreviation</td><td>Tue</td></tr><tr><td>dddd</td><td>Full weekday name</td><td>Tuesday</td></tr><tr><td>h</td><td>12-hour clock without leading zeros</td><td>3 AM</td></tr><tr><td>hh</td><td>12-hour clock with leading zeros</td><td>03 AM</td></tr><tr><td>H</td><td>24-hour clock without leading zeros</td><td>3</td></tr><tr><td>HH</td><td>24-hour clock with leading zeros</td><td>03</td></tr><tr><td>m</td><td>Minutes without leading zeros</td><td>5</td></tr><tr><td>mm</td><td>Minutes with leading zeros</td><td>05</td></tr><tr><td>s</td><td>Seconds without leading zeros</td><td>2</td></tr><tr><td>ss</td><td>Seconds with leading zeros</td><td>02</td></tr></tbody></table>

### Template to format Timeline Header:

Combine keywords with additional words encapsulated in double quotes.

<table data-header-hidden><thead><tr><th width="239"></th><th width="182"></th><th></th></tr></thead><tbody><tr><td><strong>Format</strong> </td><td><strong>Result in Timeline</strong></td><td><strong>Notes</strong></td></tr><tr><td>"Q"Q</td><td>Q3</td><td>The Q between double quotes is extra text</td></tr><tr><td>YYYY</td><td>2024</td><td></td></tr><tr><td>MMM</td><td>Aug</td><td></td></tr><tr><td>MMM" "DD", "YYYY  </td><td>Aug 06, 2024</td><td>Comma is added here, similarly any other text or symbols can be added in between double quotes</td></tr></tbody></table>

**Note:** If the header format is set to 'Combined' or 'Days' in the Timeline options of the Format pane, then the Format text boxes will not appear in the Timeline tab.
