JSainsburyPLC / react-timelines

React Timelines Library
https://jsainsburyplc.github.io/react-timelines/
MIT License
257 stars 118 forks source link

Feature/Help needed: Hide specific columns #137

Open ioncodes opened 4 years ago

ioncodes commented 4 years ago

I'm using this to create a timeline based on weeks and days:

image

I used the following code to create the cells:

export const buildWeekCells = () => {
  const v = []
  for (let i = 0; i < 52; i += 1) {
    const week = moment().startOf('year').weekday(1).add(i, 'week')

    v.push({
      id: `w${i}`,
      title: `W${i}`,
      start: week.toDate(),
      end: week.add(1, 'week').subtract(2, 'day').toDate(),
    })
  }

  return v
}

export const buildDayCells = () => {
  const v = []
  for (let i = 0; i < 365; i += 1) {
    const day = moment().startOf('year').weekday(7).add(i, 'day')

    if (day.weekday() !== 6 && day.weekday() !== 0) {
      v.push({
        id: `d${i}`,
        title: day.toString()[0],
        start: day.toDate(),
        end: day.add(1, 'day').toDate(),
      })
    }
  }

  return v
}

I couldn't find a way to hide specific columns (in my case the weekends). This could be very useful. Any ideas on how to implement this?

dakkusingh commented 4 years ago

That would be an awesome feature ++

lsbrillant commented 3 years ago

Not sure exactly how it would interact with the event cell rendering, but I have #135 as a pull request that could be used to do something like this. Add class to weekend, then use css to shade or remove those cells.