# Calendar for "Gantt Chart"
**URL:** https://community.glideapps.com/t/calendar-for-gantt-chart/38277
**Category:** Ask for Help
**Created:** [February 8, 2022, 10:53pm UTC](https://community.glideapps.com/t/calendar-for-gantt-chart/38277 "2022-02-08T22:53:30Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@STK](https://community.glideapps.com/u/STK)
#### Post date: [February 8, 2022, 10:53pm UTC](https://community.glideapps.com/t/calendar-for-gantt-chart/38277/1 "2022-02-08T22:53:30Z")
Is there such a diagram (as a component) of the Calendar display (or how can this be done?) that allows:
1.
to set a dynamic list of user tasks in this “Calendar” on the left with the first and pinned column? and
2.
in the upper “header” fixed line, briefly and sequentially list the dates - in narrow columns?
For what?
- to build a “Gantt Chart” with a color fill of certain (blocks) of horizontal cells and, thereby, display the time (quantity of days) the status of completion of each task?
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [February 9, 2022, 12:31am UTC](https://community.glideapps.com/t/calendar-for-gantt-chart/38277/2 "2022-02-09T00:31:01Z")
I use it by combining spreadsheet and Glide. Tables from spreadsheets are displayed using the webview component. Task items can be added/subtracted from Glide. And some complex formulas are still solved in the spreadsheet.
I don’t know yet if [quickchart.io](http://quickchart.io) has it @Robert_Petitto. But it’s also an image or embedded component
---
### Author:  [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [February 9, 2022, 4:24am UTC](https://community.glideapps.com/t/calendar-for-gantt-chart/38277/3 "2022-02-09T04:24:16Z")
Gantt Charts are possible with Quickchart.
[https://quickchart.io/gallery/#time-scale](https://quickchart.io/gallery/#time-scale)
---
### Author:  [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)
#### Post date: [February 9, 2022, 8:47am UTC](https://community.glideapps.com/t/calendar-for-gantt-chart/38277/4 "2022-02-09T08:47:04Z")
Thanks Darren - I got it working and can add a parameter, e.g. to change the background color to white or pink, etc…
I thought it would then be obvious how to add more parameters. For example, I see it’s possible to move the legend to the bottom.
But I have tried every combination in my URL Construct without success. Can you explain what how to add this parameter to move the legend to the bottom please?
(doesn’t work)
---
### Author:  [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [February 9, 2022, 9:00am UTC](https://community.glideapps.com/t/calendar-for-gantt-chart/38277/5 "2022-02-09T09:00:11Z")
That needs to be part of your chart definition that goes into the template column, which gets passed as the `c` parameter in your Construct URL column.
That first screenshot that you posted shows an example, eg:
```auto
options: {
legend: {
position: 'bottom',
}
}
```
Add the above to your template column.
The available API parameters (that can be used with the Construct URL column) are listed [here](https://quickchart.io/documentation/#parameters).
---
### Author:  [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)
#### Post date: [February 9, 2022, 9:14am UTC](https://community.glideapps.com/t/calendar-for-gantt-chart/38277/6 "2022-02-09T09:14:35Z")
Well it doesn’t like it if I literally cut and paste it and add it to the bottom of my template.
UPDATE:
Ok it worked when I finally tried this version:
Thank you.
---
### Author:  [@STK](https://community.glideapps.com/u/STK)
#### Post date: [February 9, 2022, 9:24am UTC](https://community.glideapps.com/t/calendar-for-gantt-chart/38277/7 "2022-02-09T09:24:10Z")
Thank you so much, Darren, for the hint!
But I would be even more grateful if you could tell me
how
! exactly with Glide !
to manage (edit and add):
1.
the values of the column “Part 1, 2, 3, …”?
2.
the color fill of the blocks, and
3.
the location of these colored blocks?
---
### Author:  [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [February 9, 2022, 10:00am UTC](https://community.glideapps.com/t/calendar-for-gantt-chart/38277/8 "2022-02-09T10:00:59Z")
The sandbox is really useful here. Fiddle with your chart settings in the sandbox, then just copy/paste.
Looks like in your first attempt you had the options section outside the main JSON body.
---
### Author:  [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [February 9, 2022, 10:09am UTC](https://community.glideapps.com/t/calendar-for-gantt-chart/38277/9 "2022-02-09T10:09:42Z")
If you open the Gantt Chart example in the [Quickchart Sandbox](https://quickchart.io/sandbox#%7B%0A%20%20type%3A%20'horizontalBar'%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20labels%3A%20%5B'Part%201'%2C%20'Part%202'%2C%20'Part%203'%2C%20'Part%204'%2C%20'Part%205'%2C%20'Part%206'%5D%2C%0A%20%20%20%20datasets%3A%20%5B%7B%0A%20%20%20%20%20%20data%3A%20%5B%0A%20%20%20%20%20%20%20%20%5Bnew%20Date('2021-02-01')%2C%20new%20Date('2021-05-01')%5D%2C%0A%20%20%20%20%20%20%20%20%5Bnew%20Date('2021-05-10')%2C%20new%20Date('2021-07-01')%5D%2C%0A%20%20%20%20%20%20%20%20%5Bnew%20Date('2021-04-20')%2C%20new%20Date('2021-11-31')%5D%2C%0A%20%20%20%20%20%20%20%20%5Bnew%20Date('2021-08-01')%2C%20new%20Date('2021-09-01')%5D%2C%0A%20%20%20%20%20%20%20%20%5Bnew%20Date('2021-02-10')%2C%20new%20Date('2021-07-01')%5D%2C%0A%20%20%20%20%20%20%20%20%5Bnew%20Date('2021-07-20')%2C%20new%20Date('2021-11-31')%5D%2C%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20backgroundColor%3A%20%5B'rgb(255%2C%2099%2C%20132%2C%201.0)'%2C%20'rgba(255%2C%2099%2C%20132%2C%201.0)'%2C%20'rgba(255%2C%20206%2C%2086%2C%201.0)'%2C%20'rgba(255%2C%20206%2C%2086%2C%201.0)'%2C%20'rgba(255%2C%20206%2C%2086%2C%200.2)'%2C%20undefined%5D%2C%0A%20%20%20%20%7D%2C%20%5D%2C%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20legend%3A%20%7B%0A%20%20%20%20%20%20display%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20annotation%3A%20%7B%0A%20%20%20%20%20%20annotations%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20type%3A%20'line'%2C%0A%20%20%20%20%20%20%20%20mode%3A%20'vertical'%2C%0A%20%20%20%20%20%20%20%20scaleID%3A%20'x-axis-0'%2C%0A%20%20%20%20%20%20%20%20value%3A%20new%20Date('2021-10-30')%2C%0A%20%20%20%20%20%20%20%20borderColor%3A%20'red'%2C%0A%20%20%20%20%20%20%20%20borderWidth%3A%201%2C%0A%20%20%20%20%20%20%20%20label%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20enabled%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20content%3A%20'Deadline'%2C%0A%20%20%20%20%20%20%20%20%20%20position%3A%20'top'%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20scales%3A%20%7B%0A%20%20%20%20%20%20xAxes%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20position%3A%20'top'%2C%0A%20%20%20%20%20%20%20%20type%3A%20'time'%2C%0A%20%20%20%20%20%20%20%20time%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20unit%3A%20'month'%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20ticks%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20min%3A%20new%20Date('2021-01-01')%2C%0A%20%20%20%20%20%20%20%20%20%20max%3A%20new%20Date('2022-01-01')%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%5D%2C%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%7D), you will see the various options there.
You can play around with those until you get it how you want.
The resultant JSON gets used in a Glide template column.
Check the below thread to learn more about how to use quickchart with Glide:
> [@heart\_eyes Quickchart.io: the Cloudinary of Charts —on the fly charts!](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946):
>
> GAME CHANGER! Stumbled upon this site today—a way to create on the fly charts using data from your Glide tables. Images render instantly and you can select one of 14 different charts, customize colors, styles etc all through URL parameters! The video below shows my first attempt to create a chart from scratch and implement it in Glide. Took me less than 5 minutes. End result:
---
### Author:  [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [February 9, 2022, 10:18am UTC](https://community.glideapps.com/t/calendar-for-gantt-chart/38277/10 "2022-02-09T10:18:20Z")
Actually, another tip…
If you find yourself getting that dreaded “Chart error” when you add the chart to a screen, what you can do is go to the GDE, click in your template column:
… copy the whole contents, and then paste that into the quickchart sandbox.
You’ll get the same error, but it’s a lot easier to debug in the sandbox, and generally easier to spot something wrong.
---
### Author:  [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)
#### Post date: [February 9, 2022, 2:59pm UTC](https://community.glideapps.com/t/calendar-for-gantt-chart/38277/11 "2022-02-09T14:59:04Z")
Sorry to keep coming back to you on this - appreciate the tips!
I want to set the min and max axis for the chart to be 0 and 10, respectively. But the hint below seems to use the ‘let’ command. Does this imply it’s not going to be as simple as adding the text to my template or should I persevere?! If so, which fragment should I add?
---
### Author:  [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [February 9, 2022, 3:01pm UTC](https://community.glideapps.com/t/calendar-for-gantt-chart/38277/12 "2022-02-09T15:01:57Z")
That looks like an example of how you would do it programatically, eg with JavaScript.
~~You should be able to use everything you see there except the “let” keyword.~~
Scratch that, I didn’t look closely enough…
Take everything from the second ident… starting with `scales:` and ending with the curly brace on the second last line. And all of that needs to be within the `options` section of your chart definition.
Again… try it in the sandbox and you’ll soon see.
Here is an [example](https://quickchart.io/documentation/#axes) from the docs that you should be able to copy and paste into the sandbox.
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [February 9, 2022, 11:59pm UTC](https://community.glideapps.com/t/calendar-for-gantt-chart/38277/13 "2022-02-09T23:59:02Z")
Adding to this, except some certain functions (let’s say a for loop), I expect options and plugins to work normally with quickchart.