smart_env

<!DOCTYPE html>
<html>
  <head>
    <title>drag 'n drop test</title>
    
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
    <style>
      svg {
        font: 10px sans-serif;
        background: white;
        display:block;
        margin:0 auto;
      }
      /*button {
      clear:right;
      float:right;
      }*/
      .chart rect {
        stroke: white;

}
      rect.section {
        cursor: ns-resize;
      }
      .line {
        fill:none;
        stroke:#000;
        stroke-width:1.5px;
      }
      .axis path, .axis line {
        fill:none;
        stroke:silver;
        shape-rendering: crispEdges;
      }
      .axis path {
        display: none;
      }
      .grid {
        fill:none;
        stroke-width:0.5px;
        stroke:#000;
        opacity:0.2;
      }
      .ratio {
        fill:#f2c180;
        color:#f2c180;
      }
      .fsratio {
        fill:#f3a53d;
        color:#f3a53d;
      }
      .students {
        fill:#5cadf0;
        color:#5cadf0;
      }
      .faculty {
        fill:steelblue;
        color:steelblue;
      }
      #wrap {
        width:910px;
        margin:0 auto;
      }
      div.tooltip {
        color: #222;
        background-color: #fff;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
      }
      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <script>
      /**
 * Created by jmuyskens on 2/9/14.
 */

var margin = {top:10, right: 10, bottom: 10, left: 50},
          height = 500 - margin.top - margin.bottom,
          height = 500 - margin.top - margin.bottom,
          width  = 500 - margin.left - margin.right;

var days = ['lundi','mardi','mercredi','jeudi','vendredi'];
      var hours = ['08:00 AM','08:30 AM','09:00 AM','09:30 AM','10:00 AM','10:30 AM','11:00 AM','11:30 AM','12:00 PM','12:30 PM',
                   '01:00 PM','01:30 PM','02:00 PM','02:30 PM','03:00 PM','03:30 PM','04:00 PM','04:30 PM','05:00 PM','05:30 PM','06:00 PM',
                   '06:30 PM','07:00 PM','07:30 PM','08:00 PM','08:30 PM','09:00 PM','09:30 PM'];

var hourScaleRangeBand = height / hours.length;

var tooltip = d3.select('body').append('div')
      .attr('class', 'hidden tooltip');

courses = [
        {
          id: 0,
          abbr: '',
          time: {
            start: '10:00 AM',
            end: '10:15 AM'
          },
          day: ['lundi'],
          name: "Theo"
        }
      ];

var week = [];
      var format = d3.time.format("%I:%M %p");
      var drag = d3.behavior.drag()
      .origin(Object);

var d3datehours = hours.map(format.parse);

days.forEach(function(day){
        var hourObj = {};
        hours.forEach(function(hour){
          hourObj[hour] = {
            occupied: false,
            course: ''
          };
        });
        week.push(hourObj.day = day);
      });

var dayScale = d3.scale.ordinal()
      .domain(days)
      .rangeRoundBands([0, width], 0.01);

var hourScale = d3.time.scale()
      .domain([d3datehours[0],d3datehours[27]])
      .rangeRound([0, height]);

svg = d3.select('body').append('svg')
        .attr('height', height + margin.top + margin.bottom)
        .attr('width', width + margin.right + margin.left)
        .append('g')
        .attr('transform','translate(' + margin.left + ',' + margin.top + ')');

function makeHourAxis() {
        return d3.svg.axis()
          .scale(hourScale)
          .orient('left')
      }

function makeDayAxis() {
        return d3.svg.axis()
          .scale(dayScale)
          .orient('top')
      }

svg.append('g')
        .attr('class', 'hour axis')
        .attr('transform','translate(' + width + ',0)')
        .attr('transform','translate(' + width + ',0)')
        .call(makeHourAxis().ticks(hours.length).tickSize(width, 0, 0).tickFormat(""));

svg.append('g')
        .attr('class', 'hour axis')
        .call(makeHourAxis());

svg.append('g')
        .attr('class', 'day axis')
        .attr('transform', 'translate(' + (dayScale.rangeBand() / 2) + ',' + height + ')')
        .call(makeDayAxis().tickSize(height, 0, 0).tickFormat(""));

svg.append('g')
        .attr('class', 'day axis')
        .call(makeDayAxis().tickSize(0));

sections.append('rect')
        .attr('class','section')
        .attr('y', 0)
        .attr('x', function(d){ return dayScale(d.day); })
        .attr('width', dayScale.rangeBand())
        .attr('height', function(d) {
        return hourScale(format.parse(d.time.end)) - hourScale(format.parse(d.time.start));
      });

sections.append('text')
        .style('fill', 'white')
        .attr('y', 10)
        .attr('x', function(d){ return dayScale(d.day); })
        .text(function(d){ return d.abbr; });

</script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js