CSS calendar with progress bar (Gantt style)

I have attached a file with my outline of what I need done. Ideally I want to programmatically supply data to populate rows and columns. In my attached example it's a calendar but it could be anything (columns and rows will change). I want to supply data such as with data attributes for example: <div class="class-names" data-name="1" data-start="825" data-end="865"> <h1>Tooltip title</h1> content here </div> and I want to product a calendar gantt chart like seen in the attached picture where a bar will show up in the selected period of time. It will have a circle with a number or letter (corresponding to data-name for example) and when you hover (or click) on the number it will show a tooltip with the contained data in the div. This should be standalone and not dependent on a framework (no bootstrap, css grid, etc..), although you can use javascript libraries.