Calendar_Test

by mikeskinner

HTML

<!DOCTYPE HTML>
<html>

  <head>https://jsfiddle.net/mikeskinner/p629b75c/3/#save
  
 
  </head>

  <body>

    <p>Calendar DIV Test</p>
<div id="container"  ondrop="drop(event)" ondragover="allowDrop(event)">


    <div id="div1" class="stripe3"  draggable="true" ondragstart="drag(event)" onmouseout="test()">
      Width = 300 - Drag to Resize
    </div>
    <br>

    <div id="div2" class="stripe2">
      Text in DIV2
    </div>
    <br>


    <div id="div3" class="stripe1">
      Text in DIV3 with a completly different contnet to test size
    </div>

</div>

 

  </body>

</html>

CSS

div {
  width: fit-content;
  padding: 5px;
  border: 1px solid #aaaaaa;
  background-color: tan;
  text-align: center;
  border-left: 5px;
  border-left-style: solid;
  overflow: hidden;
  resize: horizontal;
  white-space: nowrap;
  border-radius: 0px 5px 5px 0px;
  /*font-weight: bold;*/
}

#div1 {
   border-left-color: #ff0000;
   width: 300px;
}

#div1:hover {
  cursor: move;
}

#div2 {
   border-left-color: #00ff00;
}
#div3 {
   border-left-color: #0000ff;
   overflow: auto;
   width: 150px;
}
.stripe2 {
    background: repeating-linear-gradient(
  -45deg,
  #ffffff,
  #ffffff 5px,
  #a6ed87 5px,
  #a6ed87 10px
);
}

#container {
  width: 100%;
}

.stripe3 {
   
  background: repeating-linear-gradient(
  -45deg,
  #ffffff,
  #ffffff 5px,
  #f0d9c5 5px,
  #f0d9c5 10px
);
}

.stripe1 {
  background: repeating-linear-gradient(
  -45deg,
  #ffffff,
  #ffffff 5px,
  #c0ffee 5px,
  #c0ffee 10px
);
}

JavaScript

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  //ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

function test() {
	var tmp = document.getElementById("div1").offsetWidth - 15;
  document.getElementById("div1").innerHTML = "Width = " + tmp + " - Drag to Resize";
}