JSFiddle - React, Tailwind, and code Playground

by BeNdErR

HTML

<div id="calendar">


</div>

CSS

.month {
  background: yellow;
}
.day{
  display: inline-block;
  width: 40px;
  background: lightblue;
}

JavaScript

var user = {
	name: 'Tommaso',
  activities: [
  	{ id: 1, estimated: 0.25, startdate: 1 },
    { id: 2, estimated: 1, startdate: 1 },
    { id: 3, estimated: 0.25, startdate: 3 },
    { id: 4, estimated: 0.75, startdate: 2 },
    { id: 5, estimated: 0.5, startdate: 7 },
    { id: 6, estimated: 4.5, startdate: 8 },
  ]
};

var months = {
	name: 'febbraio',
  id: "m2",
  days: [
  	{ id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
    { id: 8 },
    { id: 9 },
    { id: 10 }
  ]
}

var DAYWIDTH = 40;
function renderMonth() {
	var cal = document.getElementById("calendar");
  var month = document.createElement("div");
  month.id = months.id;
  month.className = "month";
  for (var x = 0; x < months.days.length; x++) {
  	var day = document.createElement("div");
    day.id = months.days[x].id;
    day.className = "day";
    day.innerHTML = months.days[x].id;
  	month.appendChild(day);
  }
  cal.appendChild(month);
  
}
function renderActivity(container, activity) {
	var row = document.createElement("div");
  row.id = activity.id;
  row.className = "activityRow";
  
  var element = document.createElement("div");
  element.id = activity.id;
  element.style.width = (DAYWIDTH * activity.estimated) + "px";
  element.style.marginLeft = (DAYWIDTH * activity.startdate) + "px";
  element.style.background = randomColor();
  element.innerHTML = activity.id;
  element.className = "activity";
  
  
  row.appendChild(element);
  container.appendChild(row);
}

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
function randomColor() {
	return ['red', 'blue', 'yellow', 'grey', 'pink', 'brown', 'green', 'lightgray', 'cyan', 'orange'][Math.floor(Math.random() * 10)]; 
}

//---
renderMonth();
var m = document.getElementById("m2");
for (var x = 0; x < user.activities.length; x++){
	renderActivity(m, user.activities[x]);
}