CODEWITHSUNDEEP
javascriptd3.jscalendar
hashg
hashg

Reputation: 806

D3.js: Trying to build flat calendar

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.

enter image description here

I have got rough implementation going...I am able to get the first horizontal calendar,
Code: http://jsbin.com/xumabavo/1/edit

Thanks for helping out.

Upvotes: 4

Views: 3273

Answers (1)

VividD
VividD

Reputation: 10536

Is my approach correct?

Yes. Mockup is crucial. Prototype as well. It looks to me that you have confidence, determination, and intelligence necessary for this project.

How to stack each other?

I gather you will get overall data as an array of individual data specific for particular person. You can use index of that array (index corresponds to a person) to shift all visual elements to the appropriate row - in other words, to stack the data. Callback functions can have two parameters d (data) and i (index), something like this:

  .style( "background-color", function( d, i ) {
    // d is datum being rendered
    // i is datum's index in dataset
    // return value based on logic
  } )

How to enable dragging and render dates before and after the window?

It seems to me you would benefit from analyzing this small app: link

enter image description here

Upvotes: 1

Related Questions