title: D3.js: Trying to build flat calendar
body: <p>Newbie here.I am trying to build a horizontal calendar to indicate people on vacations. I have placed the mockup below with annotation of key feature, I'm trying to incorporate.</p>
  
  <p><img src="https://i.stack.imgur.com/UG1YB.png" alt="enter image description here"></p>
  
  <ul>
  <li>Legend Y - Indicates the person</li>
  <li>Legend X - Indicates the Month and year. </li>
  <li>Each cell is color coded based on holiday or vacation or weekend.</li>
  <li>The calendar part (not including legend area) should be draggable.</li>
  </ul>
  
  <p>I have got rough implementation going...I am able to get the first horizontal calendar,<br>
  Code: <a href="http://jsbin.com/xumabavo/1/edit" rel="nofollow noreferrer">http://jsbin.com/xumabavo/1/edit</a></p>
  
  <ul>
  <li>Is my approach correct?</li>
  <li>how to stack each other?</li>
  <li>How to enable dragging and render dates before and after the window?</li>
  </ul>
  
  <p>Thanks for helping out.</p>