react-ganttchart-planner

react ganttchart planner package with tasks, durations and resources

Demo

Live Demo

https://sameedhasan.github.io/react-ganttchart-planner-demo/

Install

npm install -f react-ganttchart-planner

Usage

import React, { Component } from 'react'

import ReactGanttchartPlanner from 'react-ganttchart-planner'
import 'react-ganttchart-planner/dist/index.css'

class App extends Component {
  render() {
    return (
      <ReactGanttchartPlanner
        shifts={4}
        tasksArray={tasksArray}
        durationsArray={durationsArray}
        resourcesArray={resourcesArray}
      />
    )
  }
}

Default Values

If props will not be passed then default values will be used

  shifts: 4,
  tasksArray: [],
  durationsArray: [],
  resourcesArray: [],

Sample Data

const tasksArray = [
  {
    id: 1,
    name: 'Task 1'
  },
  {
    id: 2,
    name: 'Task 2'
  },
  {
    id: 3,
    name: 'Task 3'
  },
  {
    id: 4,
    name: 'Task 4'
  },
  {
    id: 5,
    name: 'Task 5'
  },
  {
    id: 6,
    name: 'Task 6'
  }
]

const durationsArray = [
  {
    id: 1,
    start: '2023-01-02',
    end: '2023-01-08',
    task: 1,
    resources: [
      {
        id: 1,
        title: 'Resouce 1',
        color: 'red'
      },
      {
        id: 2,
        title: 'Resouce 2',
        color: 'blue'
      },
      {
        id: 3,
        title: 'Resouce 3',
        color: 'green'
      }
    ]
  },
  {
    id: 2,
    start: '2023-01-10',
    end: '2023-01-15',
    task: 2,
    resources: [
      {
        id: 1,
        title: 'Resouce 1',
        color: 'red'
      },
      {
        id: 2,
        title: 'Resouce 2',
        color: 'blue'
      },
      {
        id: 3,
        title: 'Resouce 3',
        color: 'green'
      }
    ]
  },
  {
    id: 3,
    start: '2023-01-11',
    end: '2023-01-18',
    task: 4,
    resources: [
      {
        id: 6,
        title: 'Resouce 6',
        color: 'orange'
      },
      {
        id: 4,
        title: 'Resouce 4',
        color: 'yellow'
      },
      {
        id: 5,
        title: 'Resouce 5',
        color: 'black'
      }
    ]
  },
  {
    id: 4,
    start: '2023-01-01',
    end: '2023-01-02',
    task: 6,
    resources: [
      {
        id: 1,
        title: 'Resouce 1',
        color: 'red'
      },
      {
        id: 2,
        title: 'Resouce 2',
        color: 'blue'
      },
      {
        id: 4,
        title: 'Resouce 4',
        color: 'yellow'
      }
    ]
  }
]

const resourcesArray = [
  {
    id: 1,
    title: 'Resouce 1',
    color: 'red'
  },
  {
    id: 2,
    title: 'Resouce 2',
    color: 'blue'
  },
  {
    id: 3,
    title: 'Resouce 3',
    color: 'green'
  },
  {
    id: 4,
    title: 'Resouce 4',
    color: 'yellow'
  },
  {
    id: 5,
    title: 'Resouce 5',
    color: 'black'
  },
  {
    id: 6,
    title: 'Resouce 6',
    color: 'orange'
  }
]

License

MIT © SameedHasan