DEV Community: Bryntum

Migrating from an Excel Gantt chart to a Bryntum Gantt chart

Bryntum — Thu, 21 Sep 2023 18:30:45 +0000

Microsoft Excel is a common tool used in project management. It's affordable and simple to use, and if you need to create a Gantt chart to schedule project tasks, Excel has many template Gantt charts to get you started.

However, you may need more advanced functionality from your Gantt chart than Microsoft Excel provides, for example:

Scheduling tasks using dependencies and constraints.
Using recurrent and fixed-time intervals.
Handling large datasets.
Customizing the rendering and styling.

If your project would benefit from these capabilities, then the Bryntum Gantt web component is a better choice.

In this tutorial, we'll show you how to get Gantt chart data from an Excel file into a Bryntum Gantt chart. We'll do the following:

Write a migration script to convert data from an Excel Gantt chart to a JSON file that can be read by a Bryntum Gantt chart.
Set up an Express.js API endpoint to return the JSON data.
Create a Bryntum Gantt chart that gets data from the API endpoint.

First we'll get data from a simple Excel Gantt chart. Then we'll modify the code to get data from a more complex Gantt chart. You can adjust the code to get data from different Excel Gantt charts.

Writing a migration script to convert data from an Excel Gantt chart to a JSON file

Start by cloning the Excel to Bryntum Server starter GitHub repository. This repository includes a server.js file, which contains an Express.js server API endpoint at the "/download" route for GET requests. It also has CORS set up for when we make requests to the API endpoint from our client-side Bryntum Gantt chart.

You can find the completed code for this tutorial in the completed-server branch of the starter repository.

There are two Excel files in the starter's root directory:

simple-gantt-chart.xlsx
agile-gantt-chart.xlsx

These are Excel Gantt chart templates taken from Microsoft 365 Excel templates.

Once you've cloned the repository, install the dependencies by running the following command:

npm install

In the root folder, create a file called migration-simple-gantt.js. This is where we'll add the script to read the Excel data from simple-gantt-chart.xlsx, convert it to a JSON structure that can be read by a Bryntum Gantt chart, and save the JSON data to a file.

Converting Excel file data to a JavaScript object

To read the Excel file and convert the data to JSON format, we'll use the xlsx library. Import the library in your migration-simple-gantt.js file:

import xlsx from "xlsx";

Add the following lines of code:

// read the Excel file
const workbook = xlsx.readFile("./simple-gantt-chart.xlsx");
const sheetName = workbook.SheetNames[0]; // select the sheet you want
const worksheet = workbook.Sheets[sheetName];

const jsonData = xlsx.utils.sheet_to_json(worksheet);

The readFile method reads the data from the Excel file and parses it into a workbook object. The Excel file has two sheets, we only want the data from the first sheet. The workbook.SheetNames array is an ordered list of the sheets in the Excel workbook. We get the name of the first sheet from the ordered lists of sheets. We then get the worksheet data from the Sheets object.

We use the sheet_to_json utility method to convert the worksheet object into an array of JavaScript objects.

If you console.log the jsonData variable, you'll see a large array of objects returned:

[
  {
    'Create a Project Schedule in this worksheet.\r\nEnter title of this project in cell B1. \r\nInformation about how to use this worksheet, 
including instructions for screen readers and the author of this workbook is in the About worksheet.\r\nContinue navigating down column A to h
ear further instructions.': 'Enter Company Name in cell B2.',
    'PROJECT TITLE': 'Company Name',

    ...

Each object in the array is a row of Excel data, for most of the data. You'll notice that a lot of the text returned is not visible in the Excel Gantt chart. This is the text from cells with hidden values for explaining how to use the template worksheet. For example, if you click on cell A1 in the Excel file, you'll see the hidden text in the formula bar.

The tasks data that we need to extract from the array objects is in the "PROJECT TITLE", __EMPTY", "__EMPTY_1", "__EMPTY_2", "__EMPTY_3", and "__EMPTY_5" property values.

Let's create a function to extract the tasks data and convert it to the format required by Bryntum Gantt.

Converting the Excel data to a JSON file compatible with Bryntum Gantt

Later in this tutorial, we'll use the Bryntum Gantt chart Crud Manager to simplify fetching data from our API. The Crud Manager expects the data it receives from an API endpoint to have a specific structure. We need to extract the data we need from the jsonData variable and format it appropriately.

The start date and end date values of the "__EMPTY_2" and "__EMPTY_3" properties are Excel date numbers. Excel stores dates as a number format, with the number representing the offset from an epoch. We need a function to convert Excel numbers to JavaScript Date objects. Add the following function to the top of the migration-simple-gantt.js file to convert an Excel date number to a JavaScript Date object:

function excelToJSDate(excelDate) {
  const dateObj = xlsx.SSF.parse_date_code(excelDate);
  return new Date(
    dateObj.y,
    dateObj.m - 1,
    dateObj.d,
    dateObj.H,
    dateObj.M,
    dateObj.S
  );
}

The xlsx SSF (SpreadSheet Format) object has a parse_date_code method that parses the Excel number to an SFF date object. We use this Date object to create a JavaScript Date object. To construct the JavaScript Date object, we subtract one from the SFF date object, as months are zero-indexed in JavaScript.

Now we need a function to create an array of tasks data that can be read by a Bryntum Gantt chart. Add the following function below the excelToJSDate function:

function createBryntumTasksRows(data) {
  let taskId = 0;
  let taskStore = [];
  let currentParentId;

  // name of first task is "Phase 1 Title"
  // only start adding tasks after it's found
  const firstTaskName = "Phase 1 Title";
  const exampleTaskName = "Insert new rows ABOVE this one";
  let isFirstTaskFound = false;
  for (let i = 0; i < data.length; i++) {
    if (
      data[i].hasOwnProperty("PROJECT TITLE") &&
      data[i]["PROJECT TITLE"].startsWith("Phase")
    ) {
      if (data[i]["PROJECT TITLE"] === firstTaskName) {
        isFirstTaskFound = true;
      }
      currentParentId = taskId;
      // parent tasks
      taskStore.push({
        id: taskId++,
        name: data[i]["PROJECT TITLE"],
        expanded: true,
      });
    } else if (data[i]["PROJECT TITLE"]) {
      if (!isFirstTaskFound) {
        continue;
      }
      // last task has been added
      if (data[i]["PROJECT TITLE"] === exampleTaskName) {
        break;
      }
      // child tasks
      taskStore.push({
        id: taskId++,
        name: data[i]["PROJECT TITLE"],
        parentId: currentParentId,
        resourceAssignment: data[i]["__EMPTY"],
        percentDone: data[i]["__EMPTY_1"] * 100,
        startDate: excelToJSDate(data[i]["__EMPTY_2"]),
        endDate: excelToJSDate(data[i]["__EMPTY_3"]),
        manuallyScheduled: true,
      });
    }
  }

  return taskStore;
}

This function loops through the objects of the Excel data that we pass in as arguments. These objects mostly represent Excel rows. We construct a taskStore array to store the new task objects. We only start adding to the taskStore once the firstTaskName is found.

For this specific Gantt data, we determine which tasks are parent tasks by checking if the "PROJECT TITLE" starts with the text "Phase". We create a unique id for each task using the taskId variable, which increments on each loop.

If the "PROJECT TITLE" does not start with the text "Phase", the task is made a child of the last parent task using the parentId property. Once the exampleTaskName is reached, we break out of the loop.

Now add the following variable below the jsonData variable to create the task rows:

const tasksRows = createBryntumTasksRows(jsonData);

If you console.log the tasksRows, you'll see the following array:

[
  { id: 0, name: 'Phase 1 Title', expanded: true },
  {
    id: 1,
    name: 'Task 1',
    parentId: 0,
    resourceAssignment: 'Name',
    percentDone: 50,
    startDate: 'Mon May 15 2023 00:00:00 GMT+0200 (South Africa Standard Time)',
    endDate: 'Thu May 18 2023 00:00:00 GMT+0200 (South Africa Standard Time)',
    manuallyScheduled: true
  },
  {
    id: 2,
    ...

If the startDate and endDate values are behind what they should be, it may be due to the Excel TODAY() function that's used to determine the dates in the Excel file. The TODAY() function is a volatile function, which means that it recalculates every time the spreadsheet is opened. When you read the Excel file using a library like xlsx, it won't trigger these formulas to recalculate. It will read the last calculated value from when the file was last opened and saved in Excel. If the dates are behind what they should be, make a small change to the Excel file, save the change, and try again.

Now, we need to add a resources property and an assignments property for the JSON object that we'll create. The resources property will populate the ResourceStore of the Bryntum Gantt, which holds the resources that can be assigned to tasks. The simple Gantt chart only has a single resource, "Name", that's assigned to the first child task. The assignments property will show which tasks resources are assigned to.

Add the following lines of code below the tasksRows variable:

// create resources
const resourceNames = new Set();
const resourcesRows = tasksRows
  .filter(
    (item) =>
      item.resourceAssignment && !resourceNames.has(item.resourceAssignment)
  )
  .map((item, i) => {
    const name = item.resourceAssignment;
    return {
      id: i,
      name,
    };
  });

We determine the resources of the data using the resourceAssignment property of the tasksRows data. We then create a resourcesRows array, where each object in the array is a resource.

If you console.log the resourcesRows variable, you'll see the following array:

[ { id: 0, name: 'Name' } ]

Now let's create the rows for assignments. Add the following lines of code below the resourcesRows variable:

// create assignments
const resourcesWithAssignments = tasksRows.filter(
  (item) => item.resourceAssignment
);

const assignmentsRows = resourcesWithAssignments.map((item, i) => {
  const resource = resourcesRows.find(
    (resource) => resource.name === item.resourceAssignment
  );
  return {
    id: i,
    event: item.id,
    resource: resource.id,
  };
});

To determine the tasks (events) that are assigned to a resource, we first find tasks that have a resource assignment. We then use the tasks to get the resource id and construct the assignmentsRows array.

If you console.log the assignmentsRows variable, you'll see the following array:

[ { id: 0, event: 1, resource: 0 } ]

Now create an object for the data that will be sent to the Bryntum Gantt chart:

// convert JSON data to the expected load response structure
const ganttLoadResponse = {
  success: true,
  tasks: {
    rows: tasksRows,
  },
  resources: {
    rows: resourcesRows,
  },
  assignments: {
    rows: assignmentsRows,
  },
};

Next we need to convert this object to JSON format and save it in a JSON file.

Saving the data to a JSON file

Add the following lines of code below the ganttLoadResponse variable:

const dataJson = JSON.stringify(ganttLoadResponse, null, 2); // convert the data to JSON, indented with 2 spaces

// define the path to the data folder
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const dataPath = path.join(__dirname, "data");

// ensure the data directory exists
if (!fs.existsSync(dataPath)) {
  fs.mkdirSync(dataPath);
}

// define the path to the JSON file in the data folder
const filePath = path.join(dataPath, "simple-gantt-chart.json");

// write the JSON string to a file in the data directory
fs.writeFile(filePath, dataJson, (err) => {
  if (err) throw err;
  console.log("JSON data written to file");
});

Import the Node modules required:

import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";
import { dirname } from "path";

We convert the JavaScript object to a JSON string. We then create a JSON file called simple-gantt-chart.json in the data folder using the Node File System module and add the Excel JSON data to it.

To run this script, use the following command:

node migration-simple-gantt.js

This will create a simple-gantt-chart.json file in the data folder.

For this tutorial, we simply save Excel Gantt data to a JSON file on the server. If you want to persist the data to a database, you can check out the saving data section of our docs

Next, we'll set up an API endpoint that will send the JSON data to the Bryntum Gantt chart.

Setting up an Express server with an API endpoint

In the server.js file, there is an API endpoint at the "/download" route for GET requests. Replace the code in the try block with the following lines of code:

const data = await fs.readFile("./data/simple-gantt-chart.json", "utf-8");
const jsonData = JSON.parse(data);
res.json(jsonData);

Import the Node File System module with promise-based functions:

import fs from "fs/promises";

We read the JSON data from the file system, parse it, and then return it from the API as a JSON response.

Now start the server using the following command:

npm run start

If you make a GET request to your API endpoint at http://localhost:3000/download, you should see the following response:

{
    "success": true,
    "tasks": {
        "rows": [
            {
                "id": 0,
                "name": "Phase 1 Title",
                "expanded": true
            },
            {
                "id": 1,
                "name": "Task 1",
                "parentId": 0,
                "resourceAssignment": "Name",
                "percentDone": 50,
                "startDate": "Mon May 15 2023 00:00:00 GMT+0200 (South Africa Standard Time)",
                "endDate": "Thu May 18 2023 00:00:00 GMT+0200 (South Africa Standard Time)",
                "manuallyScheduled": true
            },
      ...

Now we can create a Bryntum Gantt chart that will get data from this API endpoint.

Creating a client-side Bryntum Gantt chart

To get started, clone the following Excel to Bryntum Client starter GitHub repository. It has a "completed-gantt" branch that shows the code for the completed tutorial. It uses Vite, which is a development server and JavaScript bundler. Install the Vite dev dependency by running the following command:

npm install

Next, install the Bryntum Gantt component by following our guide to installing the Gantt chart component using npm.

The main.js file contains code for a basic Bryntum Gantt chart. The project config property is used to configure the data stores the Gantt chart uses. The tasksData property contains some example inline data. To simplify the data structure, the taskStore is configured to consume a flat dataset, where the task parents are defined using the parentId property. Flat data is converted to tree data with autotree and transformFlatData so that the Bryntum Gantt can parse it.

Start the development server by running the following command:

npm run dev

You should see a Gantt chart with one parent task and one child task.

Next, we'll use the Bryntum Gantt Crud Manager to get the Excel data from our API.

Getting the data from the API endpoint

First, remove the tasksData property from the gantt config in the main.js file.

Add the following properties to the gantt config, below the taskStore property:

  transport: {
    load: {
      url: "http://localhost:3000/download",
    },
  },
  autoLoad: true,
  validateResponse: true,

The transport property is used to populate the Gantt chart data stores. We configured the load property to get data from our server API endpoint. We set the autoLoad and validateResponse properties to true to initiate a data load when the store is instantiated and to check the response structure of requests made by the Crud Manager, respectively.

You can also configure transport to sync data changes to a specific URL. To learn more, you can read the saving data section of the Crud Manager guide in our docs.

We need to add columns to our Gantt chart to match the headers of the Excel Gantt chart. Add the following objects to the columns property of the gantt config:

    {
      type: "resourceassignment",
      text: "Assigned Resources",
      showAvatars: false,
      width: 160,
    },
    {
      type: "percent",
      text: "PROGRESS",
      field: "renderedPercentDone",
      showValue: true,
      width: 160,
    },
    { type: "date", field: "startDate", text: "START", width: 110 },
    { type: "date", field: "endDate", text: "END", width: 110 },

Now run the client and server development servers and you'll see the Bryntum Gantt chart with the data from the Excel file:

The Bryntum Gantt chart has a lot of functionality out of the box, such as:

Configurable and sortable task columns. Right-click on a column header to see the options.
Collapsable task groups.
Drag-and-drop reordering of tasks.
Add, edit, copy, and delete tasks. Right-click on a task to see a pop-up menu with these actions and more, including editing dependencies.
Draggable task durations.
Resizeable task durations. Hover over the left or right side of a task duration until the cursor changes to a resize icon. Then click and drag left or right.
Create task dependencies. Hover over the left or right side of a task duration until you see a circle icon. Then click and drag to connect the task to another task.
Change date ranges or filter tasks by name by right-clicking on one of the date headers.

Now, let's get Excel data from a more complex Excel Gantt chart.

Getting data from a more complex Excel Gantt chart

The data source we'll use for this part of the tutorial is the agile-gantt-chart.xlsx Excel file, which will require changes to our server and client code.

Changes to the server: Writing a new migration script

Make a copy of the migration-simple-gantt.js file and rename it migration-agile-gantt.js.

The data we need from the agile-gantt-chart.xlsx Excel file is in sheet two. Change the workbook and sheetName variables in the migration-agile-gantt.js file to get data from the second workbook sheet of the agile Gantt chart:

    const workbook = xlsx.readFile("./agile-gantt-chart.xlsx");
    const sheetName = workbook.SheetNames[1];

Remove the jsonData variable:

    const jsonData = xlsx.utils.sheet_to_json(worksheet);

Replace it with the following lines of code:

    const csv = xlsx.utils.sheet_to_csv(worksheet);
    const jsonData = await csvToJson().fromString(csv);

Instead of converting the Excel data directly to JSON, we first convert it to CSV values. We then use the csvtojson library to convert the CSV values to a JSON string.

Make sure that you import the csvToJson function from the csvtojson library:

import csvToJson from "csvtojson";

We use this method to convert the Excel data to a JSON data object as the JSON object output is easier to parse than the output we used for the simple-gantt-chart.xlsx Excel file. You might like to try each method to see which works best for you.

If you console.log the jsonData object, you'll see a large array of objects:

[
    {
        field1: "",
        field2: "PROJECT: Light",
        field3: "",
        ...
        field68: "",
    },
    {
        field1: "",
        field2: "",
        ...
        field68: "",
    },
      ...

Each object in the "data" array represents a row in the Excel file. The columns are named incrementally from "field1" to "field68".

The data we need for the Gantt chart is in columns two to seven of the Excel chart, which correspond to the properties field2 to field7 of the "data" array objects. Unlike the previous Gantt chart we imported data from, there is no end date for each task in this chart. Instead, each task has a start date and a duration in days. This Gantt chart also has a "Categories" column.

The start date values of the field6 keys are not in Excel date number format, so we don't need the excelToJSDate function. Replace it with the following function:

function convertToDate(dateStr) {
  let [month, day, year] = dateStr.split("/");
  year = year.length === 2 ? "20" + year : year;
  month = month - 1;
  return new Date(year, month, day);
}

This function converts the date string to a JavaScript Date object.

Now, replace the existing createBryntumTasksRows with the one below:

function createBryntumTasksRows(data) {
  let taskId = 0;
  let taskStore = [];
  let currentParentId = null;

  // name of first task is "Phase 1 Title"
  // only start adding tasks after it's found
  const firstTaskName = "Project development";
  const exampleTaskName = "Task 4";
  let isFirstTaskFound = false;
  for (let i = 0; i < data.length; i++) {
    // check for first task
    if (data[i]["field2"] === firstTaskName) {
      isFirstTaskFound = true;
    }
    // check for example task
    if (data[i]["field2"] === exampleTaskName) {
      break;
    }

    if (isFirstTaskFound) {
      // parent task
      if (data[i]["field6"] === "") {
        currentParentId = taskId;
        taskStore.push({
          id: taskId++,
          name: data[i]["field2"],
          expanded: true,
        });
      } else {
        // child tasks
        taskStore.push({
          id: taskId++,
          name: data[i]["field2"],
          parentId: currentParentId,
          category: data[i]["field3"],
          resourceAssignment: data[i]["field4"] ? data[i]["field4"] : undefined,
          percentDone: data[i]["field5"].slice(0, -1) * 1,
          startDate: convertToDate(data[i]["field6"]),
          duration: data[i]["field3"] === "Milestone" ? 0 : data[i]["field7"],
          manuallyScheduled: true,
        });
      }
    }
  }

  return taskStore;
}

This function is similar to the one we used for the simple Gantt chart. We check if a task is a parent task if the value of the "field6" property is an empty string. The child tasks have no endDate property and there's an additional category property. The duration property is set to 0 if the category is "Milestone". This will indicate to the Bryntum Gantt that the task is a milestone and the task bar will be styled like a milestone, diamond-shaped. The resources and assignments properties will be created in the same way as previously.

Change the name of the filePath that the JSON file will be written to:

const filePath = path.join(dataPath, "agile-gantt-chart.json");

In the server.js file, change the JSON file that the fs.readFile method reads from:

    const data = await fs.readFile("./data/agile-gantt-chart.json", "utf-8");

Run the migration script to create the agile-gantt-chart.json file:

node migration-agile-gantt.js

We'll now change our client-side Bryntum Gantt chart to resemble the structure of the Excel Gantt chart.

Changes to the client

First, in the main.js file, we'll add extra gantt columns and adjust the width of the columns. Change the columns configuration to the following:

  columns: [
    { type: "name", width: 190, text: "Milestone description" },
    { width: 80, text: "Category", field: "category" },
    {
      type: "resourceassignment",
      text: "Assigned to",
      showAvatars: false,
      width: 100,
    },

    {
      type: "percent",
      text: "PROGRESS",
      field: "renderedPercentDone",
      showValue: true,
      width: 100,
    },
    { type: "date", field: "startDate", text: "START", width: 110 },
    { type: "date", field: "endDate", text: "END", width: 110 },
  ],

You'll now see the following Bryntum Gantt chart when you run the development server:

Notice that the "Category" values are not displayed. This is because "Category" is not one of the predefined fields of the Bryntum Gantt task store Model. We can add this custom field to the model by adding the following lines of code to the bottom of the main.js file:

gantt.taskStore.modelClass.addField({
  name: "category",
  type: "string",
});

The "Category" values will now be displayed in your Gantt chart:

If you look at the agile-gantt-chart.xlsx Gantt chart, you'll see that the task bars are colored depending on the task category, and the milestones are shown as a flag. Let's color the child task bars based on the task category. Add the following method in the gantt config, below the columns property:

  // custom taskbar content
  taskRenderer({ taskRecord, renderData }) {
    const { category, parentId } = taskRecord;
    if (parentId !== null) {
      switch (category) {
        case "Goal":
          renderData.style = "background-color:" + "#d65532";
          break;
        case "Milestone":
          renderData.style = "background-color:" + "none";
          break;
        case "Low Risk":
          renderData.style = "background-color:" + "#00b0f0";
          break;
        case "Med Risk":
          renderData.style = "background-color:" + "#4868e5";
          break;
        case "High Risk":
          renderData.style = "background-color:" + "#852c98";
          break;
        case "On Track":
          renderData.style = "background-color:" + "#4ca472";
          break;
        default:
          renderData.style = "background-color:" + "#e6e6e6";
      }
    }

    return "";
  },

The taskRenderer is called each time a task is rendered. You can use it to change what's displayed in the task bars. It returns a string that's displayed in the task bar. The string can be text or HTML. You can also return a DOM config object.

We can get information about the task being rendered from the taskRecord parameter. If the task has a parentId, it's a child task. For the child tasks, we use a switch statement to determine the category of the task. We then style the task bars based on their category using the renderData parameter. We style the task bars by changing their "background-color" CSS property.

To make the "Milestone" category task bars look like a flag, add the following lines of code directly above the return statement:

    if (category === "Milestone")
      return `<span style="position:absolute; top: -10px"><i class="b-fa b-fa-flag b-fa-2xs" style="color: orange;"></i></span>`;

If the task is a Milestone, we'll render a Font Awesome flag icon on top of the task bar. The version of Font Awesome used by Bryntum components has a b-fa prefix instead of fa to prevent conflicts with other versions of Font Awesome on the page. If you are rendering user-provided data, you can use the xss function to sanitize the rendered string or HTML.

The Milestone task bars will have a flag icon rendered on top of them:

We can use CSS to hide the underlying task bar diamond shape. Add the following lines to the style.css file:

.b-gantt-task-wrap.b-milestone-wrap
  .b-gantt-task:not(.b-gantt-task-withicon)
  .b-gantt-task-content::before {
  height: 0;
  width: 0;
}

It's often easiest to use your browser dev tools to determine which HTML elements you want to apply the CSS styling to.

You'll now only see the flag icon for the Milestone task bars:

Next steps

Using the code in this tutorial as a guide, try to migrate your own Excel Gantt charts to a Bryntum Gantt chart to take your project management to the next level.

You can also persist the data to a database. Check out the saving data section of our docs or take a look at one of these tutorials from our blog:

Migrating from DHTMLX Gantt to Bryntum Gantt: Learn how to set up a MySQL database for a Bryntum Gantt chart.
Creating a Bryntum Gantt chart with React, TypeScript, Prisma, and SQLite: Remix vs. Next.js: Learn how to set up a SQLite database for a Bryntum Gantt chart.

Top 5 JavaScript Gantt chart libraries

Bryntum — Thu, 14 Sep 2023 13:58:57 +0000

Looking for a Gantt chart library to use in your project management app?

You'll want to consider how easy a library is to get started with, what features it offers, and what it costs.

We compare five common libraries for creating Gantt charts and give you a list of pros and cons for each. Here are the libraries we'll look at:

Bryntum Gantt
DHTMLX Gantt
SyncFusion Gantt
JSCharting Gantt
Frappe Gantt

Bryntum Gantt

The Bryntum suite of commercial JavaScript web components for project management and resource scheduling includes Bryntum Gantt, which is easy to use with popular frontend frameworks like React, Vue, and Angular. Bryntum has a good selection of demos that show you how to use their products as web components and help you integrate Bryntum components with PHP or ASP.NET backends, Ionic for mobile app development, and Salesforce.

Getting started

You have two options to install the Bryntum Gantt library:

Download the package and use the source files.
Use npm.

To install the Bryntum Gantt component using npm, you need to get access to the private Bryntum npm registry. Follow the Access to npm registry guide in the Bryntum docs to do so. Once you've logged in to the registry, install the Gantt component by following the guide here.

To make a Bryntum Gantt chart, you create an instance of the Gantt chart object and pass in a configuration object to the constructor function. The configuration determines what the Gantt chart looks like and where it gets data from:

import { Gantt } from "@bryntum/gantt";

const gantt = new Gantt({
  appendTo: document.body,
  viewPreset: "weekAndDayLetter",
  timeAxis: {
    weekStartDay: 1,
  },
  columns: [{ type: "name", width: 250, text: "Tasks" }],
});

The appendTo property is the DOM element that the Gantt chart will be added to as a child. The viewPreset determines the layout of the timeline view and headers. The timeAxis property allows you to modify the timeline headers. The columns property is used to define the data column on the left side of the Gantt.

To style the Gantt, you can use one of five themes. For example, you can import the Stockholm theme in your CSS file:

@import "@bryntum/gantt/gantt.stockholm.css";

You can modify the themes or create your own custom theme.

Basic Bryntum Gantt data consists of tasks and dependencies. You use the Bryntum Crud Manager to get and sync data changes with a backend. The Crud Manager uses AJAX for fetching and posting data and JSON for encoding data. You can configure the Crud Manager in the project property of the Gantt configuration object. For example, in the code below, the transport property is used to populate the Gantt chart data stores:

project: {
  transport: {
    load: {
      url: "data/data.json",
    },
  },
  autoLoad: true,
},

You can configure transport to sync data changes to a specific URL. For more information, read the project data guide in the Bryntum docs.

You don't have to use the Bryntum Crud Manager for data fetching in your Bryntum Gantt. Other methods are available, such as binding existing data to a component.

Features

Bryntum Gantt has a lot of functionality out of the box, such as adding, editing, and deleting tasks and dependencies. The component is highly customizable and has extensive documentation that includes live code demos. Advanced features of Bryntum Gantt include:

Critical path calculation.
Undo and redo functionality.
Export and import from Microsoft Project and Primavera P6
Easy integration with other Bryntum project management tools, like Bryntum Task Board.
Large dataset handling and performance tuning.

Take a look at a summary of the Bryntum Gantt features here and view demos of the features here.

Bryntum has an active blog where you can read tutorials like How to visualize your Google Sheets data with Bryntum Gantt and customer experiences of using Bryntum components.

The Bryntum Gantt chart is built with JavaScript ES6+, has no external dependencies, and uses a super-fast rendering engine, making it a performant option for your Gantt chart, even when working with large datasets.

Pricing

You can purchase Bryntum components individually or as a discounted bundle. The Bryntum Gantt license starts at $900 per developer, and there are different licenses for small teams, large teams, non-commercial use, and commercial use. The internal, non-commercial EUL license is perpetual and includes free upgrades for one year and forum support. Discounts are offered for charity, environmental, and educational work, as well as for start-ups. Sign up for a free 45-day Bryntum trial here.

Pros

The Bryntum suite of components have detailed documentation with live code examples and blog post tutorials.
A range of demos for Bryntum Gantt and other Bryntum components include source code and tips for integrating with various frameworks. You can search the Bryntum demos page by frontend framework or features, or using a text search.
Bryntum Gantt is highly customizable with a wide range of advanced features.
Bryntum Gantt is a high-performance library well suited to large datasets.
Bryntum has a support forum and offers additional professional services.
The luxurious Bryntum Gantt UX is a step above its competitors': The Bryntum UI is clean and focused on critical project information so that you don't lose essential tasks in customization options or large datasets.

Bryntum Grantt is built with both the developer and end user in mind, with a sleek, modern design that makes it a breeze to visually assign tasks and navigate intricate projects. Features like drag-and-drop resource allocation and instantaneous project management recalculations add value to the component that's hard to beat.

Drag-and-drop resource allocation video

Cons

Bryntum Gantt may be an expensive option if you only need a simple Gantt chart.

DHTMLX Gantt

DHTMLX has a number of commercial web components for project management, data analysis, and content management. You can use the DHTMLX Gantt library with popular frontend frameworks React, Vue, and Angular, and the DHTMLX website hosts demos, documentation, and tutorials for various server-side integrations such as with Salesforce, PHP, Node, ASP.NET, and Ruby on Rails.

Getting started

You have two options to install the DHTMLX Gantt library:

Download the package and use the source files.
Use npm.

To create a basic Gantt chart with DHTMLX Gantt, initialize the Gantt in an HTML container using the init() method. You can configure the look of the Gantt chart using the gantt.config and gantt.templates properties. In the code example below, we define two columns for a Gantt chart:

import { gantt } from "dhtmlx-gantt";

const body = document.querySelector("body");

gantt.config.columns = [
  { name: "text", label: "TASKS", width: 250, tree: true },
  { name: "add", label: "", width: 44 },
];

gantt.init(body);

The "add" column adds a column with a "+" sign, which you use to create a new task. The gantt.config and gantt.templates definition code should be above the Gantt initialization.

Style the Gantt using one of the seven DHTMLX Gantt skins. For example, you can import the default "Terrace" skin in your CSS file:

@import url("node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.css");

You can modify the skins or create your own custom skin by adjusting the CSS styling.

To load data into your DHTMLX Gantt chart, use the gantt.parse() or gantt.load() methods:

gantt.load("/data/data.json");

Sync data changes to a backend using the DataProcessor API or the Gantt AJAX module.

Features

DHTMLX Gantt offers a lot of basic functionality out of the box such as adding, editing, and deleting tasks and dependencies (or "links", as dependencies are referred to in DHTMLX Gantt).

DHTMLX Gantt is fully customizable and has substantial documentation. You can see the available features here and view demos of the features here. Advanced features include:

Critical path calculation.
Export to PDF, PNG, Excel, iCal, MS Project, or Primavera P6.
Task autoscheduling using dependencies (links) and constraints.
Integration with other DHTMLX project management tools, such as the DHTMLX To Do List.
Large dataset handling and performance optimization.

DHTMLX has an active blog where you'll find tutorials like How to Create a JavaScript Gantt Chart with DHTMLX and customer spotlights detailing their experience with using DHTMLX components.

The DHTMLX Gantt chart is built with JavaScript and has no external dependencies.

Pricing

Licenses for DHTMLX components come with a year of support. Choose your license from the range of DHTMLX license options based on the size of your team and whether you'll use the components in a SaaS product. A license for DHTMLX Gantt starts at $699, and you can take advantage of DHTMLX bundle offers if you'd like to use several DHTMLX components. The licensed libraries are the PRO versions. DHTMLX also has open-source standard library versions of their components that are free to use but have fewer features. You can see the differences between the standard and the PRO library features for DHTMLX Gantt here.

Pros

DHTMLX Gantt has comprehensive documentation with good search filters and blog post tutorials.
DHTMLX provides a selection of Gantt demos with source code, including integration with various frameworks. The demos page includes a text search filter.
DHTMLX Gantt is highly customizable with many advanced features.
DHTMLX Gantt integrates with many server-side platforms.
DHTMLX Gantt shows high performance with large datasets.

Cons

The predefined skins for styling DHTMLX Gantt charts are not as attractive as the themes for the Syncfusion and Bryntum Gantt chart libraries.

Syncfusion

SyncFusion is a commercial UI component library for web, desktop, and mobile apps. It has UI components, including a Gantt chart, for the popular JavaScript frameworks React, Angular, and Vue. Syncfusion also supports the non-JavaScript frameworks Blazor and Flutter, which are used for frontend web development.

Getting started

You have three options to install the SyncFusion Gantt:

Download the Essential Studio JavaScript (Essential JS 2) build.
Use a CDN.
Use npm.

To create a Gantt chart, you create an instance of the SyncFusion Gantt and pass in the configuration object, which determines how the Gantt will look and where it will get data from.

import { Gantt } from "@syncfusion/ej2-gantt";

const ganttChart = new Gantt({
  columns: [{ field: "TaskName", headerText: "TASKS", width: "250" }],
});

ganttChart.appendTo("body");

The columns property is used to define the data column on the left side of the Gantt. The appendTo method takes in the DOM element that the Gantt chart will be added to as a child.

For basic data fetching, you can use the browser fetch API and pass the data to the dataSource property:

async function fetchGanttData() {
  try {
    const response = await fetch("/data/data.json");
    if (!response.ok) {
      throw new Error(`Error! Status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Failed to fetch Gantt data:", error);
    return [];
  }
}

const dataSource = await fetchGanttData();
const ganttChart = new Gantt({
  dataSource: dataSource,
  ...

You can use DataManager to simplify getting and syncing data from a backend:

const dataSource = new DataManager({
  url: 'http://localhost:3001/api/ganttData',
  adaptor: new UrlAdaptor(),
  batchUrl: 'http://localhost:3001/api/batchData',
});

The taskFields property is required to get task details from a data source. It maps task property names to the task property names of the data source. This allows for some variability in the structure of the data source.

taskFields: {
    id: "Id",
    name: "TaskName",
    startDate: "StartDate",
    duration: "Duration",
    progress: "PercentDone",
    dependency: "Dependency",
    child: "Subtasks",
},

To style the Gantt, import one of the theme CSS stylesheets:

@import "@syncfusion/ej2/material.css";

There are nine themes to choose from, and you can also customize themes using the Theme Studio for Essential JS 2 GUI.

Features

The Syncfusion Gantt chart is mobile touch-friendly, responsive, and built with accessibility in mind. It's keyboard navigable and has WAI-ARIA accessibility support. The theme editor GUI makes for easy customization of the Gantt styling.

Syncfusion has an active blog, and Syncfusion Gantt has comprehensive documentation and a demos page that shows the features of the Gantt.

Syncfusion Gantt has many features that make it suitable for creating complex Gantt charts, including:

Critical path calculation.
Exporting data to Excel, PDF, and CSV formats.
Virtual scrolling for improved performance with large datasets.

Pricing

Syncfusion UI components are sold as bundles. Team licenses start at $395 per month, or you can choose an annual license for a project, company, or company division. Paid-for licenses include 24-hour support, unlimited bug and feature requests, and access to remote support. There is a free community license for companies with less than $1 million in annual gross revenue, less than six developers, and that have not received more than $3 million in capital from an outside source. You can sign up for a 30-day free trial of Syncfusion, which includes the same support services as licensed customers.

Pros

The Syncfusion Gantt demos page includes source code and links to API documentation, and you can edit the demos on StackBlitz.
Syncfusion has comprehensive documentation for the Gantt component.
Syncfusion supports multiple web frameworks, including non-JavaScript frameworks.
The Syncfusion Gantt is highly customizable with many advanced features.
The Syncfusion theme editor GUI makes for easy theme customization.
Syncfusion has good support services.

Cons

Syncfusion Gantt is an expensive choice if you don't qualify for the community license or only want to use the Gantt chart or a few of the Syncfusion components.

JSCharting

JSCharting is a commercial JavaScript chart library with over 150 types of charts, including Gantt. Like Frappe Gantt, JSCharting renders charts with SVG and HTML5. You can use JSCharting with the popular JavaScript frameworks React, Angular, and Vue, and it has a JSCharting PHP bundle to simplify connecting a JSCharting Gantt to a PHP backend that uses a MySQL database.

Getting started

You have three options to install JSCharting:

Download the package.
Use a CDN.
Use npm.

Once you have installed JSCharting, you create a Gantt chart by creating an instance of the JS chart object using the chart() function. The first argument of this function is the id of the HTML element or the element object that this chart will be added to as a child. The second argument is the Gantt configuration object:

import * as JSC from "jscharting";

JSC.chart("app", {
  type: "horizontal column",
  zAxis_scale_type: "stacked",
  xAxis_scale_type: "time",
});

The property type is set to "horizontal column" for a Gantt chart. The stacked z-axis scale type makes series data points with the same x values take up the same space on the x-axis. JSCharting uses series data to represent tasks or events. Each item in the series data is a task or event with a specific start and end date.

The underscore syntax is a feature of JSCharting called code expansion that allows you to combine nested property paths into a single property name:

zAxis_scale_type: "stacked",
// is equivalent to:
zAxis: { scale: { type: "stacked" }  },

There are many other configuration properties, for example, to customize the legend, axes, and colors.

To fetch data, you can use the browser fetch API and pass the data to the series property:

fetch("./data/data.json")
  .then(function (response) {
    return response.json();
  })
  .then(function (json) {
    chart = renderChart(json);
  });

function renderChart(data) {
  return JSC.chart("app", {
    ...
    series: data,
  });
}

JSCharting has utility functions for converting between JSON and delimiter-separated values such as CSV. You can convert data to chartable series and points with the nest object.

Features

JSCharting charts are optimized for touch screen and mobile devices, with responsive styling and good accessibility compliance.

The JSCharting Gantt chart demos page includes many examples you use as a starting point. Each demo has vanilla JavaScript source code, and you can use the JSCharting editing UI to change the demo code, as you can see in this complex Gantt chart demo. Some demos show advanced features like critical dependency paths and progress line overlays.

Pricing

The JSCharting bundle license includes all 150+ chart types. You can't buy the Gantt chart separately. The bundle costs $995 per developer, and includes priority support, upgrades, and new releases for one year. You can register on the JSCharting website to qualify for a free license for non-commercial use with no time restrictions. A Gantt chart created using the free JSCharting license features a small watermark icon that links to the JSCharting website.

Pros

The JSCharting touch screen and mobile device optimization is a plus.
JSCharting has good accessibility compliance.
The JSCharting bundle includes many other charts that you may want to use.
You'll find many example Gantt charts on the JSCharting demos page.

Cons

Because a JSCharting chart is an SVG, it's not easy to customize, for example, changing the date rows of a chart.
The out-of-the-box JSCharting UI design looks outdated.
The JSCharting Gantt is relatively simple and unsuitable for more complex Gantt charts.
The documentation for the JSCharting Gantt is not very detailed.

Frappe

Frappe Gantt is a simple, open-source Gantt chart library. Like JSCharting, Frappe Gantt renders charts with SVG and HTML5.

Getting started

You can install the Frappe Gantt library using npm or Yarn. You also need to install SASS as a dependency.

To get started, create an <svg> element and give it an id, then initialize a new Gantt object:

let gantt = new Gantt("#gantt", tasks, {
  view_mode: "Day",
});

The first argument of the Gantt constructor function is the id of the <svg> element that will be your Gantt chart. The second argument is the tasks data. The third argument is a configuration object that determines how the Gantt chart looks and functions.

The view_mode determines the view of the Gantt chart. The possible values are: "Quarter Day", "Half Day", "Day", "Week", and "Month".

You can change view_mode using the change_view_mode method. You can also add event listeners or customize the HTML popup that displays when you click on a taskbar. If you want any other functionality, you'll need to code it yourself.

Features

A Frappe Gantt chart is a simple chart with basic features:

Basic visual configuration options such as "bar_height", "arrow_curve", and "language".
Change view mode.
Event listeners.
Custom HTML in the task bar popup.

Pricing

Frappe Gantt is a free, open-source library.

Pros

Frappe Gantt is open source and free to use.
Frappe Gantt is a good option if you need a very basic Gantt chart.

Cons

The Frappe Gantt documentation is one short demo page and the GitHub repo readme.
Like the JSCharting Gantt chart, the Frappe Gantt chart is not easy to customize (for example, changing the date rows) because it is an SVG.
Frappe Gantt has a very simple API that lacks a lot of basic functionality that's commonly used in Gantt charts, such as adding, editing, or deleting tasks. If you want extra functionality, you'll have to build it yourself.
You can only use vanilla JavaScript with Frappe Gantt.

Conclusion

Below is a table comparing some of the features of the five Gantt chart libraries:

	Bryntum	DHTMLX	Syncfusion	JSCharting	Frappe
Easy to customize	✔️	✔️	✔️	❌	❌
Advanced features	✔️	✔️	✔️	✔️	❌
Data fetching helpers	✔️	✔️	✔️	✔️	❌
Handle large large data sets	✔️	✔️	✔️	❌	❌
Styling themes	✔️	✔️	✔️	❌	❌
Theme builder GUI	❌	❌	✔️	❌	❌
Open source	❌	✔️*	❌	❌	✔️
Accessibility	✔️	✔️	✔️	✔️	❌
React, Angular, and Vue support	✔️	✔️	✔️	✔️	❌
TypeScript support	✔️	✔️	✔️	❌	❌
Split tasks	✔️	✔️	✔️	❌	❌
Undo / redo functionality	✔️	✔️	❌	❌	❌
Handle dependency conflicts	✔️	❌	❌	❌	❌
Summary bar	✔️	❌	❌	❌	❌
Import Excel	❌	✔️	❌	❌	❌
Export Excel	✔️	✔️	✔️	❌	❌

* Only for the standard library, not the PRO library.

Of the libraries we test drove, Bryntum Gantt has the most features out of the box with considered touches like summary rows and task-dependency management. Bryntum Gantt also has the most appealing visual appearance, with Syncfusion coming in a close second.

Bryntum Gantt and Syncfusion Gantt both have built-in UIs to edit dependencies, but DHTMLX Gantt doesn't.

If your budget is limited, the best free, open-source Gantt chart is the standard library version of the DHTMLX Gantt chart. Small start-ups that qualify for the free community license might prefer Syncfusion Gantt, but Syncfusion Gantt is an expensive option if you only need their Gantt chart component. Frappe Gantt is good if you want a simple Gantt chart and aren't concerned about the UI appearance.

DHTMLX Gantt was the easiest to link up with a backend, as its dataProcessor simplifies CRUD API endpoints, and there's a single CRUD operation per API request. Bryntum Gantt and Syncfusion Gantt backend integrations use multiple CRUD operations per request, which can improve performance, but it makes handling requests more complex.

However, if you need to build complex Gantt charts or work with large datasets, Bryntum Gantt, DHTMLX Gantt, and Syncfusion Gantt are the most suitable options. Each library offers different features, so you'll need to consider your requirements and check the features and demo pages of the various Gantt chart libraries to see which is most suitable.

Using Bryntum Scheduler to Optimize Driver and Shift Logistics

Bryntum — Tue, 29 Aug 2023 05:45:55 +0000

Bryntum Scheduler is a modern world-class tool that allows you to develop and integrate scheduling functionalities in your web applications. It provides intuitive functionalities such as dragging events, connecting scheduler tasks, and filtering events. The team at Bryntum has ensured that the tool is highly performant such that it works well with any application integration and on any device without using extensive amounts of memory and processing power, regardless of the volume of data it's processing. Additionally, it's highly customizable, giving you the freedom to quickly implement your ideas.

Bryntum Scheduler can be used in all kinds of use cases, including project management applications that require distributing tasks across users and optimizing shift logistics.

In this article, you'll learn how to integrate Bryntum Scheduler by creating a sample driver shift application. In this application, you'll implement some of Bryntum's basic features, like dragging events and listening for events.

Implementing a Driver Shift Application

Before you begin, you'll need the following prerequisites to start using Bryntum Scheduler in your application:

The latest version of Node.js and npm.
A code editor: There are several code editors available for web development with useful features to speed up your development workflow, including Visual Studio (VS) Code and Sublime Text.

In addition to these prerequisites, you also need to configure Bryntum Scheduler. There are several licenses available depending on the type of product you're building and the number of developers that will be working on the product. However, for this tutorial, you'll be using the trial version.

Open your terminal and run the following commands:

npm config set "@bryntum:registry=https://npm.bryntum.com"
npm login --registry=https://npm.bryntum.com

You will be prompted for your username, password, and email. Enter your details in the following format:

Username: user..yourdomain.com
Password: trial
Email: (this IS public) user@yourdomain.com

Please note: In the username, the "@" in your email was replaced with "..". Therefore, if your email is daniel@draft.dev, your username would look like this: daniel..draft.dev. In addition, you must use the word "trial" for your password. If not, you won't be able to access the trial version.

Installing the Demo Application

Now that you have all the prerequisites, it's time to create the application. In your terminal, run the following command:

npx create-react-app driver-app --template @bryntum/cra-template-javascript-scheduler

After installation, open the driver-app directory in your favorite code editor.

Note that if you want to take full control of the Bryntum Scheduler upgrades in the future, it's important that you remove the ^ sign that is automatically included in the versions of the dependency packages found in package.json. Therefore, remove the ^ sign (as seen here), and run npm install again:

"dependencies": {
  "@bryntum/scheduler": "npm:@bryntum/scheduler-trial@5.1.3",
  "@bryntum/scheduler-react": "5.1.3",
  "react": "17.0.2",
  "react-dom": "17.0.2",
  "react-scripts": "4.0.3"
},
"devDependencies": {
  "babel-preset-react-app": "npm:@bryntum/babel-preset-react-app@10.0.0",
  "cross-env": "~7.0.3",
  "sass": "~1.42.1"
}

Then run the following:

npm install

Now you've successfully installed the demo Bryntum Scheduler app. To see how it looks, go to your terminal and run the following:

npm run dev

Then your browser will automatically launch http://localhost:3000, and you should see a web page like this:

You can play around with the demo app before you start updating the application code to fit your application use case.

Developing the Logistics Application

To begin developing the logistics application, open the src/App.js file, and you will see the following code:

import { BryntumScheduler } from '@bryntum/scheduler-react';
import { schedulerConfig } from './SchedulerConfig';
import './App.scss';

function App() {
    return (
        <BryntumScheduler {...schedulerConfig} />
    );
}

// If you plan to use stateful React collections for data binding, please check this guide
// https://www.bryntum.com/docs/scheduler/guide/Scheduler/integration/react/data-binding

export default App;

The BryntumScheduler component is the component responsible for the scheduling user interface (UI) and interactivity you experienced when you visited http://localhost:3000. However, the type of information displayed and the events that occur when you interact with the Scheduler are only made possible by the variables and methods you pass to the BryntumScheduler component allowed properties. You can find the allowed properties with the help of the Intellisese code editor or by checking the API documentation.

In the BryntumScheduler component in src/App.js, you can see that some BryntumScheduler properties are passed through the schedulerConfig from src/SchedulerConfig.js, which is a static file. However, suppose you plan on loading some of the property variables dynamically. In that case, you have to remove the property from the SchedulerConfig.js file and declare the variable using any of React's hooks: useState, useReducer, or React Redux. Then you pass the variable to the property in the BryntumScheduler component.

For instance, if you want to make the rowHeight and columns dynamic, then you need to update your SchedulerConfig.js and App.js files:

# SchedulerConfig.js
const schedulerConfig = {

    startDate        : new Date(2022, 2, 20, 6),
    endDate          : new Date(2022, 2, 20, 20),
    viewPreset       : 'hourAndDay',
    barMargin        : 5,
    multiEventSelect : true,

    crudManager : {
        transport : {
            load : {
                url : 'data/scheduler-data.json'
            }
        },
        autoLoad  : true
    }
};

export { schedulerConfig };

# App.js

import { useState } from 'react'
import { BryntumScheduler } from '@bryntum/scheduler-react';
import { schedulerConfig } from './SchedulerConfig';
import './App.scss';

function App() {


    const [rowHeight, setRowHeight] = useState(50)
    const [columns, setColumns] = useState([
      { text : 'Name', field : 'name', width : 130 }
  ])

    return (
        <BryntumScheduler {...schedulerConfig} rowHeight={rowHeight} columns={columns} />
    );
}

// If you plan to use stateful React collections for data binding, please check this guide
// https://www.bryntum.com/docs/scheduler/guide/Scheduler/integration/react/data-binding

export default App;

The focus should be more on the App.js file where the useState hook was used.

Loading the Driver and Logistics Data

There are two options for loading the driver and logistics data into your application. You can use the in-line option, where you fetch the data from an external source and pass the data using the resources and events properties (similar to the previous example), or you can use the CrudManager transport, which is the default method that is currently being used in this demo app. The CrudManager transport provides more benefits as you tend to write less code because of the abstraction it provides compared to passing the data in line into the component.

In the SchedulerConfig.js file, you'll find the crudManager property, which allows you to fetch data from a source, and you can include the sync property, which automatically sends the updated Scheduler events to your server. However, for this tutorial, you'll stick to using JSON data to populate the Scheduler.

Open public/data/scheduler-data.json in your editor and replace the previous content with the following:

{
  "success": true,
  "resources": {
    "rows": [
      {
        "id": "1",
        "name": "Mark",
        "rowHeight": 70
      },
      {
        "id": "2",
        "name": "Sarah"
      },
      {
        "id": "3",
        "name": "Jonah"
      },
      {
        "id": "4",
        "name": "Rachel"
      }
    ]
  },
  "events": {
    "rows": [
      {
        "id": 1,
        "resourceId": "1",
        "startDate": "2022-03-20T10:00",
        "endDate": "2022-03-20T12:00",
        "name": "Package #345 delivery to 728 Jerry Toth Drive, Mcgrath, Alaska",
        "eventColor": "pink"
      },
      {
        "id": 2,
        "resourceId": "2",
        "startDate": "2022-03-20T12:00",
        "endDate": "2022-03-20T13:30",
        "name": "Package #105 delivery to 593 Riverside Drive, Atlanta, Georgia"
      },
      {
        "id": 3,
        "resourceId": "3",
        "startDate": "2022-03-20T14:00",
        "duration": 2,
        "durationUnit": "h",
        "name": "Package #246 Delivery to 4108 Peck Street, Chester, New Hampshire",
        "eventColor": "blue"
      },
      {
        "id": 4,
        "resourceId": "4",
        "startDate": "2022-03-20T08:00",
        "endDate": "2022-03-20T11:00",
        "name": "Package #112 delivery to 7448 Romano Street, Dedham, Massachusetts"
      }
    ]
  }
}

Return to http://localhost:3000, and you'll find that your data is now loaded:

In the previous code, you'll notice two important keys: resources and events. The resources key contains your drivers' information.

Every resources field must have an id and name field. The id is used by the events key to reference the delivery information with the respective drivers, and the name field displays the resource's name on the Scheduler interface.

The resources key also accepts other fields, such as columnWidth and rowHeight, which are basically adjusting the styles of the particular rows, as seen in the example data in public/data/scheduler-data.json. Check out the API guide for more information on the fields the resources key accepts.

Meanwhile, the events key contains the actions the drivers are supposed to perform. The key contains fields referencing the driver from the resources key via resourceId, when the action should start and end via the startDate and endDate field, the information about the action via the name field, and other fields that you may choose to include, such as the eventColor and eventIcon. You can learn more about the acceptable fields on Bryntum's website.

Performing Operations on the Scheduler

There are several actions you can perform on the Scheduler, including clicking, dragging, double-clicking, right-clicking, and adding events directly on the Scheduler. In addition, you can also perform custom operations based on the actions mentioned previously.

In your App.js file, replace the content with the following:

import { BryntumScheduler } from '@bryntum/scheduler-react';
import { schedulerConfig } from './SchedulerConfig';
import './App.scss';

function App() {

    const onEventDrag = (value) => {
      // Performing custom operation
      console.log("Event Dragged", value);
    }

    const eventDoubleClick = (value) => {
      // Performing custom operation
      console.log("Event Double Clicked", value);
    }

    return (
        <BryntumScheduler {...schedulerConfig} onEventDrag={onEventDrag} onEventDblClick={eventDoubleClick} />
    );
}

// If you plan to use stateful React collections for data binding please check this guide
// https://www.bryntum.com/docs/scheduler/guide/Scheduler/integration/react/data-binding

export default App;

Now go to http://localhost:3000 and drag any of the events or double-click on any event that is logged in your console. If you open the inspect window by pressing Command + Shift + C on macOS or Ctrl + Shift + C on Windows, check your console tab to see some data appear when you drag or double-click any events. All this is possible because of the event listener properties you added to the BryntumScheduler component and then assigned a function to these properties. The custom functions contain the operations you would like to perform.

For more information on allowed event listeners, check out this documentation.

Displaying Unavailable Drivers

There are scenarios where drivers may be unavailable but still need to be displayed on the Scheduler. To display unavailable drivers, you have to include the readOnly attribute on the resources and events keys of the associated driver. You can't drag new events to a driver with the readOnly attribute. In addition, you can't modify existing events for that driver.

Please note: For read-only rows to work effectively, you need to include the eventDragCreateFeature property to the BryntumScheduler component in App.js.

The updated code for public/data/scheduler-data.json will look like this:

{
  "success": true,
  "resources": {
    "rows": [
      {
        "id": "1",
        "name": "Mark",
        "rowHeight": 70,
        "readOnly": true
      },
      {
        "id": "2",
        "name": "Sarah"
      },
      {
        "id": "3",
        "name": "Jonah"
      },
      {
        "id": "4",
        "name": "Rachel"
      }
    ]
  },
  "events": {
    "rows": [
      {
        "id": 1,
        "resourceId": "1",
        "startDate": "2022-03-20T10:00",
        "endDate": "2022-03-20T12:00",
        "name": "Package #345 delivery to 728 Jerry Toth Drive, Mcgrath, Alaska",
        "eventColor": "pink",
        "readOnly": true
      },
      {
        "id": 2,
        "resourceId": "2",
        "startDate": "2022-03-20T12:00",
        "endDate": "2022-03-20T13:30",
        "name": "Package #105 delivery to 593 Riverside Drive, Atlanta, Georgia"
      },
      {
        "id": 3,
        "resourceId": "3",
        "startDate": "2022-03-20T14:00",
        "duration": 2,
        "durationUnit": "h",
        "name": "Package #246 Delivery to 4108 Peck Street, Chester, New Hampshire",
        "eventColor": "blue"
      },
      {
        "id": 4,
        "resourceId": "4",
        "startDate": "2022-03-20T08:00",
        "endDate": "2022-03-20T11:00",
        "name": "Package #112 delivery to 7448 Romano Street, Dedham, Massachusetts"
      }
    ]
  }
}

And the updated code for the src/App.js is as follows:

import { BryntumScheduler } from '@bryntum/scheduler-react';
import { schedulerConfig } from './SchedulerConfig';
import './App.scss';

function App() {

    const onEventDrag = (value) => {
      // Performing custom operation
      console.log("Event Dragged", value);
    }

    const eventDoubleClick = (value) => {
      // Performing custom operation
      console.log("Event Double Clicked", value);
    }

    return (
        <BryntumScheduler {...schedulerConfig} onEventDrag={onEventDrag} onEventDblClick={eventDoubleClick} eventDragCreateFeature={false} />
    );
}

// If you plan to use stateful React collections for data binding please check this guide
// https://www.bryntum.com/docs/scheduler/guide/Scheduler/integration/react/data-binding

export default App;

As you can see, the unavailable driver has their name blurred out, and because of that, it's not possible to add a new event or drag existing events associated with that driver.

Conclusion

Bryntum Scheduler is a sophisticated tool for creating or integrating scheduling functionalities into your applications without reinventing the wheel. With its powerful features and easy-to-use functionalities, it's easy to start integrating scheduling functionalities into your application.

In this tutorial, you learned how to install the Bryntum Scheduler, load data into it, and perform custom operations. Additionally, you can find the public repository for this tutorial on this GitHub repo.

Bryntum Scheduler isn't the only component offered by Bryntum. It has several other powerful components that have been carefully developed to ease integration and usage, like Bryntum Gantt and Bryntum Scheduler Pro.

Are you already using Bryntum Scheduler? We'd love to hear your feedback on how it's impacted your workflow.

Bryntum helps the world stay on schedule. Our component library offers a selection of high-quality, advanced UI controls for various frontend frameworks. Want to learn more? Try out our scheduling and Gantt components at bryntum.com.

Real-Time Project Management with Bryntum Gantt

Bryntum — Thu, 24 Aug 2023 13:45:52 +0000

A real-time application, as the name implies, is an application that is updated in or close to real time. A good example of a real-time app is Google Docs. When it was launched in 2006, Google Docs changed the way multiple people collaborated on documents, enabling users to receive updates as they're made.

Industries such as gaming, e-commerce, and social media employ real-time web apps to facilitate seamless collaboration and improve reactivity to remote changes.

In this article, you'll learn how to build a real-time project management app using React, Socket.IO, and Bryntum Gantt, a powerful tool that can help you easily set up project tasks, track their progress, and collaborate with team members.

What Are Real-Time Web Apps?

Real-time web apps are web applications that allow for information to be passed between the server and the client in real time. They are constantly changing as soon as new data is received.

Real-time web apps use the WebSocket protocol, which provisions full-duplex (or two-way) communication between a client and a server. As opposed to a WebSocket, the HTTP used in traditional web apps has a unidirectional (or half-duplex) communication. The following image shows how a half-duplex communication protocol like HTTP and a full-duplex communication protocol like WebSocket transfer data between a server and a client:

WebSockets make it possible for the client and server to send and receive data in real time over a single transmission control protocol (TCP) socket connection. A WebSocket connection is persistent and is kept open until either the server or the client terminates it. In contrast, an HTTP connection is temporary, as it's closed as soon as the response from the server is received. If you need to make a new request, a fresh connection has to be created.

Real-time web apps have several advantages over traditional web apps. They are more responsive, reliable, scalable, and able to handle more concurrent users who need to receive updates in real time.

Building a Real-Time Project Management App

Now that you know what real-time web apps and WebSockets are, it's time to learn how to leverage them with React, Socket.IO, and Bryntum Gantt to create a simple but real-time project task management tool. The application will work like this at the end of this article:

Click to view gif

You can find the full code for this tutorial on this GitHub repo.

Prerequisites

Before you begin, you'll need to have Node.js installed, as it's needed to run React in development mode on your local machine. Node.js also ships with the Node Package Manager (npm), which enables the installation of some required packages, like Bryntum Gantt. If you haven't already, download the LTS version of Node.js and install it.

Bryntum Gantt is the most reliable, easy-to-use, and full-featured JavaScript Gantt chart component. It's compatible with all major browsers and offers a wide range of features that can be fully customized to suit your specific needs. Bryntum Gantt's rendering engine is fast, and it can handle large data sets without halting performance. In addition, its built-in scheduling engine provides asynchronous rescheduling of any number of tasks.

Bryntum Gantt will provide the Gantt chart and other necessary components, like buttons, that will be configured to meet the needs of the application. Now it's time to build it.

Basic Setup

The app will be bootstrapped with Create React App (CRA). Thankfully, Bryntum has a CRA template. This will enable users to quickly get started with the Bryntum Gantt package. Bryntum packages are commercial, but they have trial versions that will be sufficient for this tutorial.

The commercial and trial versions are available in Bryntum's private registry. Open your terminal and run the following command to locate the registry:

npm config set "@bryntum:registry=https://npm.bryntum.com"

Then log in:

npm login --registry=https://npm.bryntum.com

You will be required to enter your username, password, and email address. Use your email with the "@" replaced with ".." as your username and "trial" as your password:

Username: user..yourdomain.com
Password: trial
Email: (this IS public) user@yourdomain.com

This will give you access to Bryntum's private registry and packages.

Now that you have access to the registry, it's time to finish up your setup. To do so, create a new directory for the project:

mkdir realtime-proman

You can replace realtime-proman with your preferred app name.

Then bootstrap a new React client with the Bryntum Gantt template:

npx create-react-app client --template @bryntum/cra-template-javascript-gantt

Since a WebSocket will be used, a simple server is required. Create a new directory for the server-side code in the root directory of your project:

mkdir server

Change to the server directory and initialize a new npm project:

cd server && npm init -y

Finally, create an index.js file that will contain the server-side code:

touch index.js

Creating a WebSocket Server

Now you need to create a simple WebSocket server that your React client can interact with. In the server directory, run the following command to install the server-required dependency, Socket.IO:

npm install socket.io

Then in the index.js file you created earlier, paste the following code:

const 
    { Server } = require('socket.io'),
    io = new Server({
        cors: { origin: '*' }
    });
// data will be persisted here
let persistedData = null;
io.on('connection', (socket) => {
    console.log(`New connection ID: ${socket.id}`);
    socket.emit('just-joined', persistedData ?? {});
    socket.on('data-change', (data) => {
        persistedData = data;
        socket.broadcast.emit('new-data-change', data);
    })
});
io.listen(5000);
console.log(`🚀 socket server started on port 5000...`);

Here, you have three events: data-change, new-data-change, and just-joined. When the data-change event is fired, the passed data is persisted to persistData, and the new-data-change event is emitted with that data. The just-joined event is emitted with the persisted data on every new connection.

Finally, start the WebSocket server:

node index

Working on the Client

Now that the WebSocket server is up and running, it's time to finish up on the client side. A peek in the client directory will reveal its structure, which looks like this:

client                                                          
├─ public                                                                        
│  ├─ data                                                                       
│  │  └─ gantt-data.json                                                         
│  ├─ favicon.png                                                                
│  ├─ index.html                                                                 
│  └─ manifest.json                                                              
├─ src                                                                           
│  ├─ App.js                                                                     
│  ├─ App.scss                                                                   
│  ├─ GanttConfig.js                                                             
│  └─ index.js                                                                   
├─ package-lock.json                                                             
├─ package.json                                                                  
└─ README.md

The gantt-data.json file holds some dummy data that is loaded once the App component renders. Then the GanttConfig.js file holds the configuration for your Gantt chart.

Create a new terminal window in the client directory and spin up your React development server:

npm start

When the React development server is up, you should see something like the following:

The data you see here is from the gantt-data.json file and is bound to the BryntumGantt via the project transport method when the app first loads. This is defined in the Gantt chart configuration in the GanttConfig.js file like so:

// ...
project : {
        transport : {
            load : {
                url : 'data/gantt-data.json'
            }
        },
        autoLoad  : true,
    }
// ...

The path to the gantt-data.json file is passed as the value for the url option. A GET request is made to the path to fetch its JSON data when the App component initially renders. This is why the content of the gantt-data.json file resembles a server response. It even has a success key with true value. Aside from the success key, you'll find seven root keys:

project: holds the configuration for your ProjectModel, which is a central store for all the data in your project.

Please note: A model is simply the definition of a record that can be added to (or loaded into) a store. A store is a data container that holds flat data or tree structures. A record is a data container and an item in a store.

calendars: holds all calendars passed to the CalendarModel.
tasks: holds all the tasks passed to the TaskModel.
dependencies: holds all the single dependencies between tasks. It's passed to the DependencyModel.
resources: holds all resources or assets passed to the ResourceModel.
assignments: holds all single assignments of a resource to a task passed to the AssignmentModel.
timeRanges: holds all ranges of time in the timeRangeStore of the ProjectModel. Each range represents a TimeSpan model.

Now, it's time to make use of the default JSON data loaded into the Gantt chart.

Adding a Toolbar

To begin, you need to add a toolbar to the Gantt chart that will have two button components for creating and editing tasks, respectively.

Create a GanttToolbar.js file in the src folder of your React client and add the following code to it:

import {
    Toolbar,
    Toast,
} from '@bryntum/gantt';

export default class GanttToolbar extends Toolbar {
    // Factoryable type name
    static get type() {
        return 'gantttoolbar';
    }

    static get $name() {
        return 'GanttToolbar';
    }

    // Called when toolbar is added to the Gantt panel
    set parent(parent) {
        super.parent = parent;

        const me = this;

        me.gantt = parent;

        me.styleNode = document.createElement('style');
        document.head.appendChild(me.styleNode);
    }

    get parent() {
        return super.parent;
    }

    static get configurable() {
        return {
            items: [
                {
                    type  : 'buttonGroup',
                    items : [
                        {
                            color    : 'b-green',
                            ref      : 'addTaskButton',
                            icon     : 'b-fa b-fa-plus',
                            text     : 'Create',
                            tooltip  : 'Create new task',
                            onAction : 'up.onAddTaskClick'
                        }
                    ]
                },
                {
                    type  : 'buttonGroup',
                    items : [
                        {
                            ref      : 'editTaskButton',
                            icon     : 'b-fa b-fa-pen',
                            text     : 'Edit',
                            tooltip  : 'Edit selected task',
                            onAction : 'up.onEditTaskClick'
                        }
                    ]
                },
            ]
        };
    }

    async onAddTaskClick() {
        const { gantt } = this,
              added     = gantt.taskStore.rootNode.appendChild({
                name     : 'New task',
                duration : 1
            });

        // wait for immediate commit to calculate new task fields
        await gantt.project.commitAsync();

        // scroll to the added task
        await gantt.scrollRowIntoView(added);

        gantt.features.cellEdit.startEditing({
            record : added,
            field  : 'name'
        });
    }

    onEditTaskClick() {
        const { gantt } = this;

        if (gantt.selectedRecord) {
            gantt.editTask(gantt.selectedRecord);
        } else {
            Toast.show('First select the task you want to edit');
        }
    }
}

// Register this widget type with its Factory
GanttToolbar.initClass();

This registers a container widget with two buttons in it.

Update your GanttConfig.js with the following:

import './GanttToolbar';
/**
 * Application configuration
 */

const ganttConfig = {
    columns    : [
        { type : 'name', field : 'name', width : 250 }
    ],
    viewPreset : 'weekAndDayLetter',
    barMargin  : 10,

    project : {
        transport : {
            load : {
                url : 'data/gantt-data.json'
            }
        },
        autoLoad  : true,
    },
    tbar : { type: 'gantttoolbar' }, // toolbar
};

export { ganttConfig };

This imports the GanttToolbar.js file and adds the registered toolbar type to the tbar option of the Gantt chart configuration.

Save all the files and reload your browser to view the new toolbar:

Also, you should be able to create a new task or edit existing ones by clicking on the CREATE or EDIT buttons, respectively.

At this point, you've created a project task management tool, but it's not in real time yet. Your React client has to exchange data with the WebSocket server for it to be real time.

Implementing WebSocket on the Client

To implement WebSocket on the client, start by installing the Socket.IO client library, along with a universally unique identifier (UUID) package that will help to identify clients in a socket connection.

Open a terminal in the client directory and run the following command:

npm install socket.io-client uuid

Once the installation is complete, import the io and v4 methods from the installed packages and the useEffect and useRef hooks from react in the App.js file:

import { useRef, useEffect } from 'react';
import { io } from 'socket.io-client';
import { v4 as uuid } from 'uuid';

Initialize the socket client just before the App component definition:

const socket = io('ws://localhost:5000', { transports: ['websocket'] });

Update the App component with the following code:

function App() {
    const 
        ganttRef = useRef(null), // reference to the gantt chart
        remote = useRef(false), // set to true when changes are made to the store
        clientId = useRef(uuid()), // a unique ID for the client
        persistedData = useRef(), // store persisted data from the server
        canSendData = useRef(false); // set to true to allow data to be sent to the server

    useEffect(() => {
        const gantt = ganttRef.current?.instance;
        if (gantt) {
            // access the ProjectModel
            const project = gantt.project;
            // listen for change events
            project?.addListener('change', () => {
                // don't send data when the same client is updating the project store
                if (!remote.current) {
                    // only send data when allowed
                    if (canSendData.current) {
                        // get project store
                        const store = gantt.store.toJSON();
                        // send data to the store with the data-change event
                        socket.emit('data-change', { senderId: clientId.current, store });
                    }
                }
            });
            // trigger when project data is loaded
            project?.addListener('load', () => {
                if (persistedData.current) {
                    const { store } = persistedData.current;
                    remote.current = true;
                    if (store) {
                        // update project store if persisted store exists
                        gantt.store.data = store
                    }
                    remote.current = false;
                    // allow data to be sent 2s after data is loaded
                    setTimeout(() => canSendData.current = true, 2000);
                    // stop listening since this data from this event is needed once
                    socket.off('just-joined');
                }
            });
            socket.on('just-joined', (data) => {
                // update with the persisted data from the server
                if (data) persistedData.current = data;
            });

            socket.on('new-data-change', ({ senderId, store }) => {
                // should not update store if received data was sent by same client
                if (clientId.current !== senderId) {
                    // disable sending sending data to server as change to the store is to be made
                    remote.current = true;
                    // don't update store if previous data was sent by same client
                    if (JSON.stringify(gantt.store.toJSON()) !== JSON.stringify(store)) {
                        // update store with store from server
                        gantt.store.data = store;
                    }
                    // data can now be sent to the server again
                    remote.current = false;
                }
            });
        }
        return () => {
            // disconnect socket when this component unmounts
            socket.disconnect();
        };
    }, []);

    return (
        <BryntumGantt
            ref = {ganttRef}
            {...ganttConfig}
        />
    );
}

The comments on the code explain what each line does, but the state of the project store is sent and received via the WebSocket. The project store is updated upon receiving a new state from the WebSocket server.

Save and reload your app in the browser. Then open your app in another browser window and create or edit tasks in the app in one of the windows. You should see the changes reflected in real time in the app in the other window as follows:

Click to view gif

Conclusion

Real-time web apps offer an engaging user experience that lets multiple individuals interact with the app in real time. In this article, you were introduced to what real-time web apps are and what makes them real time. You also learned how to use the Bryntum Gantt chart, React, and a WebSocket to build a simple real-time project task management app. In the process, you learned how to create a WebSocket server and how to communicate with it from a React client.

Bryntum is an industry leader when it comes to world-class web components. They provide powerful and mature components, like Bryntum Gantt, which was used here. Other web components from Bryntum include the Bryntum Scheduler, Bryntum Grid, Bryntum Calendar, Bryntum Task Board, and even testing tools like Siesta. These components are highly customizable, easily integrated, and you can try them for free today!

Are you already using a Bryntum web component? Let us know what you think!

Best Scheduling Libraries for Frontend Developers

Bryntum — Tue, 22 Aug 2023 08:52:01 +0000

A scheduling library is used to add schedulers to applications. These schedulers are used to schedule tasks at desired times by users, either daily, weekly, biweekly, or yearly, and are especially useful because they make scheduling and rescheduling events/appointments easy. Scheduling interfaces are common in travel software, project management, and admin panel applications.

Building a scheduling interface from scratch is time-consuming and expensive, which is why using a scheduling library is advantageous. In addition, most libraries are easy to learn and use.

While it may be tempting to use the first scheduling library you come across, not all libraries are created equal. In this article, you'll look at several scheduling libraries and compare them based on their features and functionality, community support, cost/licensing, developer experience, and ease of use.

The Best Frontend Scheduling Libraries

All scheduling libraries have different features that set them apart. When selecting a library for your use case, it's important to look at its features, community support, cost, and first-party support for paid options.

Bryntum Scheduler

The Bryntum Scheduler is a JavaScript scheduling library that can be integrated with all the popular frontend frameworks, including React, Angular, and Vue.js. It offers a high-performant scheduling UI component based on the Bryntum Grid.

Developer Experience

The Bryntum Scheduler library has extensive and easy-to-use documentation that promotes a positive developer experience. This documentation includes guides on integration, customization, migration, APIs, and more.

In addition, on its examples page, you can browse different use cases highlighting features like drag and drop, filtering, grouping, tree view, and dependency lines. More importantly, this example page includes demos for integration with different frontend frameworks and server integration with PHP.

Features

Some of Bryntum Scheduler's most notable features include the following:

Easy customization of the user interface
Modern browser support for Chrome, Firefox, Safari, and Microsoft Edge
Integration with any server technology (including PHP, Java, ASP.NET)
Integration with popular frontend frameworks
Flexible API with documentation
Resource grouping and task filtering
Support for date indicators and global time ranges
Ability to export to PDF, PNG, and Excel

Community Support

Bryntum has over 8,000 members in its community support forum, where members can ask questions, get direct help from the Bryntum team, report bugs, and request new features.

Cost and Licensing

The Bryntum Scheduler uses end user and original equipment manufacturer (OEM) licenses, and the cost of using the library starts at $850 USD.

You can find more information about the pricing options available on their pricing page.

Bryntum Scheduler Pro

The Bryntum Scheduler Pro is a Bryntum Scheduler but with a powerful Gantt scheduling engine that allows for asynchronous task rescheduling. This resource scheduler has all the features of the Bryntum Scheduler with even more advanced features, making it the most advanced JavaScript scheduler component. It's built with TypeScript and ES2020, and just like the Bryntum Scheduler, it can be integrated with different frontend frameworks, including React, Angular, and Vue.js.

Developer Experience

Just like the Bryntum Scheduler, it has well-written documentation and an examples page showing different demos of how to implement the pro features.

Features

Bryntum Scheduler Pro's most unique feature is that it supports automatic scheduling and can be used in conjunction with the Bryntum Gantt chart. It's the ideal choice for applications that require more than just a nice visual representation, such as the integration of complex scheduling scenarios.

The library has the same features as the Bryntum Scheduler, plus the following additional features:

Partner with Bryntum Gantt for asynchronous task rescheduling
Visualized nonworking time
Calendar support for the project, event, and resource levels
Resource histogram and utilization panels
Travel time, timeline widget, and visual event progress indicator

More information on additional features can be found on Bryntum's website.

Community Support

The Bryntum Scheduler Pro library shares the same 8,000+ member community forum with the other Bryntum libraries. It's the most advanced scheduling library in this roundup, and you can collaborate with Bryntum's services team to add special features to your application.

Cost/Licensing

As is the case with the Bryntum Scheduler, the Bryntum Scheduler Pro uses end user and OEM licenses. The cost of using the library starts at $1,300 USD, which includes the license, source code, free upgrades, npm access, and forum support.

For more information about the Bryntum Scheduler Pro pricing, check out their pricing page.

FullCalendar

FullCalendar is a JavaScript calendar library and can be integrated with frontend frameworks, such as React, Vue.js, and Angular.

Developer Experience

It has a documentation page that provides a short guide on how to get started. The documentation has guides on initialization, integration, CSS customization, plugin packages, and more. It also includes guides on developing in React, Vue.js, and Angular.

In addition, its demonstration page showcases testable examples of its features.

Features

There are two versions of the library: standard and premium. The standard library adds a calendar component to your application, whereas the premium library, also known as FullCalender Scheduler, is a collection of premium plugins, such as timeline view, vertical resource view, and print optimization. FullCalender has over 300 settings built as separate modules to reduce file size, making it very lightweight in comparison to the other libraries in this roundup.

FullCalendar offers the following features:

Powerful, lightweight open source library
TypeScript support
Customizable toolbar, theme, and sizing
Day grid view, date navigation, clicking, and selecting

Some of its premium features include a timeline view, vertical resource view, and printer-friendly rendering.

Community Support

Possessing both premium and open source versions, FullCalendar will always have a free and open source core, thanks to over 10 years of being open source and over 120 contributors. Developers can get help, report bugs, request features, and contribute if they choose to do so.

Cost/Licensing

The standard version of FullCalendar is free and under the Massachusetts Institute of Technology (MIT) license, while the premium version starts at $480 USD and is under the stock commercial license.

TOAST UI Calendar

The TOAST UI Calendar is an open source JavaScript calendar library and can be used in vanilla JavaScript, React, and Vue.js projects.

Developer Experience

The documentation for the TOAST UI Calendar comes in both English and Korean, and it is the only library on this list that offers its documentation in multiple languages.

The library also provides an extra API and example pages that show practical examples of implementing different features alongside the source code.

Features

Unlike the other libraries included in this roundup, the TOAST UI Calendar is completely free and open source.

Some of the most notable TOAST UI Calendar features include the following:

Easily customizable view types, including daily, weekly, and monthly views
Mouse-drag to adjust a schedule
Ability to change the first day of a week
Ability to drag and resize a schedule

However, the TOAST UI Calendar is not the most advanced one available, and it doesn't support resource grouping, task filtering, data binding, server-side integration, or the ability to export your calendar into a file format.

Community Support

The library is open source, with over 10,000 stars and 1,000 forks on the GitHub repository.

If you want to contribute to the library, check out their contributing and code of conduct guides.

Cost/Licensing

The library is free, open source, and licensed under MIT.

Kendo UI for Angular Scheduler

The Kendo UI library is a JavaScript library that includes dozens of fully functional widgets, including the Kendo UI Scheduler.

It offers four JavaScript UI libraries, including the Kendo UI for Angular, KendoReact, Kendo UI for Vue, and Kendo UI for jQuery.

Developer Experience

The library comes with over one hundred UI components, and because of this, it may not be the ideal library if you just want to utilize its scheduler. However, each component is well documented, and there are demos available for almost every feature.

Features

The Kendo UI Scheduler supports data binding and can be bound to both local and remote data. Another distinguishing feature is its right-to-left (RTL) support, which means that the scheduler component can be tailored to users who read from right to left.

Some of the Kendo UI's most notable features include the following:

Day, week, work week, month, agenda, and timeline views
Multiple resources and resource grouping
Templates for appointments
Time zone support
Simple to customize look and feel
Rich API for maximum flexibility
Ability to export to PDF
Accessibility, keyboard navigation, and RTL support
Rich cross-browser and mobile support
Responsive HTML 5 rendering

Community Support

Kendo UI has a community forum where users can report bugs, ask questions, and provide help to others. In addition, its forum has over 3.6 million members.

This library's components have earned a TrustRadius Top Rated Award for two years in a row.

Cost/Licensing

The cost of the library ranges from $999 USD to $2,199 USD and is licensed under the Apache License.

Syncfusion Scheduler

The Syncfusion Scheduler is one of the components offered by Syncfusion, a UI component suite for web, mobile, and desktop apps.

The web components offered by Syncfusion are designed to be lightweight, responsive, and modular. The Syncfusion Scheduler component supports all modern frameworks, including Angular, Vue.js, Blazor, JavaScript, and React.

Developer Experience

The learning curve for this library is short, as the library provides documentation, demos, and videos on how to utilize the scheduling component.

Features

The Syncfusion Scheduler includes four SASS-based themes built in: Material, Bootstrap, Fluent UI, Tailwind CSS, and High Contrast. A theme can be customized by overriding the SASS styling or by developing customized themes. If you're already using one of the previously mentioned themes in your project, there's no need to worry about integrating it into Syncfusion because the theme is built-in.

Other notable features include the following:

Ability to view events in different ways, such as day, month, week, year, agenda, and timeline
Real-time data synchronization
Customizable UI, built-in template options: Material, Bootstrap, Fabric, Tailwind CSS, and High Contrast
Supported browsers include Chrome, Firefox, Edge, Safari, and IE11
Completely accessible and keyboard-interactive
Ability to export events as Excel or ICS files
Responsive scheduler component
Multiple views, templates, resources, grouping, time zone, and timescale
Drag and drop, and resizing actions

Community Support

The Syncfusion Forum is the place where you can start threads and ask for help from other developers. Through the Feedback page, you can also provide feedback to the Syncfusion team, including requests for new features or bug reports. You can also vote on other developers' feedback, and this feedback will be ranked based on popularity.

Cost/Licensing

The price of the product ranges from $2,495 USD to $6,995 USD (for all components).

Conclusion

In this article, you learned about some of the best scheduling libraries you can use to build scheduling components in your frontend application regardless of the framework.

If you're looking for a powerful scheduler that can meet all your application's needs, including the option of working with a team of experts to add custom, unique features to your scheduler, check out Bryntum Scheduler or Bryntum Scheduler Pro.

Best Drag-and-Drop Libraries for Frontend Developers

Bryntum — Thu, 17 Aug 2023 10:49:59 +0000

In recent years, thanks to advancements in technology, websites and online content have been accessed by users in entirely different ways. Considering mobile and touch usage has hit an all-time high, it's no surprise that many users expect applications to be touch-centric. With the use of these devices only set to rise, if you're not optimizing for interaction with prospects and customers on these devices, you're missing out on a lot of opportunities to grow.

Creating a good user experience is critical for web and mobile applications, and a drag-and-drop feature is a convenient interface solution for adding interactivity to your web apps. It's often used to allow users to drag items around a web page, for example, from their desktop or smartphone, into a web application. This is especially important in UIs where users are required to rearrange items or move content from section to section.

A drag-and-drop feature doesn't just affect users' navigation or interaction with the content of your websites; it also has a bearing on the overall user experience of your web application and gives users a modern and interactive user experience. The ability to drag something from one location to another is a straightforward approach to doing numerous things.

In this roundup, you'll learn about the best drag-and-drop libraries for frontend developers to use when implementing drag-and-drop functionality in web applications. You'll look at these libraries based on their features and functionality, community and commercial support, developer experience, and ease of use.

Why Use a Drag-and-Drop Library

The HTML5 Drag and Drop API can typically be used to make different types of content and elements draggable on your page. However, utilizing drag-and-drop libraries over the more conventional HTML5 API implementation requires less effort to implement since the underlying logic is abstracted away. It enables easier feature-rich access to your content and a higher level of interaction with your users.

Plenty of open source libraries can help you create draggable and moveable elements, such as draggable lists, cards, and tables. The following libraries have been selected because they are easy to use, well-maintained, feature-rich, and time-saving when developing complex applications.

React DnD

The React DnD library enables you to implement complex drag-and-drop user interfaces in React applications while maintaining component independence. The user can move objects around the screen by grabbing them and dragging them using gestures. React DnD completely embraces React's declarative rendering paradigm and does not mutate the DOM. React DnD wraps your components and injects props as needed rather than offering ready-made widgets.

React DnD is highly extensible, and the backend can be customized based on touch events, mouse events, or custom events. The library is built on top of the HTML5 Drag and Drop API, and the source of truth in React DnD is data, not the view. Additionally, it's well-supported and maintained by the community.

A major drawback of React DnD is that the base package, react-dnd-html5-backend, doesn't support touch screens out of the box. You also need to install the react-dnd-touch-backend package in order to support touch devices.

The library is user-friendly and has over 18,000 stars on GitHub. Additionally, it receives over 1.3 million weekly downloads on npm and has become one of the most widely used libraries for adding drag-and-drop functionality to React apps.

For more React DnD examples, check out their GitHub page.

React-Draggable

One of the finest drag-and-drop implementation libraries in the React ecosystem is the React-Draggable library, which you can use if you need to implement the drag-and-drop feature in your React application.

The source code shows that its principle is straightforward, and it provides a draggable wrapper whose job is to package a component for dragging into the component you define. Then it recalculates the component's position and uses CSS transforms to move it when the mouse drags it.

The library uses a Draggable API to add draggability to the <Draggable/> component children and the CSS Transform property to move elements regardless of their current positioning or existing transform properties. The draggable component supports touch inputs and can also be used to implement grid layouts by passing a grid property.

In comparison with other drag-and-drop libraries, React-Draggable does an excellent job balancing functionality and ease of use. Most of the features you need to implement a simple draggable component are included in the library. In addition, the React-Draggable library is relatively stable and has rapidly outperformed several similar projects on GitHub, gathering over 7,000 stars and 3 million weekly downloads on npm. With so many projects using it, you can confidently use it in your project.

For more information, this demo app includes many use cases of the React-Draggable library.

react-beautiful-dnd

The react-beautiful-dnd is another library in the React ecosystem for implementing drag-and-drop functionality. There is a higher level of abstraction in the react-beautiful-dnd that is specifically designed for list items, which makes it ideal for unidirectional or one-dimensional layouts requiring horizontal or vertical drag-and-drop movements.

Its straightforward API makes the library easy to use, and it comes straight out of the box with keyboard accessibility. Additionally, it supports a variety of input methods, such as a mouse, keyboard, and touch. However, react-beautiful-dnd can be challenging to work with for lists that use Flexbox or dynamic layouts like grids.

The react-beautiful-dnd is state-driven and supports nested interactive elements. The library provides an intuitive and accessible drag-and-drop experience, with excellent documentation and plenty of examples. Atlassian, the team behind Jira, maintains this library with regular updates and support. In addition, it gets over 1.3 million weekly downloads on npm and has 27,000 stars on GitHub.

If you want to play around with the react-beautiful-dnd, there's a working demo available.

React dnd kit

The React dnd kit is a modular drag-and-drop toolkit that offers a lightweight, performant, accessible, and extensible way to build drag-and-drop interfaces. You can easily transform your components into draggable elements and droppable regions with nearly every capability available in the libraries mentioned earlier using only a few lines of code.

React dnd kit provides complete control over every aspect of how your droppable and draggable components should behave. You can choose to use only the features you want because it's developed as a monorepo that exposes a variety of packages and offers extensibility to create new functionality.

To enable drag-and-drop functionality for your components, the library provides a set of hooks, like useDraggable and useDroppable. These hooks allow you to add drag-and-drop functionality to your React apps without needing to redesign your application or create additional DOM node wrappers. The library supports many use cases, including lists, grids, games, and containers with multiple nested contexts. It also offers smooth interactions and animations, even on mobile devices, and is regularly updated.

It's possible to customize every aspect, including animations, styles, transitions, behavior, and constraints. Additionally, it has support for built-in inputs, such as a mouse, touch, and keyboard, or you can create your own custom inputs.

The library is an open source project that is maintained by the community, and it gets over 311,000 weekly downloads on npm and has 5,300 stars on GitHub. For more examples using the React dnd kit, check out their website.

SortableJS

SortableJS is a lightweight minimalist JavaScript library that utilizes the HTML5 Drag and Drop API to allow implementation of the drag-and-drop reorder as well as sort list items in modern browsers and touch devices. The library is easy to use and has support for most of the popular JavaScript frameworks, like React, Vue.js, and Angular.

Unlike the other React-specific libraries, you can use SortableJS to create drag-and-drop lists using vanilla JavaScript and HTML/CSS or any of the supported frameworks. There are also a lot of basic functionalities, including sorting, delaying, switching, making multiple drag-and-drop selections, and inverting.

In addition to supporting modern browsers, SortableJS also provides a fallback function for non-HTML5 browsers. There is support for a mouse and touch input, as well as drag handle selection and selectable text. It also supports smooth CSS animations, CSS transformations, and most CSS libraries, such as Bootstrap and Tailwind CSS.

The library gets over 1 million weekly downloads on npm and has over 25,400 stars on GitHub. Examples of how you can use SortableJS can be found on their GitHub page.

Dragula

With Dragula, there is no dependency on any other framework. It's an easy-to-use drag-and-drop library that supports vanilla JavaScript and modern frameworks, such as Angular and React, and is compatible with all modern browsers, including Internet Explorer 7+ (IE7+).

Dragula has drag handles for dragging elements, which fire up drag events only when the handles are held. The dragging of items is handled elegantly, with a shadow providing visual feedback on where the item will be dropped, and it automatically determines the sort order. In addition, there is a quick deletion feature available for when the drag button is released within a defined amount of time.

With most features you'll be looking for in a drag-and-drop library, the Dragula library is simple to use, and the drake component is the primary feature. This drake element is in charge of managing the drag-and-drop activities for a group of registered containers. Children of the container element can then be moved inside or between these containers. During drag-and-drop operations, the drake handles many events; the most important of which is drop, which invokes a callback when an item is dropped and provides the DOM element.

The library is also open source and maintained by a few contributors, with over 200,000 weekly downloads on npm and 21,000 stars on GitHub. You can find out more about Dragula on this GitHub repo.

Conclusion

Many web and mobile applications today want to ensure an excellent user experience. Having drag-and-drop functionality helps to improve the user experience by making the user's tasks easier and more efficient. If you're looking to offer this functionality, you can save a lot of time by using a drag-and-drop library that has been thoroughly tested.

In this article, you learned about some of the best and most useful drag-and-drop libraries and their key features so you can select the right one for your application.

If you found this article helpful, you should check out Bryntum, a world-class suite of essential web UI components for task management to help the world stay on schedule. Its offerings regularly include powerful drag-and-drop functionality, such as the Task Board, customizable calendar, and scheduler.

Building a Trello Clone with Bryntum TaskBoard

Bryntum — Tue, 15 Aug 2023 10:38:54 +0000

Trello is one of the most commonly used project management applications. And why shouldn't it be? With its intuitive design and easy-to-use interface, Trello makes project management effortless. You can easily drag and drop tasks and move them to different columns.

But what if there was a solution where you could build your own Trello clone in minutes? The Bryntum TaskBoard can do just that. It's a perfect component that provides the features you can use to create a project management application like Trello. It has a pure JavaScript implementation that you can integrate with popular frontend libraries and frameworks, including React and Vue.js.

In this tutorial, you'll learn how to build a project management application like Trello using React and Bryntum TaskBoard. You'll start with a basic React application and work through the code examples to create a fully functional project management application.

Building a Trello-like Application Using Bryntum TaskBoard

Before you begin this tutorial, you'll need Node.js version 14 or newer as well as npm version 6 or newer installed on your computer. You'll also need a code editor like Visual Studio Code.

You can follow along with this tutorial using this GitHub repository.

Set Up the Project

To begin, run the following command to create a new React project _trello-with-bryntum_ using create-react-app:

npx create-react-app trello-with-bryntum

Change the directory to the newly created project:

cd trello-with-bryntum

Once the directory has been updated, you need to disable the React StrictMode to use Bryntum components, as this feature is currently under development. Remove <React.StrictMode> from src/index.js:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: <https://bit.ly/CRA-vitals>
reportWebVitals();

Install Bryntum TaskBoard

To install Bryntum TaskBoard, you need to sign up for a free trial. Bryntum serves the TaskBoard component from a private registry, so you need to specify the registry URL to npm using the following command:

npm config set "@bryntum:registry=https://npm.bryntum.com"

Since Bryntum's registry is authenticated, you'll need to log in using the credentials you signed up with:

npm login --registry=https://npm.bryntum.com

Please note: The "@" symbol should be replaced with ".." in the login email. For example, "someone@example.com" will become "someone..example.com". Use "trial" as the password.

Now, run the following command to install the Bryntum TaskBoard dependencies:

npm i @bryntum/taskboard@npm:@bryntum/taskboard-trial@^5.1.2 @bryntum/taskboard-react@5.1.2

Add TaskBoard Configuration

To add TaskBoard configuration, create a new folder public/users/ inside the project. Then download the user images and add them to this folder. This allows the application to access these images even in a production environment.

Create a new file called src/AppConfig.js and export the taskBoardConfig object that provides a list of column names, the column name mapping field status, and the path to resource images:

export const taskBoardConfig = {
  // Url for resource avatar images
  resourceImagePath: "users/",
  // default columns
  columns: ["todo", "doing", "done"],
  // Field used to pair a task to a column
  columnField: "status",
};

Then create a new file called src/AppData.js and export the application's default data. This example uses a static file, but you can also use an API endpoint or database to fetch this if you prefer:

Note: The user.image should match a file name from the public/users/ folder.

export const projectData = {
  tasks: [
    { id: 1, name: "Book flight", status: "done", prio: "medium" },
    { id: 2, name: "Book hotel", status: "done", prio: "medium" },
    { id: 3, name: "Pack bags", status: "doing", prio: "low" },
    { id: 4, name: "Get visa", status: "doing", prio: "high" },
    { id: 5, name: "Book train", status: "done", prio: "medium" },
    { id: 6, name: "Go to airport", status: "todo", prio: "low" },
    { id: 7, name: "Renew passport", status: "todo", prio: "high" },
    { id: 8, name: "Swim in pool", status: "todo", prio: "medium" },
    { id: 9, name: "Scuba diving", status: "todo", prio: "medium" },
    { id: 10, name: "Canyoning", status: "todo", prio: "low" },
    { id: 11, name: "Snorkeling", status: "doing", prio: "medium" },
    { id: 12, name: "Diving license", status: "todo", prio: "medium" },
    { id: 13, name: "Book cab", status: "done", prio: "low" },
    { id: 14, name: "Write postcards", status: "todo", prio: "medium" },
    { id: 15, name: "Take pictures", status: "todo", prio: "low" },
    { id: 16, name: "Take selfies", status: "todo", prio: "high" },
    { id: 17, name: "Post on instagram", status: "todo", prio: "medium" },
    { id: 18, name: "Call grandma", status: "todo", prio: "medium" },
    { id: 19, name: "Buy swimming ring", status: "done", prio: "high" },
    { id: 20, name: "Get in shape", status: "doing", prio: "medium" },
    { id: 21, name: "Iron shirts", status: "done", prio: "low" },
  ],
  users: [
    { id: 1, name: "Angelo", image: "angelo.jpg" },
    { id: 2, name: "Celia", image: "celia.jpg" },
    { id: 3, name: "Dave", image: "dave.jpg" },
    { id: 4, name: "Emilia", image: "emilia.jpg" },
    { id: 5, name: "Gloria", image: "gloria.jpg" },
    { id: 6, name: "Henrik", image: "henrik.jpg" },
    { id: 7, name: "Kate", image: "kate.jpg" },
    { id: 8, name: "Lee", image: "lee.jpg" },
    { id: 9, name: "Lisa", image: "lisa.jpg" },
    { id: 10, name: "Mark", image: "mark.jpg" },
    { id: 11, name: "Steve", image: "steve.jpg" },
  ],
  assignments: [
    { id: 1, event: 7, resource: 1 },
    { id: 2, event: 7, resource: 2 },
    { id: 3, event: 8, resource: 2 },
    { id: 4, event: 4, resource: 3 },
    { id: 5, event: 7, resource: 3 },
    { id: 6, event: 7, resource: 4 },
    { id: 7, event: 7, resource: 5 },
    { id: 8, event: 7, resource: 6 },
    { id: 9, event: 7, resource: 7 },
    { id: 10, event: 7, resource: 8 },
    { id: 11, event: 7, resource: 9 },
    { id: 12, event: 7, resource: 10 },
    { id: 13, event: 7, resource: 11 },
    { id: 14, event: 16, resource: 7 },
    { id: 15, event: 16, resource: 8 },
    { id: 16, event: 16, resource: 9 },
    { id: 17, event: 16, resource: 10 },
    { id: 18, event: 16, resource: 11 },
    { id: 19, event: 19, resource: 10 },
    { id: 20, event: 9, resource: 7 },
    { id: 21, event: 12, resource: 8 },
    { id: 22, event: 14, resource: 9 },
    { id: 23, event: 17, resource: 10 },
    { id: 24, event: 18, resource: 10 },
    { id: 25, event: 11, resource: 9 },
    { id: 26, event: 20, resource: 8 },
    { id: 27, event: 1, resource: 7 },
    { id: 28, event: 2, resource: 6 },
    { id: 29, event: 5, resource: 5 },
    { id: 30, event: 6, resource: 4 },
    { id: 31, event: 10, resource: 3 },
    { id: 32, event: 15, resource: 2 },
    { id: 33, event: 3, resource: 1 },
    { id: 34, event: 13, resource: 2 },
    { id: 35, event: 21, resource: 3 },
    { id: 36, event: 8, resource: 3 },
    { id: 37, event: 17, resource: 9 },
    { id: 38, event: 17, resource: 8 },
    { id: 39, event: 17, resource: 7 },
    { id: 40, event: 17, resource: 6 },
  ],
};

Use Bryntum TaskBoard

Now that the project configuration is ready, it's time to use the BryntumTaskBoard and BryntumProjectModel components inside the src/App.js to create a drag-and-drop project manager.

Import the taskBoardConfig from ./AppConfig.js, and projectData from the ./AppData.js files. Use the useRef hook to create a reference to the components and the useState hook to create individual states for the projectData:

// src/App.js
import React, { useRef, useState } from "react";
import {
  BryntumTaskBoard,
  BryntumProjectModel,
} from "@bryntum/taskboard-react";
import { taskBoardConfig } from "./AppConfig";
import { projectData } from "./AppData";
import "./App.css";

function App() {
  const taskBoard = useRef();
  const project = useRef();
  const [tasks] = useState(projectData.tasks);
  const [assignments] = useState(projectData.assignments);
  const [resources] = useState(projectData.users);
  return (
    <>
      <BryntumProjectModel
        ref={project}
        tasks={tasks}
        assignments={assignments}
        resources={resources}
      />
      <BryntumTaskBoard
        ref={taskBoard}
        project={project}
        {...taskBoardConfig}
      />
    </>
  );
}

export default App;

Please note: You must use the BryntumProjectModel as the first component in the tree to ensure BryntumTaskBoard works properly.

Run npm start to start the application and open http://localhost:3000 in a web browser:

At this point, the TaskBoard component will render, but it doesn't look like a board yet. To render the TaskBoard component correctly, you need to use one of the many themes that come with it. Remove all existing styles from src/App.css and import the material theme at the top of the file:

/* src/App.css */
@import '~@bryntum/taskboard/taskboard.material.css';

Add New Column Functionality

Now that the basic TaskBoard is ready, you need to add a header at the top with a button to add a new column. The button will use the prompt API to ask for the new column name and then add the new column by using the taskBoard ref and calling the columns.add method on it:

// src/App.js
import React, { useRef, useState } from "react";
import {
  BryntumTaskBoard,
  BryntumProjectModel,
} from "@bryntum/taskboard-react";
import { taskBoardConfig } from "./AppConfig";
import { projectData } from "./AppData";
import "./App.css";

function App() {
  const taskBoard = useRef();
  const project = useRef();
  const [tasks] = useState(projectData.tasks);
  const [assignments] = useState(projectData.assignments);
  const [resources] = useState(projectData.users);
  return (
    <>
      <BryntumProjectModel
        ref={project}
        tasks={tasks}
        assignments={assignments}
        resources={resources}
      />
      <nav className={"header"}>
        <h1 className={"heading"}>Trello using Bryntum TaskBoard</h1>
        <button
          className={"add-column"}
          onClick={() => {
            const value = prompt("Column name");
            if (value) {
              taskBoard.current.instance.columns.add({
                id: value,
                text: value,
              });
            }
          }}
        >
          Add column
        </button>
      </nav>
      <BryntumTaskBoard
        ref={taskBoard}
        project={project}
        {...taskBoardConfig}
      />
    </>
  );
}

export default App;

Add the following styles to App.css to style the header similar to Trello:

/* src/App.css */
@import '~@bryntum/taskboard/taskboard.material.css';

* {
  margin: 0px;
  box-sizing: border-box;
}

.header {
  display: flex;
  padding: 20px;
  justify-content: space-between;
  align-items: center;
  color: white;
  background-color: dodgerblue;
}

.header .heading {
  font-size: 24px;
}

.header .add-column {
  padding: 5px 10px;
  border-radius: 5px;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

You can add the onChange event listener on the BryntumProjectModel to update the tasks state when the project data changes. The onChange handler will receive an object describing the change, and you can use the change.action to check if a new task is added or an existing one is updated:

// src/App.js
import React, { useRef, useState } from "react";
import {
  BryntumTaskBoard,
  BryntumProjectModel,
} from "@bryntum/taskboard-react";
import { taskBoardConfig } from "./AppConfig";
import { projectData } from "./AppData";
import "./App.css";

function App() {
  const taskBoard = useRef();
  const project = useRef();
  const [tasks, setTasks] = useState(projectData.tasks);
  const [assignments] = useState(projectData.assignments);
  const [resources] = useState(projectData.users);
  function onChange(change) {
    if(change.action === 'add') {
      setTasks(() => [...tasks, change.records[0].data])
    }
    if(change.action === 'update') {
      const updatedTask =  change.record.data
      const newTasks = [...tasks].filter(item => item.id !== updatedTask.id)
      setTasks(() => [...newTasks, updatedTask])
    }
  }

  return (
    <>
      <BryntumProjectModel
        ref={project}
        tasks={tasks}
        assignments={assignments}
        resources={resources}
        onChange={onChange}
      />
      <nav className={"header"}>
        <h1 className={"heading"}>Trello using Bryntum TaskBoard</h1>
        <button
          className={"add-column"}
          onClick={() => {
            const value = prompt("Column name");
            if (value) {
              taskBoard.current.instance.columns.add({
                id: value,
                text: value,
              });
            }
          }}
        >
          Add column
        </button>
      </nav>
      <BryntumTaskBoard
        ref={taskBoard}
        project={project}
        {...taskBoardConfig}
      />
    </>
  );
}

export default App;

And that's it! You've successfully created a Trello-like project management application using Bryntum TaskBoard. This application provides features such as using drag and drop for tasks and dynamically adding columns out-of-the-box:

Additional Functionality

Your basic Trello clone is ready, but with Bryntum, you can add even more functionality to improve the user experience with just a few props.

For instance, to enable moving columns using drag-and-drop functionality, you just need to pass the columnDragFeature prop to the BryntumTaskBoard to enable it. Now users can quickly move the columns around in the order they want:

     // other code above
     <BryntumTaskBoard
        ref={taskBoard}
        project={project}
        columnDragFeature
        {...taskBoardConfig}
      />
     // example below

Another helpful feature is the TaskTooltip, which shows task details when hovering over a task. You can enable this by passing the taskTooltipFeature prop to BryntumTaskBoard:

    // other code above
    <BryntumTaskBoard
        ref={taskBoard}
        project={project}
        columnDragFeature
        taskTooltipFeature
        {...taskBoardConfig}
    />
    // example below

Conclusion

After completing this tutorial, you now have a Trello-like project management application that was created using the Bryntum TaskBoard. If you want to keep going, you can improve this application by utilizing other features from the TaskBoard documentation.

Bryntum is a software company that creates beautiful and performant web components for professional usage, including TaskBoard, Scheduler, and Gantt. Bryntum's web components come with thorough documentation, making them easy to integrate with popular frontend frameworks, including React and Vue.js.

Using Bryntum Calendar to Coordinate Caregiver Availability in Health Care

Bryntum — Thu, 10 Aug 2023 12:11:12 +0000

The Bryntum Calendar is a web component that you can use to display and manage calendar events. It has type definitions using TypeScript as well as a well-documented API, making it easy to integrate with popular libraries and frameworks, including React and Vue.js.

The Bryntum Calendar component is beneficial for project management applications that need to show users a project timeline or applications that need resource management with a calendar view. This includes applications providing health-care or home care services, where resource allocation and coordination are essential.

In this article, you'll build an application to coordinate caregiver availability for family members using React, Tailwind CSS, and the Bryntum Calendar component. While doing so, you'll learn about working with JSON data, creating stateful React components, and displaying events in a calendar view using the Bryntum Calendar.

Building the Caregiver Application

Before you begin this tutorial, you'll need Node.js version 14 or newer as well as npm version 6 or newer installed on your computer. You'll also need a code editor like Visual Studio Code.

You can follow along with this tutorial using this GitHub repository.

Set Up the Project

To begin, run the following command to create a new React project, caregiver-app, using create-react-app:

npx create-react-app caregiver-app

Then change the directory to the newly created project:

cd caregiver-app

Run the following command to install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer

Next, run npx tailwindcss init -p to initialize Tailwind CSS in the project. This command will generate tailwind.config.js and postcss.config.js files, where you can configure color schemes and plug-ins.

Update the content list in the tailwind.config.js file to watch for Tailwind CSS class updates in all files:

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Finally, add @tailwind directives to the ./src/index.css so you can use Tailwind CSS classes in all our components:

@tailwind base;
@tailwind components;
@tailwind utilities;

Create Your Page Layout

Now that you've set up the project, it's time to create a simple app layout with a navigation bar at the top and a drop-down menu to select your desired family member. Here's a rough mock up:

Before going further, you need a data source to fetch the list of caregivers and the caregiving schedules for family members. To do that, create a new src/data.json file. The data.json has two keys:

Caregivers, a list of caregiver details objects
The caregiving schedules for each family member

Each caregiving schedule item has a caregiver linked to it using the resourceId attribute that maps to the caregiver's id, as shown below.

The caregivers object structure is as follows:

{
  "id": "steve", // unique resource id

  "name": "Steve Rogers", // name of the caregiver

  "eventColor": "blue" // color for the calendar event
}

The schedule object structure looks like this:


{
  "<family-member>": [
    {
      "startDate": "<appointment-start-date>",

      "id": "<unique-id-number>",
      "endDate": "<appointment-start-date>",

      "name": "<slot-name>",

      "resourceId": "<caregiver-id>"
    }

    // ... more appointments
  ]

  // ... other family member's schedules
}

You can copy the below JSON as sample data for your data.json file.

{
  "caregivers": [
    {
      "id": "steve",
      "name": "Steve Rogers",
      "eventColor": "blue"
    },
    {
      "id": "tony",
      "name": "Tony Stark",
      "eventColor": "orange"
    },
    {
      "id": "bruce",
      "name": "Bruce Banner",
      "eventColor": "green"
    },
    {
      "id": "natasha",
      "name": "Natasha Romano ff",
      "eventColor": "pink"
    }
  ],
  "schedule": {
    "Grand Pa": [
      {
        "startDate": "Thu Sep 08 2022 16:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 96,
        "endDate": "Thu Sep 08 2022 18:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "tony"
      },
      {
        "startDate": "Fri Sep 09 2022 06:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 91,
        "endDate": "Fri Sep 09 2022 07:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "natasha"
      },
      {
        "startDate": "Thu Sep 08 2022 05:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 82,
        "endDate": "Thu Sep 08 2022 07:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "steve"
      },
      {
        "startDate": "Mon Sep 05 2022 18:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 62,
        "endDate": "Mon Sep 05 2022 20:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "bruce"
      },
      {
        "startDate": "Tue Sep 06 2022 11:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 93,
        "endDate": "Tue Sep 06 2022 12:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "tony"
      },
      {
        "startDate": "Fri Sep 09 2022 08:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 2,
        "endDate": "Fri Sep 09 2022 10:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "natasha"
      },
      {
        "startDate": "Mon Sep 05 2022 16:30:00 GMT+0000 (Coordinated Universal Time)",
        "id": 79,
        "endDate": "Mon Sep 05 2022 17:30:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "bruce"
      },
      {
        "startDate": "Sun Sep 04 2022 09:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 15,
        "endDate": "Sun Sep 04 2022 10:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "natasha"
      }
    ],
    "Grand Ma": [
      {
        "startDate": "Fri Sep 09 2022 18:30:00 GMT+0000 (Coordinated Universal Time)",
        "id": 12,
        "endDate": "Fri Sep 09 2022 20:30:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "bruce"
      },
      {
        "startDate": "Fri Sep 09 2022 17:30:00 GMT+0000 (Coordinated Universal Time)",
        "id": 96,
        "endDate": "Fri Sep 09 2022 19:30:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "natasha"
      },
      {
        "startDate": "Mon Sep 05 2022 05:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 98,
        "endDate": "Mon Sep 05 2022 07:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "tony"
      },
      {
        "startDate": "Fri Sep 09 2022 06:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 91,
        "endDate": "Fri Sep 09 2022 07:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "natasha"
      },
      {
        "startDate": "Thu Sep 08 2022 05:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 65,
        "endDate": "Thu Sep 08 2022 07:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "steve"
      },
      {
        "startDate": "Mon Sep 05 2022 18:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 62,
        "endDate": "Mon Sep 05 2022 20:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "bruce"
      },
      {
        "startDate": "Wed Sep 07 2022 11:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 18,
        "endDate": "Wed Sep 07 2022 13:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "steve"
      }
    ],
    "Uncle": [
      {
        "startDate": "Sun Sep 04 2022 17:30:00 GMT+0000 (Coordinated Universal Time)",
        "id": 47,
        "endDate": "Sun Sep 04 2022 18:30:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "steve"
      },
      {
        "startDate": "Tue Sep 06 2022 04:30:00 GMT+0000 (Coordinated Universal Time)",
        "id": 24,
        "endDate": "Tue Sep 06 2022 06:30:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "natasha"
      },
      {
        "startDate": "Thu Sep 08 2022 06:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 83,
        "endDate": "Thu Sep 08 2022 07:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "bruce"
      },
      {
        "startDate": "Sun Sep 04 2022 16:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 52,
        "endDate": "Sun Sep 04 2022 18:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "tony"
      },
      {
        "startDate": "Wed Sep 07 2022 12:30:00 GMT+0000 (Coordinated Universal Time)",
        "id": 53,
        "endDate": "Wed Sep 07 2022 13:30:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "natasha"
      },
      {
        "startDate": "Sun Sep 04 2022 04:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 48,
        "endDate": "Sun Sep 04 2022 06:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "steve"
      },
      {
        "startDate": "Sun Sep 04 2022 02:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 19,
        "endDate": "Sun Sep 04 2022 03:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "tony"
      }
    ],
    "Dad": [
      {
        "startDate": "Fri Sep 09 2022 10:30:00 GMT+0000 (Coordinated Universal Time)",
        "id": 86,
        "endDate": "Fri Sep 09 2022 12:30:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "natasha"
      },
      {
        "startDate": "Sun Sep 04 2022 12:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 26,
        "endDate": "Sun Sep 04 2022 14:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "tony"
      },
      {
        "startDate": "Wed Sep 07 2022 07:30:00 GMT+0000 (Coordinated Universal Time)",
        "id": 87,
        "endDate": "Wed Sep 07 2022 08:30:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "bruce"
      },
      {
        "startDate": "Thu Sep 08 2022 20:30:00 GMT+0000 (Coordinated Universal Time)",
        "id": 37,
        "endDate": "Thu Sep 08 2022 21:30:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "natasha"
      },
      {
        "startDate": "Mon Sep 05 2022 01:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 3,
        "endDate": "Mon Sep 05 2022 02:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "tony"
      },
      {
        "startDate": "Mon Sep 05 2022 00:00:00 GMT+0000 (Coordinated Universal Time)",
        "id": 93,
        "endDate": "Mon Sep 05 2022 01:00:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "steve"
      },
      {
        "startDate": "Tue Sep 06 2022 08:30:00 GMT+0000 (Coordinated Universal Time)",
        "id": 10,
        "endDate": "Tue Sep 06 2022 10:30:00 GMT+0000 (Coordinated Universal Time)",
        "name": "Caregiver assigned",
        "resourceId": "bruce"
      }
    ]
  }
}

This example uses a static JSON file, but you can also use an API or database as the source.

Import the data.json file in the App.js and retrieve the list of members using the Object.keys method:

import "./App.css";
import { useState } from "react";
import data from "./data.json";

const ALL_MEMBERS = Object.keys(data.schedule); // get list of members from object

Then create a simple navigation bar at the top using Tailwind CSS classes:

import "./App.css";
import { useState } from "react";
import data from "./data.json";

const ALL_MEMBERS = Object.keys(data.schedule); // get list of members from object

function App() {
  return (
    <div className={"flex flex-col max-w-[1200px] mx-auto"}>
      <nav
        className={
          "flex flex-row items-center bg-green-600 p-2 py-3 text-white shadow shadow-sm shadow-gray-500"
        }
      >
        <p className={"text-lg"}>Caregiver PRO</p>
        <p className={"mx-10"}>|</p>
        <i className={"font-light text-sm"}>
          We ensure the best care for your loved ones.
        </i>
      </nav>
    </div>
  );
}

export default App;

Run npm start to start the application:

Now create a drop-down menu using the <select> HTML element and populate it with the <option> elements by mapping over the ALL_MEMBERS array:

import "./App.css";
import { useState } from "react";
import data from "./data.json";

const ALL_MEMBERS = Object.keys(data.schedule); // get list of members from object

function App() {
  return (
    <div className={"flex flex-col max-w-[1200px] mx-auto"}>
      <nav
        className={
          "flex flex-row items-center bg-green-600 p-2 py-3 text-white shadow shadow-sm shadow-gray-500"
        }
      >
        <p className={"text-lg"}>Caregiver PRO</p>
        <p className={"mx-10"}>|</p>
        <i className={"font-light text-sm"}>
          We ensure the best care for your loved ones.
        </i>
      </nav>
      <main className={"mt-10"}>
        <div className={"mb-10"}>
          <label htmlFor={"member"}>Select member</label>
          <select
            id={"member"}
            value={member}
            className={"ml-2 bg-gray-100 border-2 rounded border-green-600"}
          >
            {ALL_MEMBERS.map((member) => (
              <option key={member} value={member}>
                {member}
              </option>
            ))}
          </select>
        </div>
        <div className={"bg-gray-200 h-[500px] text-lg"}>
          Calendar goes here
        </div>
      </main>
    </div>
  );
}

export default App;

Create a member state variable using the useState React hook to allow users to select a family member. Add an onChange event handler to the <select> element to update the member state whenever the user selects a new member:

import "./App.css";
import { useState } from "react";
import data from "./data.json";

const ALL_MEMBERS = Object.keys(data.schedule); // get list of members from object

function App() {
  const [member, setMember] = useState("Grand Ma");
  return (
    <div className={"flex flex-col max-w-[1200px] mx-auto"}>
      <nav
        className={
          "flex flex-row items-center bg-green-600 p-2 py-3 text-white shadow shadow-sm shadow-gray-500"
        }
      >
        <p className={"text-lg"}>Caregiver PRO</p>
        <p className={"mx-10"}>|</p>
        <i className={"font-light text-sm"}>
          We ensure the best care for your loved ones.
        </i>
      </nav>
      <main className={"mt-10"}>
        <div className={"mb-10"}>
          <label htmlFor={"member"}>Select member</label>
          <select
            id={"member"}
            value={member}
            onChange={(e) => setMember(e.target.value)}
            className={"ml-2 bg-gray-100 border-2 rounded border-green-600"}
          >
            {ALL_MEMBERS.map((member) => (
              <option key={member} value={member}>
                {member}
              </option>
            ))}
          </select>
        </div>
        <div className={"bg-gray-200 h-[500px] text-lg"}>
          Calendar goes here
        </div>
      </main>
    </div>
  );
}

export default App;

The application layout is ready. Now you need to plug in the Bryntum Calendar to show user-friendly schedules.

Add the Bryntum Calendar Layout

To add the Bryntum Calendar layout, you need to sign up for a free trial of the Bryntum Calendar. Bryntum serves the calendar component from a private registry, so you need to specify the registry URL to npm using the following command:

npm config set "@bryntum:registry=https://npm.bryntum.com"

Since Bryntum's registry is authenticated, you need to log in using the credentials you signed up with:

npm login --registry=https://npm.bryntum.com

Please note: The "@" should be replaced with ".." in the login email. For example, "someone@example.com" will become "someone..example.com" with "trial" as the password.

Now, run the following command to install the Bryntum Calendar dependencies:

npm i @bryntum/calendar@npm:@bryntum/calendar-trial@^5.1.2 @bryntum/calendar-react@5.1.2

Import the Stockholm theme for Bryntum Calendar in the index.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "@bryntum/calendar/calendar.stockholm.css"; # add this line

Then import the BryntumCalendar component in the App.js file and create a CALENDAR_CONFIG object with the date that the calendar will open:

import "./App.css";
import { useState } from "react";
import data from "./data.json";
import { BryntumCalendar } from "@bryntum/calendar-react";

const CALENDAR_CONFIG = {
  date: new Date(2022, 8, 4), // calendar will open at this date
};

const ALL_MEMBERS = Object.keys(data.schedule); // get list of members from object

Pass the CALENDAR_CONFIG as config, caregivers as the resources, and the data.schedule[member] as the events prop to the BryntumCalendar:

import "./App.css";
import { useState } from "react";
import data from "./data.json";
import { BryntumCalendar } from "@bryntum/calendar-react";

const CALENDAR_CONFIG = {
  date: new Date(2022, 8, 4),
};
const ALL_MEMBERS = Object.keys(data.schedule); // get list of members from object

function App() {
  const [member, setMember] = useState("Grand Ma");
  return (
    <div className={"flex flex-col max-w-[1200px] mx-auto"}>
      <nav
        className={
          "flex flex-row items-center bg-green-600 p-2 py-3 text-white shadow shadow-sm shadow-gray-500"
        }
      >
        <p className={"text-lg"}>Caregiver PRO</p>
        <p className={"mx-10"}>|</p>
        <i className={"font-light text-sm"}>
          We ensure the best care for your loved ones.
        </i>
      </nav>
      <main className={"mt-10"}>
        <div className={"mb-10"}>
          <label htmlFor={"member"}>Select member</label>
          <select
            id={"member"}
            value={member}
            onChange={(e) => setMember(e.target.value)}
            className={"ml-2 bg-gray-100 border-2 rounded border-green-600"}
          >
            {ALL_MEMBERS.map((member) => (
              <option key={member} value={member}>
                {member}
              </option>
            ))}
          </select>
        </div>
        <BryntumCalendar
          config={CALENDAR_CONFIG}
          resources={data.caregivers}
          events={data.schedule[member]}
        />
      </main>
    </div>
  );
}

export default App;

In this case, since the member is in a React state, whenever the user selects a new member from the drop-down, the calendar will re-render and show the caregiver schedule for the selected member. And with this final step, the Caregiver PRO is ready:

The users can add new caregiver appointments by checking the missing slots and selecting a caregiver from the list while making the appointment. Or they can change the view to daily or monthly, or see it as a list by selecting the Agenda view.

Here, you can see the Caregiver PRO in action:

Conclusion

Upon completion of this tutorial, you will have a fully functioning Caregiver PRO application. To create this application, you learned how to set up a React project with Tailwind CSS styling, and you used a JSON file as the data source to display the list of events. Later, you used the Bryntum Calendar component to display calendar events and make booking caregivers for family members simpler. You can extend this example further and use Bryntum Calendar events to read or store events from a remote API.

Are you already using the Bryntum Calendar? We would love to hear how it's making your life easier.

Bryntum is a software company specializing in creating beautiful and performant web components, including the Calendar, Scheduler, and Gantt chart. Want to learn more? Try our scheduling and Gantt components at bryntum.com.

Getting Started with Bryntum Grid, React, and RxJS

Bryntum — Tue, 08 Aug 2023 10:16:59 +0000

If you have a web application with a lot of data, you need to find a way to display that information in a succinct and organized way, which is where grids can help. Grids are crucial components of user interfaces that tabulate massive volumes of data and make it easy for users to interact with them. Many individuals choose to use premade packages like Bryntum Grid because they are highly functional and speed up the coding process.

Bryntum Grid is an effective and high-performing table component for web applications. It comes with various capabilities, including the ability to rearrange rows and columns or modify individual cells, search and filter data, and scroll through grid portions. The grid's visual appearance is set using the renderer functions, standard CSS, and themes built with Syntactically Awesome Style Sheets (Sass).

Bryntum Grid uses a variety of techniques, including virtual representation, the use of reusable grid elements, and CSS optimizations, to achieve visualization and navigation efficiency. You can modify virtually any portion of the codebase thanks to a robust API. Moreover, custom data formats are an option in addition to JSON, which is how all data is loaded by default. It offers a wide range of customization choices, which include premade or custom themes.

In this article, you'll learn how to build an application using React, Bryntum Grid, and Reactive Extensions for JavaScript (RxJS). You will utilize React Hooks and RxJS for state management and build an interactive grid with built-in features.

Implementing the Application

Before you begin, you'll need Node.js version 14 or newer installed on your operating system (OS). You'll also need a code editor. Here, Visual Studio (VS) Code will be used due to its extensive functionality.

In addition, you'll need a basic understanding of React. For more information, check out the official React documentation and Bryntum React guide.

All the code for this tutorial can be found in this GitHub repo.

Set Up Bryntum Grid

In this tutorial, you'll learn how to get started if you're using the Create React App script. You can obtain a free trial version of Bryntum by signing up for the private npm registry, which is covered in more detail in the following section.

Access the Private npm Registry

To set up Bryntum Grid, you need to access the private registry through your terminal after logging in. Packages for Bryntum are saved in a personal Bryntum registry. Run the following command in your terminal to find the registry:

npm config set "@bryntum:registry=https://npm.bryntum.com"

Then, using your authentication information, you need to log in.

Please note: The specifics vary depending on whether you are using the licensed version or the trial version.

For the trial version, log in with the following command:

 npm login --registry=https://npm.bryntum.com

Then enter your username (ie user..yourdomain.com), password (ie trial), and email (ie user@yourdomain.com).

Please note: In your username, make sure that you change the "@" sign to ".." in your email address.

If you want to continue using Bryntum once the trial time has ended, you'll need to purchase a license from the Bryntum website. After that, you will need to connect back into the Bryntum private registry using your client information.

For a licensed version, log in using the same command mentioned earlier (npm login --registry=https://npm.bryntum.com), then use your Bryntum Customer Zone email as your username (but be sure to replace "@" with ".."), and enter your Bryntum Customer Zone password.

Create the Application

After logging in, you need to utilize the Create React App to create the React app along with the Bryntum Grid package. In this tutorial, you'll be using JavaScript for the project. In your terminal,
navigate to the directory where you want to set up the project and run the following:

npx create-react-app react-bryntum-grid --template @bryntum/cra-template-javascript-grid

Alternatively, if you would like to use TypeScript, use the following code:

npx create-react-app react-bryntum-grid --template @bryntum/cra-template-typescript-grid

Substitute your preferred application name for react-bryntum-grid.

Please note: A caret (^) may be inserted by Create React App as the version prefix of dependencies. To properly regulate upgrades, you shouldn't use the caret character as a version prefix. Examine package.json and replace the dependencies and devDependencies with the following:

For the trial version:

"dependencies": {
  "@bryntum/grid": "npm:@bryntum/grid-trial@5.1.1",
  "@bryntum/grid-react": "5.1.1",
  "react": "17.0.2",
  "react-dom": "17.0.2",
  "react-scripts": "4.0.3"
},
"devDependencies": {
  "babel-preset-react-app": "npm:@bryntum/babel-preset-react-app@10.0.0",
  "cross-env": "~7.0.2",
  "sass": "~1.42.0"
}

For the licensed version:

"dependencies": {
  "@bryntum/grid": "5.1.1",
  "@bryntum/grid-react": "5.1.1",
  "react": "17.0.2",
  "react-dom": "17.0.2",
  "react-scripts": "4.0.3"
},
"devDependencies": {
  "babel-preset-react-app": "npm:@bryntum/babel-preset-react-app@10.0.0",
  "cross-env": "~7.0.2",
  "sass": "~1.42.0"
}

Then from the terminal, navigate to your project folder and install all the necessary dependencies using the following code:

cd react-bryntum-grid

npm install

Then start the app using the following command:

npm start

You should see the following page with a sample grid on it:

Set Up the Grid with Functionalities

Now you need to set up the grid with the necessary columns, data, and configuration. To do this, you need to make use of the sample data and columns from the RxJS store. You can also populate data by making an API call.

In the _App.js_ file, you need to import useState to handle the data, column, and configuration. Then proceed to import Bryntum Grid for React. To set up the grid, pass the parameters to the BryntumGrid element, which are the data, columns, and features used by the Bryntum component:


import React, { useState } from 'react';
import { BryntumGrid } from '@bryntum/grid-react';

function App() {
    const [columns, setColumns] = useState(
        [
        { text : 'Country Name', field : 'countryName', flex : 2 },
        { text : 'Code', field : 'code', flex: 1},
        { text : 'Capital', field : 'capital', flex : 1 },
        { text : 'Continent', field : 'continent', flex : 1 },
        { text : 'Currency', field : 'currency', flex : 1 },
        { text : 'Languages', field : 'languages', flex : 1 }
    ]    );

    const [data, setData] = useState(
 [       
    {
    id        : 1,
    countryName     : 'Brasil',
    code : 'BR',
    capital  : 'Brasília',
    continent   : 'South America',
    currency    : 'BRL',
    languages   : 'Portuguese'
    },
    {
        id      : 2,
        countryName     : 'Bahamas',
        code : 'BS',
        capital  : 'Nassau',
        continent   : 'North America',
        currency    : 'BSD',
        languages   : 'English'
        },
        {
            id      : 3,
            countryName     : 'Botswana',
            code : 'BW',
            capital  : 'Gaborone',
            continent   : 'Africa',
            currency    : 'BWP',
            languages   : 'English, Tswana'
            },
            {
                id      : 4,
                countryName     : 'Colombia',
                code : 'CO',
                capital  : 'Bogotá',
                continent   : 'South America',
                currency    : 'COP',
                languages   : 'Spanish'
                },
                {
                    id      : 5,
                    countryName     : 'Costa Rica',
                    code : 'CRC',
                    capital  : 'Brasília',
                    continent   : 'North America',
                    currency    : 'CR',
                    languages   : 'Spanish'
                    },
                    {
                        id      : 6,
                        countryName     : 'Ecuador',
                        code : 'EC',
                        capital  : 'Quito',
                        continent   : 'South America',
                        currency    : 'USD',
                        languages   : 'Spanish'
                        }]  );
    const [features, setFeatures] = useState({
        cellEdit    : true,
        regionResize : false,
        stripe: true
    });
    return (
            <BryntumGrid data={data}  columns={columns} features={features} />
    );

}

export default App;

Make sure you import the CSS file that handles the styling of Bryntum Grid in the _App.scss_ file, or your grid will be unstyled:


// import bryntum css theme
@import '~@bryntum/grid/grid.stockholm.css';

Currently, there's a renderer setup feature available for Bryntum Grid columns, which is a function that takes parameters as input and output HTML. For the preparation of aesthetically pleasing cell contents, any type of conditional logic can be applied.

You can format the grid by adding more configs in the feature object, and there are many configurations available.

RxJS for Managing App State

RxJS is a package that allows the creation of asynchronous and event-based applications with the help of observable sequences. In a nutshell, the RxJS package enables you to manage and modify data over time. You can read more about RxJS in the official documentation.

The fundamental features of RxJS are as follows:

Observable: An observable is a data source that contains data that can be shared between various components of your application. The source can operate synchronously or asynchronously, and it can provide numerous values over time.
Observer: An observer is an object that consumes the information an observable emits. Until the observable is finished or the observer unsubscribes from the observable, the observer continues to receive data from the observable.
Subscription: This has to do with an observer requesting information from an observable. An observer will only receive data that they subscribe to.
Subjects: An RxJS subject can function simultaneously as an observer and an observable. Values can be broadcast to numerous observers, allowing every observer who has subscribed to a subject to get any data that is received.

Install RxJS and Create a Store

To install RxJS and create a store, run the following command in your terminal:

npm install rxjs

The best way to interact between components when using RxJS with React Hooks is to utilize an Observable and a Subject.

To contain your store, you need to build a data store directory and _src/store_ in your src folder.

Navigate to _src/store_ and create a _DataStore.js_ file that will be used for your grid functions. Then you need to import the Subject class and create a variable from it in _DataStore.js_:

import { Subject } from 'rxjs';

const subject = new Subject();

Now you need to obtain data from the store. The data can be empty, but when an API call is made, it needs to have data in it. In this tutorial, you'll make use of dummy data. In the data-store.js, after the Subject, add the following:

let   data = [      
    {
    id        : 1,
    countryName     : 'Brasil',
    code : 'BR',
    capital  : 'Brasília',
    continent   : 'South America',
    currency    : 'BRL',
    languages   : 'Portuguese'
    },
    {
        id      : 2,
        countryName     : 'Bahamas',
        code : 'BS',
        capital  : 'Nassau',
        continent   : 'North America',
        currency    : 'BSD',
        languages   : 'English'
        },
        {
            id      : 3,
            countryName     : 'Botswana',
            code : 'BW',
            capital  : 'Gaborone',
            continent   : 'Africa',
            currency    : 'BWP',
            languages   : 'English, Tswana'
            },
            {
                id      : 4,
                countryName     : 'Colombia',
                code : 'CO',
                capital  : 'Bogotá',
                continent   : 'South America',
                currency    : 'COP',
                languages   : 'Spanish'
                },
                {
                    id      : 5,
                    countryName     : 'Costa Rica',
                    code : 'CRC',
                    capital  : 'Brasília',
                    continent   : 'North America',
                    currency    : 'CR',
                    languages   : 'Spanish'
                    },
                    {
                        id      : 6,
                        countryName     : 'Ecuador',
                        code : 'EC',
                        capital  : 'Quito',
                        continent   : 'South America',
                        currency    : 'USD',
                        languages   : 'Spanish'
                        }]

Next, create a method for sending and receiving data from the store:

export const DataStore = {
    sendData: (data) => { subject.next([...data] ); },
    onData: () => subject.asObservable(),
    data,
};

The sendData() method is used when you want to update the data. A data argument will be provided to the sendData() method, which will be appended to the data set.

Then the onData() method returns an Observable that you Subscribe to receive recent data. Also, you export the data so that it can be used as initial data. You need to export the store so it can be imported and used elsewhere.

Use Data in Component

In the _App.js_ file, you need to import the DataStore and obtain data from the store to use in the useState hook. To do this, you simply update the initial state of _const [data, setData]_:

import React, { useState } from 'react';
import { DataStore } from './store/DataStore';

function App() { 
const [data, setData] = useState(DataStore.data);

}

Then you need to create a useEffect hook and subscribe to the onData method to listen for any changes. Import useEffect so that you can use it:

import React  from 'react';

function App() { 


React.useEffect(() => {
        const subscription = dataStore.onData().subscribe(data => {
            setData(data);
        });
        return () => subscription.unsubscribe();  
} , []);

}

Finally, you need to unsubscribe from the Observable when the component unmounts to prevent memory leaks in the application.

Add Data to the Grid

The next thing you need to create is a form that allows you to add additional country data to the grid. Because you subscribed to it in useEffect, you're notified when a form submission is made, and the grid is updated in real time.

You can proceed to update the code in the _App.js_ file in order to add an informational form for creating a new grid item. Make a button to turn the form on and off. After that, the form is created and styled. Then you need to handle the toggle and form states as seen here:

const [toggleForm, setToggleForm] = useState(false);
const [formData, setFormData] = useState({
         id: "",
        countryName: "",
        code: "",
        capital: "",
        continent: "",
        currency: "",
        languages: ""

});

 const triggerToggle = () => {
     setToggleForm(!toggleForm);
 }


return (
        <>
            <div className='content-container'>
                <div className='new-content'>
                    <button 
                    className='btn-primary' 
                    onClick={triggerToggle}>Add new
                    </button> 
                </div>

{ toggleForm && <div>
                    <form className='form-container'>
                        <input 
                            type="text" 
                            placeholder="Country Name" 
                            name='countryName'  
                            id='countryName'
                            className='form-input' 
                            onChange={(e) => 
setFormData({...formData, countryName: e.target.value})} 
                                value={formData.countryName}
                        />
                        <input 
                            type="text" 
                            placeholder="Code" 
                            name='code' 
                            id='code' 
                            className='form-input'
                            onChange={(e) => 
                                setFormData({...formData, 
                                code: e.target.value})
                            } 
                            value={formData.code}
                        />
<input 
                            type="text" 
                            placeholder="Capital" 
                            name='capital'
                            id='capital'
                            className='form-input'
                            onChange={(e) =>
                                setFormData({...formData,
                                capital: e.target.value})
                            }
                            value={formData.capital}
                        /> <br />
                        <input 
                            type="text" 
                            placeholder="Continent" 
                            name='continent'
                            id='continent'
                            className='form-input'
                            onChange={(e) =>
                                setFormData({...formData,
                                continent: e.target.value})
                            }
                            value={formData.continent}
                        />
                        <input 
                            type="text" 
                            placeholder="Currency" 
                            name='currency'
                            id='currency'
                            className='form-input'
                            onChange={(e) =>
                                setFormData({...formData,
                                currency: e.target.value})
                            }
                            value={formData.currency}
                        />
                        <input 
                            type="text" 
                            placeholder="Languages" 
                            name='languages'
                            id='languages'
                            className='form-input'
                            onChange={(e) =>
                                setFormData({...formData,
                                languages: e.target.value})
                            }
                            value={formData.languages}
                        />
                        <div>
                            <button className='btn-primary' >Submit</button>
                        </div>
                        <br />
                    </form>
                        </div>}
                <BryntumGrid data={data}  columns={columns}   features={features} />
            </div>
        </>
    );

Now add the styles in the _App.scss_ file:


.content-container {
    width: 100%;
}

.btn-primary {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    cursor: pointer;
}

.new-content {
    display: flex;
    justify-content: right;
    margin: 10px;
}

.form-container {
    text-align: center;
}

.form-input {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    margin: 5px;
}

In the previous code, the toggleForm is used to show and hide the form when you select the Add new button. The formData holds details of the form, which are set onChange of the form input. Your current form should look like this:

Upon submission of the form, the data is sent to the RxJS store, and the form is reset. Then since you are subscribing to the store, _data_ will be updated, resulting in a rerender of the grid with the new data added to the table.

Add the submit function in the App.js file:

const handleSubmit = (e) => {
        e.preventDefault();
        // to increment the id of the new record
        formData.id = data.length + 1;

        // to add the new record to the data array
        dataStore.sendData([...data, formData]);

        // to reset the form
        setFormData({
            id: '',
            countryName: '',
            code: '',
            capital: '',
            continent: '',
            currency: '',
            languages: ''
        });
        // to close the form
        setToggleForm(!toggleForm);

    }

Then update it:


<button className='btn-primary' onClick={handleSubmit}>Submit</button>

Now the list is updated upon submitting:

Grid Features

The Bryntum Grid component uses features, which are prefixed with Feature as both configuration settings and property values, and are associated with the instance's relevant API features.

Many features of the grid are set to _true_ by default, but you can toggle the features to suit your needs. For instance, in the _App.js_ file, update the _feature_ variable like this:

const [features, setFeatures] = useState({
     cellEdit     : true,
     regionResize : false,
     stripe: true,
     filter: true,
     rowReorder: true,
     columnReorder: true,
    });

When the _filter_ is set to true, you can filter the data per column like this:

Setting _rowReorder_ to true also allows for row rearrangement. In the following image, the last row is moved to the third row:

Similarly, enabling _columnReorder_ makes it possible to move columns around by dragging the headings:

As you can see, the last column is now the second column.

There are many features available in Bryntum Grid that you can use to listen to events based on the triggering of any feature. A full list of features is available in the Bryntum Grid docs.

Conclusion

In this article, you learned how to use Bryntum Grid with its configurations in a React application. You also learned how to manage the application state with RxJS. In addition, you learned how to get data from the RxJS store to prefill the grid and, later, add more data to the grid from the store.

Are you already using Bryntum Grid? We'd love to hear your feedback on how it's changed your workflow.

How to connect and sync Bryntum Scheduler to Microsoft Teams

Bryntum — Tue, 20 Jun 2023 08:36:34 +0000

Bryntum Scheduler is a modern, high-performance scheduling UI component built with pure Javascript. It can easily be used with React, Vue, or Angular. In this tutorial, we'll connect and sync Bryntum Scheduler to Microsoft Teams. We'll do the following:

Create a JavaScript app that a user can log into using their Microsoft 365 Developer Program account.
Use Microsoft Graph to get the user's Microsoft Teams shifts.
Display the Microsoft Teams shifts in Bryntum Scheduler.
Sync event changes in Bryntum Scheduler with the user's Microsoft Teams.

Getting started

Clone the starter GitHub repository. The starter repository uses Vite, which is a development server and JavaScript bundler. You'll need Node.js version 14.18+ for Vite to work.

Now install the Vite dev dependency by running the following command:

npm install

Run the local dev server using npm run dev and you’ll see a blank page. The dev server is configured to run on http://localhost:8080/ in the vite.config.js file. This will be needed for Microsoft 365 authentication later.

Let’s create our Bryntum Scheduler now.

Creating a scheduler using Bryntum

We'll install the Bryntum Scheduler component using npm. Follow step one of the Bryntum Scheduler setup guide to log into the Bryntum registry component.

Then initialize your application using the npm CLI npm init command:

npm init

You will be asked a series of questions in the terminal; accept all the defaults by clicking Enter for each question.

Now follow step four of the Bryntum Scheduler setup guide to install Bryntum Scheduler.

Let’s import the Bryntum Scheduler component and give it some basic configuration. In the main.js file add the following lines:

import { Scheduler } from "@bryntum/scheduler/scheduler.module.js";
import "@bryntum/scheduler/scheduler.stockholm.css";

// get the current date
var today = new Date();

// get the day of the week
var day = today.getDay();

// get the date of the previous Sunday
var previousSunday = new Date(today);
previousSunday.setDate(today.getDate() - day);

// get the date of the following Saturday
var nextSaturday = new Date(today);
nextSaturday.setDate(today.getDate() + (6 - day));

const scheduler = new Scheduler({
    appendTo : "scheduler",

    startDate : previousSunday,
    endDate   : nextSaturday,
    viewPreset : 'dayAndWeek',

    resources : [
        { id : 1, name : 'Dan Stevenson' },
        { id : 2, name : 'Talisha Babin' }
    ],

    events : [
        { resourceId : 1, startDate : previousSunday, endDate : nextSaturday },
        { resourceId : 2, startDate : previousSunday, endDate : nextSaturday }
    ],

    columns : [
        { text : 'Name', field : 'name', width : 160 }
    ]
});

We imported Bryntum Scheduler and the CSS for the Stockholm theme, which is one of five available themes. You can also create custom themes. You can read more about styling the scheduler here. We created a new Bryntum Scheduler instance and passed a configuration object into it. We added the scheduler to the DOM as a child of the <div> element with an id of "scheduler".

The scheduler can be set up to display specific dates on opening; here we set the startDate to the previous Sunday and endDate to the following Saturday in order to reflect the dates in the Microsoft Teams UI.

We passed in data inline to populate the scheduler resources and events stores for simplicity. You can learn more about working with data in the Bryntum docs. We have a resource for two individuals. Within the scheduler, there's an example "shift" event for each individual that runs for a week. If you run your dev server now, you'll see the events in Bryntum Scheduler:

Now let's learn how to retrieve a list of team shifts from a user’s Microsoft Teams using Microsoft Graph.

Gaining access to Microsoft Graph

We're going to register a Microsoft 365 application by creating an application registration in Azure Active Directory (Azure AD), which is an authentication service. We'll do this so that a user can sign into our app using their Microsoft 365 account. This will allow our app access to the data the user gives the app permission to access. A user will sign in using OAuth, which will send an access token to our app that will be stored in session storage. We'll then use the token to make authorized requests for Microsoft Teams data using Microsoft Graph. Microsoft Graph is a single endpoint REST API that enables you to access data from Microsoft 365 applications.

To use Microsoft Graph you'll need a Microsoft account and you'll need to join the Microsoft 365 Developer Program with that Microsoft account. When joining the Microsoft 365 Developer Program, you'll be asked what areas of Microsoft 365 development you’re interested in; select the Microsoft Graph option. Choose the closest data center region, create your admin username and password, then click "Continue". Next, select “Instant Sandbox” and click “Next”.

Now that you have successfully joined the Developer Program, you can get your admin email address in the dashboard window. We'll use it to create an application with Microsoft Azure.

Creating an Azure AD app to connect to Microsoft 365

Let's register a Microsoft 365 application by creating an application registration in the Azure Active Directory admin portal. Sign in using the admin email address from your Microsoft 365 Developer Program account. Now follow these steps to create an Azure Active Directory application:

In the menu, select "Azure Active Directory".
Select "App registrations".
Click "New registration" to create a new app registration.
Give your app a name, select the "Single tenant" option, select "Single page application" for the redirect URI, and enter http://localhost:8080 for the redirect URL. Then click the "Register" button.
After registering your application, take note of the Application (client) ID and the Directory (tenant) ID; you'll need these to set up authentication for your web app later.

Now we can create a JavaScript web app that can get user data using the Microsoft Graph API. The next step is to set up authentication within our web app.

Setting up Microsoft 365 authentication in the JavaScript app

To get data using the Microsoft Graph REST API, our app needs to prove that we're the owners of the app that we just created in Azure AD. Your application will get an access token from Azure AD and include it in each request to Microsoft Graph. After this is set up, users will be able to sign into your app using their Microsoft 365 account. This means that you won’t have to implement authentication in your app or maintain users' credentials.

First we'll create the variables and functions we need for authentication and retrieving team shifts from Microsoft Teams. Then we'll add the Microsoft Authentication Library and Microsoft Graph SDK, which we'll need for authentication and using Microsoft Graph.

Create a file called auth.js in your project’s root directory and add the following code:

const msalConfig = {
  auth: {
    clientId: "<your-client-ID-here>",
    // comment out if you use a multi-tenant AAD app
    authority: "https://login.microsoftonline.com/<your-directory-ID-here>",
    redirectUri: "http://localhost:8080",
  },
};

In the msalConfig variable, replace the value for clientID with the client ID that came with your Azure AD application and replace the authority value with your directory ID.

The following code will check permissions, create a Microsoft Authentication Library client, log a user in, and get the authentication token. Add it to the bottom of the file.

const msalRequest = { scopes: [] };
function ensureScope(scope) {
  if (
    !msalRequest.scopes.some((s) => s.toLowerCase() === scope.toLowerCase())
  ) {
    msalRequest.scopes.push(scope);
  }
}

// Initialize MSAL client
const msalClient = new msal.PublicClientApplication(msalConfig);

// Log the user in
async function signIn() {
  const authResult = await msalClient.loginPopup(msalRequest);
  sessionStorage.setItem("msalAccount", authResult.account.username);
}

async function getToken() {
  let account = sessionStorage.getItem("msalAccount");
  if (!account) {
    throw new Error(
      "User info cleared from session. Please sign out and sign in again."
    );
  }
  try {
    // First, attempt to get the token silently
    const silentRequest = {
      scopes: msalRequest.scopes,
      account: msalClient.getAccountByUsername(account),
    };

    const silentResult = await msalClient.acquireTokenSilent(silentRequest);
    return silentResult.accessToken;
  } catch (silentError) {
    // If silent requests fails with InteractionRequiredAuthError,
    // attempt to get the token interactively
    if (silentError instanceof msal.InteractionRequiredAuthError) {
      const interactiveResult = await msalClient.acquireTokenPopup(msalRequest);
      return interactiveResult.accessToken;
    } else {
      throw silentError;
    }
  }
}

The msalRequest variable stores the current Microsoft Authentication Library request. It initially contains an empty array of scopes. The list of permissions granted to your app is part of the access token. These are the scopes of the OAuth standard. When your app requests an access token from the Azure Active Directory, it needs to include a list of scopes. Each operation in Microsoft Graph has its own list of scopes. The list of the permissions required for each operation is available in the Microsoft Graph permissions reference.

Using Microsoft Graph to access a user's Teams shifts

Create a file called graph.js in the project’s root directory and add the following code:

const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

// Create an authentication provider
const authProvider = {
    getAccessToken: async () => {
        // Call getToken in auth.js
        return await getToken();
    }
};

// Initialize the Graph client
const graphClient = MicrosoftGraph.Client.initWithMiddleware({ authProvider });

async function getMembers() {
    ensureScope("TeamMember.Read.All");
    return await graphClient
    .api('/teams/<your-team-ID-here>/members')
    .get();
}

async function getAllShifts() {
    ensureScope("Schedule.Read.All");
    return await graphClient
    .api('/teams/<your-team-ID-here>/schedule/shifts')
    .header("Prefer", `outlook.timezone="${userTimeZone}"`)
    .get();
}

We get the access token using the getToken method in the auth.js file. We then use the Microsoft Graph SDK (which we'll add later) to create a Microsoft Graph client that will handle Microsoft Graph API requests.

The getMembers function retrieves the team members from the team specified by a team ID. Find your team ID by navigating to your Microsoft Teams and copying the link from your team.

The team ID can be found in the link after groupid= and the first &.

The getAllShifts function receives all the shifts within the team specified by the same ID. Make sure to replace <your-team-ID-here> in the code above with your team ID.

We use the ensureScope function to specify the permissions needed to access the team shifts data. We then call the "/teams/" endpoint using the graphClient API method to get the data from Microsoft Graph. The header method allows us to set our preferred time zone. Teams shifts dates are stored using UTC. We need to set the time zone for the returned Teams shifts start and end dates. This is done so that the correct event times are displayed in our Bryntum Scheduler. The value for the userTimeZone is defined in the first line of the code above.

Now let's add the user's Teams shifts to our Bryntum Scheduler.

Adding Microsoft Teams shifts to Bryntum Scheduler

Let's add the Microsoft 365 sign-in link and import the Microsoft Authentication Library and Microsoft Graph SDK. In the index.html file, replace the child elements of the <body> HTML element with the following elements:

  <main id="main-container" role="main" class="container">
    <div id="content" style="display: none">
      <div id="scheduler"></div>
    </div>
    <a id="signin" href="#">
      <img
        src="./images/ms-symbollockup_signin_light.png"
        alt="Sign in with Microsoft"
      />
    </a>
  </main>
  <script src="https://alcdn.msauth.net/browser/2.1.0/js/msal-browser.min.js"
    integrity="sha384-EmYPwkfj+VVmL1brMS1h6jUztl4QMS8Qq8xlZNgIT/luzg7MAzDVrRa2JxbNmk/e"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@microsoft/microsoft-graph-client/lib/graph-js-sdk.js"></script>
  <script src="auth.js"></script>
  <script src="graph.js"></script>
  <script type = "module" src = "main.js"></script>

Initially, our app will display the sign-in link only. When a user signs in, Bryntum Scheduler will be displayed.

In the main.js file, add the following line to store the "Sign in with Microsoft" link element object in a variable:

const signInButton = document.getElementById("signin");

Now add the following function at the bottom of the file:

async function displayUI() {
    await signIn();

    // Hide login button and initial UI
    var signInButton = document.getElementById("signin");
    signInButton.style = "display: none";
    var content = document.getElementById("content");
    content.style = "display: block";

    var events = await getAllShifts();
    var members = await getMembers();
    members.value.forEach((member) => {
        var user = {id: member.userId, name: member.displayName, hasEvent : "Unassigned"};
        // append user to resources list
        scheduler.resourceStore.add(user);
    });
    events.value.forEach((event) => {
        var shift = {resourceId: event.userId, name: event.sharedShift.displayName, startDate: event.sharedShift.startDateTime, endDate: event.sharedShift.endDateTime, eventColor: event.sharedShift.theme, shiftId: event.id, iconCls: ""};

        scheduler.resourceStore.forEach((resource) => {
            if (resource.id == event.userId) {
                resource.hasEvent = "Assigned";
                resource.shiftId = event.id;
            }
        });

        // append shift to events list
        scheduler.eventStore.add(shift);
    });
  }

signInButton.addEventListener("click", displayUI);
export { displayUI };

The displayUI function calls the signIn function in auth.js to sign the user in. Once the user is signed in, the sign-in link is hidden and Bryntum Scheduler is displayed. We use the getAllShifts function in the graph.js file to get the team shifts. We then use the retrieved Teams shifts to create events for Bryntum Scheduler and add them to the scheduler.eventStore store.

Each Teams shift has a unique id and when creating the shifts in Bryntum Scheduler we add this id in order to identify the corresponding shifts later on.

Similarly we use the getMembers function to get the team members and populate the scheduler.resourceStore with the team members.

We no longer need the inline data we created in the initial setup of our Scheduler, so remove these lines of code from the scheduler we defined in main.js.

    resources : [
        { id : 1, name : 'Dan Stevenson' },
        { id : 2, name : 'Talisha Babin' }
    ],

    events : [
        { resourceId : 1, startDate : previousSunday, endDate : nextSaturday },
        { resourceId : 2, startDate : previousSunday, endDate : nextSaturday }
    ],

Now sign into Microsoft Teams using the admin email address from your Microsoft 365 Developer Program account and create some events for the following week, then click the "Share with team" button to share your shifts:

Run your dev server using npm run dev and you'll see the sign-in link:

You'll now see your Teams Shifts in your Bryntum Scheduler:

Next, we'll sync Teams with the scheduler by implementing CRUD functionality in our Bryntum Scheduler. Updates to Bryntum Scheduler will update the shifts in Microsoft Teams.

Implementing CRUD

Now that we have connected our scheduler to the Graph API, we'll implement the rest of the CRUD functionality by taking advantage of Microsoft Graph's post, patch, and delete methods, passing a query string where relevant.

Each of these functions requires your team ID so make sure to replace <your-team-ID-here> with the team ID you retrieved earlier.

Create events

In the graph.js file, add the following lines:

async function createShift(name, start, end, userId, color) {
    ensureScope("Schedule.ReadWrite.All");
    return await graphClient
    .api('/teams/<your-team-ID-here>/schedule/shifts')
    .post({
        "userId": userId,
        "sharedShift": {
            "displayName": name,
            "startDateTime": start,
            "endDateTime": end,
            "theme": color
        }
    });
}

Here we create a function that will create a Teams shift with a user ID, name, start date, and end date collected from Bryntum Scheduler. The function is passed the appropriate scope and the new shift data is defined.

Update events

In the graph.js file, add the following function:

async function updateShift(id, userId, name, start, end, color) {
    ensureScope("Schedule.ReadWrite.All");
    return await graphClient
    .api(`/teams/<your-team-ID-here>/schedule/shifts/${id}`)
    .put({
        "userId": userId,
        "sharedShift": {
            "displayName": name,
            "startDateTime": start,
            "endDateTime": end,
            "theme": color
        }
    });
}

The updateShift function will identify the appropriate Teams shift by id, and then it will use the new user ID, name, start date, and end date from Bryntum Scheduler to update the event. The function is passed the appropriate scope, and the new shift data is defined.

Delete events

In the graph.js file, add the following function:

async function deleteShift(id) {
    ensureScope("Schedule.ReadWrite.All");
    return await graphClient
    .api(`/teams/<your-team-ID-here>/schedule/shifts/${id}`)
    .delete();
}

The deleteShift function will identify the appropriate Teams shift by id, and delete the event.

Listening for event data changes in Bryntum Scheduler

Next, we'll set the listeners for our Bryntum Scheduler so that it will know when the user updates the scheduler events.

Replace the definition of scheduler with the following code:

const scheduler = new Scheduler({
    appendTo : "scheduler",

    startDate : previousSunday,
    endDate   : nextSaturday,
    viewPreset : 'dayAndWeek',

    listeners : {
        dataChange: function (event) {
            updateMicrosoft(event);
          }},

    columns : [
        { text : 'Name', field : 'name', width : 160 }
    ]
});

Here we set a listener on our Bryntum Scheduler to listen for any changes to the scheduler's data store. This will fire an event called "update" whenever a scheduler event is created or updated, and an event called "remove" whenever an event is deleted.

The event that's retrieved from the dataChange listener will also carry event data about the specific scheduler event that has been altered. We'll use the event data to identify which event is being altered and what's being changed.

Next we'll create a function called updateMicrosoft that will update Teams when the appropriate "update" or "delete" event is fired.

Add the following code below the definition of scheduler in the main.js file:

async function updateMicrosoft(event) {
    if (event.action == "update") {
        if ("name" in event.changes || "startDate" in event.changes || "endDate" in event.changes || "resourceId" in event.changes || "eventColor" in event.changes) {
            if ("resourceId" in event.changes){
                if (!("oldValue" in event.changes.resourceId)){
                    return;
                }
            } 
            if (Object.keys(event.record.data).indexOf("shiftId") == -1 && Object.keys(event.changes).indexOf("name") !== -1){
                var newShift = createShift(event.record.name, event.record.startDate, event.record.endDate, event.record.resourceId, event.record.eventColor);
                newShift.then(value => {
                    event.record.data["shiftId"] = value.id;
                  });
                scheduler.resourceStore.forEach((resource) => {
                    if (resource.id == event.record.resourceId) {
                        resource.hasEvent = "Assigned";
                    }
            });
            } else {
                if (Object.keys(event.changes).indexOf("resource") !== -1){
                    return;
                }
                updateShift(event.record.shiftId, event.record.resourceId, event.record.name, event.record.startDate, event.record.endDate, event.record.eventColor);
            }
        }
    } else if (event.action == "remove" && "name" in event.records[0].data){
        deleteShift(event.records[0].data.shiftId);
    }
}

Here we create a function that is called on all changes to the data store of Bryntum Scheduler. The function then calls one of the Microsoft Graph CRUD functions that we defined.

On "update" we check whether the update change is valid for our changes to Teams. If the update concerns the name, startDate, endDate, resourceId, or eventColor, we exclude it when an event is generated in the scheduler, as this event will not have all the data necessary for the creation of a Teams shift.

async function updateMicrosoft(event) {
    if (event.action == "update") {
        if ("name" in event.changes || "startDate" in event.changes || "endDate" in event.changes || "resourceId" in event.changes || "eventColor" in event.changes) {
            if ("resourceId" in event.changes){
                if (!("oldValue" in event.changes.resourceId)){
                    return;
                }

We then check if the event being updated has a shiftId; if not, it is because this is a new event and a corresponding shift needs to be created. We create the shift with createShift and assign the shifts id to the corresponding Bryntum event.

            if (Object.keys(event.record.data).indexOf("shiftId") == -1 && Object.keys(event.changes).indexOf("name") !== -1){
                var newShift = createShift(event.record.name, event.record.startDate, event.record.endDate, event.record.resourceId, event.record.eventColor);
                newShift.then(value => {
                    event.record.data["shiftId"] = value.id;
                  });
                scheduler.resourceStore.forEach((resource) => {
                    if (resource.id == event.record.resourceId) {
                        resource.hasEvent = "Assigned";
                    }
            });
            }

If the event has a shiftId already, this means there is already a corresponding shift in Teams and this shift needs to be updated.

            else {
                if (Object.keys(event.changes).indexOf("resource") !== -1){
                    return;
                }
                updateShift(event.record.shiftId, event.record.resourceId, event.record.name, event.record.startDate, event.record.endDate, event.record.eventColor);
            }

Finally, if the dataChange event is a "remove" event, then we delete the matching Teams event using the deleteShift function.

    else if (event.action == "remove" && "name" in event.records[0].data){
        deleteShift(event.records[0].data.shiftId);
    }

Now try to create, update, delete, and edit an event in Bryntum Scheduler. You'll see the changes reflected in Teams.

Add styling

If you would like your Bryntum Scheduler UI to look a lot more like the Teams Shifts UI, then replace the scheduler with the following code:

const scheduler = new Scheduler({
    appendTo : "scheduler",

    resourceImagePath : 'images/users/',
    eventStyle: 'colored',
    showEventCount : true,
    resourceMargin: 0,

    startDate : previousSunday,
    endDate   : nextSaturday,
    viewPreset : 'dayAndWeek',

    listeners : {
        dataChange: function (event) {
            updateMicrosoft(event);
          }},

    columns : [
        { type : 'resourceInfo', text : 'Name', field : 'name', width : 160 }
    ],

    features : {
        group : 'hasEvent',
        eventEdit : {
            items : {
                // Key to use as fields ref (for easier retrieval later)
                color : {
                    type  : 'combo',
                    label : 'Color',
                    items : ['gray', 'blue', 'purple', 'green', 'pink', 'yellow'],
                    // name will be used to link to a field in the event record when loading and saving in the editor
                    name  : 'eventColor'
                },
                icon : {
                    type  : 'combo',
                    label : 'Icon',

                    items: [
                        { text: 'None', value: '' },
                        { text: 'Door', value: 'b-fa b-fa-door-open' },
                        { text: 'Car', value: 'b-fa b-fa-car' },
                        { text: 'Coffee', value: 'b-fa b-fa-coffee' },
                        { text: 'Envelope', value: 'b-fa b-fa-envelope' },
                    ],

                    name  : 'iconCls' 
                }
            }
        },
    },

    // Custom event renderer, simple version
    eventRenderer({
            eventRecord
        }) {
            if (eventRecord.name == "Open") {
                eventRecord.iconCls = "b-fa b-fa-door-open";
                return `${eventRecord.name}`;
            } else if (eventRecord.name == "Vacation"){
                eventRecord.iconCls = "b-fa b-fa-sun";
                return `${eventRecord.name}`;
            } else if (eventRecord.name == "Second shift"){
                eventRecord.iconCls = "b-fa b-fa-moon";
                return `${eventRecord.name}`;
            } else {
                return `${eventRecord.name}`;
            }
        }
});

Here we do a few things to the styling of our scheduler.

    resourceImagePath : 'images/users/',
    eventStyle: 'colored',
    showEventCount : true,
    resourceMargin: 0,

These four lines add user profile pictures, which you can add to a folder called users in the images folder. These profile pictures should have the following file name structure to relate to the members within the team: first-name last-name.jpg. If a profile picture cannot be found for a user, their initial will be used instead.

We also color and size the shifts similarly to Teams with eventStyle and resourceMargin.

The showEventCount will show how many events each member has alongside their name and profile picture.

The following code lets the user pick a color and icon for their shifts in the event editor:

features : {
        group : 'hasEvent',
        eventEdit : {
            items : {
                // Key to use as fields ref (for easier retrieval later)
                color : {
                    type  : 'combo',
                    label : 'Color',
                    items : ['gray', 'blue', 'purple', 'green', 'pink', 'yellow'],
                    // name will be used to link to a field in the event record when loading and saving in the editor
                    name  : 'eventColor'
                },
                icon : {
                    type  : 'combo',
                    label : 'Icon',

                    items: [
                        { text: 'None', value: '' },
                        { text: 'Door', value: 'b-fa b-fa-door-open' },
                        { text: 'Car', value: 'b-fa b-fa-car' },
                        { text: 'Coffee', value: 'b-fa b-fa-coffee' },
                        { text: 'Envelope', value: 'b-fa b-fa-envelope' },
                    ],

                    name  : 'iconCls' 
                }
            }
        },
    },

The group feature also lets us organize our team members into those who have and have not been assigned shifts.

Finally, the eventRenderer will assign a common icon to shifts that share any of the names listed, allowing similar events to be styled in the same way.

    // Custom event renderer, simple version
    eventRenderer({
            eventRecord
        }) {
            if (eventRecord.name == "Open") {
                eventRecord.iconCls = "b-fa b-fa-door-open";
                return `${eventRecord.name}`;
            } else if (eventRecord.name == "Vacation"){
                eventRecord.iconCls = "b-fa b-fa-sun";
                return `${eventRecord.name}`;
            } else if (eventRecord.name == "Second shift"){
                eventRecord.iconCls = "b-fa b-fa-moon";
                return `${eventRecord.name}`;
            } else {
                return `${eventRecord.name}`;
            }
        }

The result is an eye-catching and intuitive UI that follows the user experience of Teams.

Next steps

This tutorial gives you a starting point for creating Bryntum Scheduler using vanilla JavaScript and syncing it with Microsoft Teams. There are many ways that you can improve Bryntum Scheduler. For example, you can add features such as resource grouping. Take a look at our demos page to see demos of the available features.

Creating a Gantt chart with React using Next.js

Bryntum — Wed, 21 Sep 2022 09:19:35 +0000

A Gantt chart is a project management tool for coordinating complex schedules for large or multiple teams. Using a Gantt chart that is JavaScript-based has a couple of advantages over spreadsheet-based Gantt charts, such as:

Easy integration into existing project management dashboards.
Sharing your chart online.
Customizing your chart to suit your needs.

In a previous article, we described how to make a basic drag-and-drop Gantt chart component using vanilla JavaScript. In this article, we'll make the same basic Gantt chart with React using Next.js.

We'll also create a basic Gantt chart using our commercial Bryntum Gantt Chart and look at the differences between building your own chart versus using an off-the-shelf solution.

The basic React Gantt chart that we'll create using Next.js will have the following features:

The user can select the planning time period by selecting a start date and an end date.
We’ll be able to add, delete, and edit tasks.
Task durations can be added and deleted, and we’ll be able to edit them using drag and drop.

Once you’re done, you’ll have a Gantt chart that looks like the one shown below.

You can find the code for the completed Next.js Gantt Chart in our GitHub repository.

Getting started

We'll start this project by cloning the following Next.js Gantt chart starter GitHub repository.

The .vscode folder includes some VS Code settings and extension recommendations, as well as settings for ESLint and Prettier. ESLint and Prettier have been added and configured to format your code on paste and on save. If you don't use VS Code as an IDE, you'll need to configure these for your IDE. Once you've done that, you can delete this file.

The starter repository contains all the components you'll need to create the Gantt chart. You'll need to create some state and complete the code for the components. The code used is similar to our previous article that explains how to make a vanilla JavaScript Gantt Chart.

If you install dependencies npm install and run the local development server using npm run dev, you'll see a page with the header "Gantt Tracker".

Let's take a look at how the Gantt chart starter code is structured.

Adding styling with CSS

The CSS we'll use for the Gantt chart is included in the starter code. We've used Styled JSX, which comes with Next.js, to write scoped-styled components. There are some global styles in styles/globals.js. These global styles are added to our app in the Layout component in the components folder. The entire app is wrapped in this Layout component in the _app.js file, which is in the pages folder.

The <style jsx> tags in the components contain CSS that is scoped to the component. Styled JSX does this by making the class names unique. In the GanttChart component, there are some CSS variables for color, border radius, and cell height, which we'll use for the Gantt chart.

Utility functions, helpers, constants, and data

The fetchWrapper.js file in the utils folder contains a fetch API wrapper function that we'll use to make HTTP requests to our API endpoint. This wrapper function is from Kent C. Dodd's article Replace Axios with a simple custom fetch wrapper. We'll use this fetch wrapper function to fetch the example Gantt chart data, which is in the data.json file in the public folder.

The dateFunctions.js file in the helpers folder contains helper functions that we'll use for date calculations and formatting. Finally, the constants.js file in the root folder contains a months array that we'll use for creating the columns of the Gantt chart and for populating the select input elements for selecting the date range of our Gantt chart.

Now let's start creating the Gantt chart component.

Adding state

First, we'll add state to the GanttChart component. We'll add state for the tasks, task durations, and the time range that will show on the Gantt chart. We'll use blue horizontal bars across the cells to show task durations.

Import the useState and useEffect hooks in GanttChart.js:

import { useState, useEffect } from 'react';

Add the following state variables and setters to the GanttChart() function:

  const [tasks, setTasks] = useState(null);
  const [taskDurations, setTaskDurations] = useState(null);
  const [timeRange, setTimeRange] = useState({
    fromSelectMonth: 0,
    fromSelectYear: '2022',
    toSelectMonth: 1,
    toSelectYear: '2022',
  });

We'll get the tasks and taskDurations data from the data.json file by making a fetch request using the client fetch wrapper. Import the client function:

import { client } from '../../utils/fetchWrapper';

Add the following useEffect hook to fetch the data:

  useEffect(() => {
    client('data.json').then(
      (data) => {
        setTasks(data?.tasks);
        setTaskDurations(data?.taskDurations);
      },
      (error) => {
        console.error('Error: ', error);
      }
    );
  }, []);

After the data is fetched, the tasks and taskDurations state will be set. You'll be able to see the state in the React Developer Tools "Components" tab.

Creating the Gantt chart component

The Gantt chart component will be composed of seven components, which you'll find in the components/GanttChart folder. In the Home page file index.js, located in the pages folder, we'll import the main file GanttChart.js. There is also an AddButton component that is used in the AddTask and AddTaskDuration components.

Import the seven components in GanttChart.js:

import AddTaskDuration from './AddTaskDuration';
import AddTask from './AddTask';
import Grid from './Grid';
import Settings from './Settings';
import Tasks from './Tasks';
import TimeRange from './TimeRange';
import TimeTable from './TimeTable';

Now add them in the <div> with an id of gantt-container:

  <Grid>
    <Tasks
      tasks={tasks}
      setTasks={setTasks}
      setTaskDurations={setTaskDurations}
    />
    <TimeTable
      timeRange={timeRange}
      tasks={tasks}
      taskDurations={taskDurations}
      setTaskDurations={setTaskDurations}
    />
  </Grid>
  <Settings>
    <AddTask setTasks={setTasks} />
    <AddTaskDuration tasks={tasks} setTaskDurations={setTaskDurations} />
    <TimeRange timeRange={timeRange} setTimeRange={setTimeRange} />
  </Settings>

The Grid and Settings components are wrappers that apply some CSS styles to their children. For each of the components, destructure the passed-in props. For example, in the Tasks component, destructure tasks, setTasks, and setTaskDurations as follows:

export default function Tasks({ tasks, setTasks, setTaskDurations }) {
   // ...
}

As well as in the TimeTable component:

export default function TimeTable({
  timeRange,
  tasks,
  taskDurations,
  setTaskDurations,
}) {
    //..
}

Do the same for the AddTask, AddTaskDuration, and TimeRange components.

If you run your local server now, you should see the following basic skeleton of our app in your browser window:

Creating task rows

The Tasks component currently renders three empty div rows. Below the last <div className="gantt-task-row"></div> line, add the following code to create our task inputs:

  {tasks &&
    tasks.map((tsk, i) => (
      <div key={`${i}-${tsk?.id}-${tsk.name}`} className="gantt-task-row">
        <input data-task-id={tsk?.id} value={tsk?.name} />
        <button type="button" data-task-id={tsk?.id}>
          x
        </button>
      </div>
    ))}

We first check if tasks is not null, because Next.js does server-side rendering. The tasks state is added after the component is mounted.

We create an <input> element for each task with a value equal to the task name. There is a delete button for deleting the element. We'll use the data attributes to update the tasks state when a task is edited or deleted.

Making tasks deletable

Now let’s make the delete buttons work. First, add the following property to the delete button:

onClick={handleDelete}

Now add the following handleDelete function:

  function handleDelete(e) {
    const idNum = parseInt(e.target.getAttribute('data-task-id'));
    const newTasks = tasks.filter((task) => task.id !== idNum);
    // update state (if data on backend - make API request to update data)
    setTasks(newTasks);

    setTaskDurations((prevState) => {
      // delete any taskDurations associated with the task
      const newTaskDurations = prevState.filter(
        (taskDuration) => taskDuration.task !== idNum
      );
      return newTaskDurations;
    });
  }

We pass in a function to setTaskDurations to get the previous value of the state from the function's argument. We get the task id from the data attribute on the button. We then update the tasks state by filtering out the task by id from the tasks state passed in as a prop and then setting the tasks state using setTasks. We also update the tasksDurations state by removing any task durations associated with the deleted task and then updating the state. This causes the Tasks component to re-render, which passes in the new state.

Now if you click on the delete button, the task will be deleted.

Making tasks editable

The task inputs are not editable, let's fix that. Add the following onChange property to the task <input>:

onChange={(e) => onChange(e, i)}

Now add the following onChange function:

  function onChange(e, i) {
    const { value } = e.target;
    const idNum = parseInt(e.target.getAttribute('data-task-id'));

    let newTasks = tasks.filter((task) => task.id !== idNum);
    newTasks.push({ id: idNum, name: value });
    newTasks = newTasks.sort((a, b) => a.id - b.id);
    // update state (if data on backend - make API request to update data)
    setTasks(newTasks);
  }

We get the value of the input, and id for the task. We then create a new tasks state by filtering out the edited task, creating a new task object and then updating the tasks state. We also sort the tasks by id, the order in which they are created. When we add new tasks later in this tutorial, we'll see that the given id is a number: the most recently created tasks have a higher number.

Now try editing the tasks in your development server. You'll notice that the input loses focus after you add or remove a character from it. The tasks state is updated, as you can see in your React development tools. The input loses focus because the Tasks component is re-rendered each time the tasks state updates.

We'll fix this using two refs that will allow us to focus the correct input on each re-render. Add the following ref objects:

  const inputRef = useRef([]);
  const indexRef = useRef(null);

The inputRef will contain an array of our input elements. The indexRef will hold the index of the last input that has been changed. The ref values will persist after each re-render.

Add the following ref property to the task <input>:

ref={(el) => (inputRef.current[i] = el)}

This will set the current value of the inputRef. The array will contain a ref to each input element.

In the onChange function, add the following line:

indexRef.current = i;

This will set the indexRef to the index of the last edited input.

Now we can use these two refs to focus the input that a user is editing. Add the following useEffect hook to the Tasks component:

  useEffect(() => {
    if (inputRef.current.length && indexRef.current >= 0) {
      inputRef?.current[indexRef.current]?.focus();
    }
  });

This useEffect will run on each render. It will set focus on the input that was last edited. Now try editing the tasks in your development server. The input will maintain focus as you are editing the task.

Creating the Gantt chart grid

We'll create the Gant chart grid in the TimeTable component. At the top of the TimeTable.js file, there are some objects, including ganttTimePeriod, that we'll use for dynamic CSS styling. We'll create the grid using similar code to the previous article, which used vanilla JavaScript. We'll create the grid row by row. We'll add the task duration bars to the correct starting cell by checking the task duration's task property and its start date.

There is some starter code for creating the rows. We'll fill the monthRows, dayRows, and weekRows arrays with React elements for the Gantt chart grid and then render them.

Replace the imported modules with the following modules:

import { useState } from 'react';
import { monthDiff, getDaysInMonth, getDayOfWeek } from '../../helpers/dateFunctions';
import { months } from '../../constants';

Above the component's return, add the following for loop:

  for (let i = 0; i < numMonths; i++) {
    // create month rows
    monthRows.push(
      <div key={i} style={{ ...ganttTimePeriod, outline: 'none' }}>
        <span style={ganttTimePeriodSpan}>
          {months[month.getMonth()] + ' ' + month.getFullYear()}
        </span>
      </div>
    );

    // create day and week rows
    const numDays = getDaysInMonth(month.getFullYear(), month.getMonth() + 1);
    const currYear = month.getFullYear();
    const currMonth = month.getMonth() + 1;

    for (let j = 1; j <= numDays; j++) {
      dayRow.push(
        <div key={j} style={{ ...ganttTimePeriod, outline: 'none' }}>
          <span style={ganttTimePeriodSpan}>{j}</span>
        </div>
      );

      weekRow.push(
        <div key={j} style={{ ...ganttTimePeriod, outline: 'none' }}>
          <span style={{ ...ganttTimePeriodSpan, color: '#3E455B' }}>
            {getDayOfWeek(currYear, currMonth - 1, j - 1)}
          </span>
        </div>
      );
    }

    dayRows.push(
      <div key={i} style={{ ...ganttTimePeriod, outline: 'none' }}>
        {dayRow}
      </div>
    );

    weekRows.push(
      <div key={i} style={{ ...ganttTimePeriod, outline: 'none' }}>
        {weekRow}
      </div>
    );

    dayRow = [];
    weekRow = [];
    month.setMonth(month.getMonth() + 1);
  }

This loops through the number of months in the time period range and creates month, week, and day rows. The value for numMonths is two. We will be able to change this value when we complete the TimeRange component’s code later in the tutorial. We use the month variable and the setMonth method to increment the month value on each loop. We use this value and the months array from our constants file to add styled React elements with the correct month name to the monthRows array.

We use a nested loop to create the dayRow and weekRow cells. We make use of JavaScript Date methods, as well as the getDaysInMonth and getDayOfWeek functions from our dateFunctions file.

If you view your app now, you'll see the year and month, day of the month, and day of the week rows. They'll be positioned correctly once we add the date cells for each task.

Now let's create the task row cells and add the task durations. Make sure the following functions are imported from dataFunctions.js:

import {
  monthDiff,
  getDaysInMonth,
  getDayOfWeek,
  createFormattedDateFromStr, 
  createFormattedDateFromDate,
  dayDiff,
} from '../../helpers/dateFunctions';

Add the following for loop below the one that you added:

  // create task rows
  if (tasks) {
    tasks.forEach((task) => {
      let mnth = new Date(startMonth);
      for (let i = 0; i < numMonths; i++) {
        const curYear = mnth.getFullYear();
        const curMonth = mnth.getMonth() + 1;

        const numDays = getDaysInMonth(curYear, curMonth);

        for (let j = 1; j <= numDays; j++) {
          // color weekend cells differently
          const dayOfTheWeek = getDayOfWeek(curYear, curMonth - 1, j - 1);
          // add task and date data attributes
          const formattedDate = createFormattedDateFromStr(
            curYear,
            curMonth,
            j
          );

          taskRow.push(
            <div
              key={`${task.id}-${j}`}
              style={{
                ...ganttTimePeriodCell,
                backgroundColor:
                  dayOfTheWeek === 'S' ? 'var(--color-tertiary)' : '#fff',
              }}
              data-task={task?.id}
              data-date={formattedDate}
            >
              {taskDurations.map((el, i) => {
                if (el?.task === task?.id && el?.start === formattedDate) {
                  return (
                    <div
                      key={`${i}-${el?.id}`}
                      tabIndex="0"
                      style={{
                        ...taskDuration,
                        width: `calc(${dayDiff(el?.start, el?.end)} * 100% - 1px)`,
                      }}
                    ></div>
                  );
                }
              })}
            </div>
          );
        }

        taskRows.push(
          <div key={`${i}-${task?.id}`} style={ganttTimePeriod}>
            {taskRow}
          </div>
        );

        taskRow = [];
        mnth.setMonth(mnth.getMonth() + 1);
      }
    });
  }

We loop through each month as we did in the first for loop that we added. We use the nested for loop to create the cells. The data-attributes data-task and data-date are added to each cell. We'll use these when we add drag-and-drop functionality to the task durations. For each cell, we map over the taskDurations state and add a task duration <div> element as a child of the cell if the cell's task id and start date matches the task duration task and start properties. The width of the task duration element is determined by calculating the duration of the task duration using the dayDiff function and then multiplying it by 100% of the cell width using CSS.

Now you'll see the task rows and task durations in your app.

Making task durations deletable

Now let’s make our task durations deletable by pressing the delete button when the task duration is in focus. Add the following property to the task duration element, which is the <div> that's returned where the taskDurations are mapped over (taskDurations.map((el, i) => {):

onKeyDown={(e) => deleteTaskDuration(e, el?.id)}

Now let's create the deleteTaskDuration function below the two for loops:

  function deleteTaskDuration(e, id) {
    if (e.key === 'Delete' || e.key === 'Backspace') {
      // update taskDurations
      const newTaskDurations = taskDurations.filter(
        (taskDuration) => taskDuration.id !== id
      );
      // update state (if data on backend - make API request to update data)
      setTaskDurations(newTaskDurations);
    }
  }

The React SyntheticEvent and the task duration id are passed into the deleteTaskDuration function. If the "Delete" or "Backspace" key is pressed, a new state object is created by filtering out the deleted task from the taskDurations state, and the state is updated.

Adding drag-and-drop functionality to task durations

Let’s add drag-and-drop functionality to our task durations to change the position of the task duration elements on the grid. Add the following state and its setter:

  const [taskDurationElDraggedId, setTaskDurationElDraggedId] = useState(null);

The taskDurationElDraggedId state will keep track of the task duration id that is currently being dragged. Now add the following function below the deleteTaskDuration function:

  function handleDragStart(taskDurationId) {
    console.log(taskDurationId);
    setTaskDurationElDraggedId(taskDurationId);
  }

This function will handle setting the taskDurationElDraggedId state.

Now change the returned task duration <div> element to the following:

  <div
    key={`${i}-${el?.id}`}
    draggable="true"
    tabIndex="0"
    onDragStart={() => handleDragStart(el?.id)}
    style={{
      ...taskDuration,
      width: `calc(${dayDiff(
              el?.start,
              el?.end
      )} * 100% - 1px)`,
      opacity:
        taskDurationElDraggedId === el?.id ? '0.5' : '1',
    }}
    onKeyDown={(e) => deleteTaskDuration(e, el?.id)}
  ></div>

We set the draggable property of the task duration <div> element to true. Of course, we don’t need this property for our drag and drop to work, but it's good for UX because it creates a "ghost" image of the task duration element attached to the mouse cursor as it's dragged. We then call the handleDragStart function and pass in the task duration id as an argument when dragging of the task duration starts. We also made the opacity of the task duration decrease while dragging.

Also, while dragging, you'll see the task duration id in your dev tools console.

Add the following property to the task row cell, which has a data-task property:

onDrop={onTaskDurationDrop}

We add the onDrop attribute to define the drop event handler for each cell in the drag-and-drop zone of the grid, which is the task cells area. Dropping an element on a cell will trigger an onTaskDuration function call. Let’s define the onTaskDurationDrop function. Add the following lines below the handleDragStart function:

  function onTaskDurationDrop(e) {
    const targetCell = e.target;
    // prevent adding on another taskDuration
    if (!targetCell.hasAttribute('draggable')) {
      // find task
      const taskDuration = taskDurations.filter(
        (taskDuration) => taskDuration.id === taskDurationElDraggedId
      )[0];

      const dataTask = targetCell.getAttribute('data-task');
      const dataDate = targetCell.getAttribute('data-date');

      const daysDuration = dayDiff(taskDuration.start, taskDuration.end);

      // get new task values
      // get start, calc end using daysDuration - make Date objects - change taskDurations
      const newTask = parseInt(dataTask);
      const newStartDate = new Date(dataDate);
      let newEndDate = new Date(dataDate);
      newEndDate.setDate(newEndDate.getDate() + daysDuration - 1);

      // update taskDurations
      taskDuration.task = newTask;
      taskDuration.start = createFormattedDateFromDate(newStartDate);
      taskDuration.end = createFormattedDateFromDate(newEndDate);

      const newTaskDurations = taskDurations.filter(
        (taskDuration) => taskDuration.id !== taskDurationElDraggedId
      );
      newTaskDurations.push(taskDuration);

      // update state (if data on backend - make API request to update data)
      setTaskDurations(newTaskDurations);
    }
    setTaskDurationElDraggedId(null);
  }

We prevent a task duration from being added on top of another task duration by checking if the target cell has a draggable attribute. We then update the taskDuration state. We first find the task that was dragged and dropped, and remove it from a copy of the taskDurations state. We then create a new task duration and add it to the copied state. We use this copied and modified state to update the state.

If you now try to drag a task duration, you'll see that the cursor will turn to the "not-allowed" icon. This is because dragging and dropping an element inside of another element is disabled by default. To remove this default behavior in our drag-and-drop zone, add the following property to the <div> element with an id of gantt-time-period-cell-container:

onDragOver={(e) => e.preventDefault()}

Now that the drag-and-drop works, let's get the "Add Task" form working.

Making the "Add task" form functional

In the AddTask component, the form has an input element with an onChange event handler that updates the local state variable task. Submitting the form will call the handleSubmit function. We need to complete this function by updating the tasks state using the passed-in prop setTasks.

Set the new tasks state by adding the following state setter above setTask(''):

  setTasks((prevState) => {
    const newState = prevState;
    // find largest task number, add 1 for new task - else could end up with tasks with same id
    const maxIdVal = prevState.reduce(function (a, b) {
      return Math.max(a, b.id);
    }, -Infinity);

    // create new task
    newState.push({
      id: isFinite(maxIdVal) ? maxIdVal + 1 : 1,
      name: task,
    });

    return [...newState];
  });

We create a new task and add it to a copy of the state, newState, and then return it from setState to replace the state with the new state.

To determine the new task id, we use the reduce method to find the largest current task id, and then add one to it to create the id for the new task. The task id values are numbers that represent the order in which they were created. The tasks are sorted by their id.

You'll now be able to add tasks to your Gantt chart. When you add a task, the Gantt Chart is re-rendered, displaying the new tasks state.

Making the "Add task duration" form functional

The AddTaskDuration component is partly created for you, like the AddTask component was. We need to loop through the passed-in tasks state and populate the "Which tasks" <select> input. We also need to update the taskDuration state using the passed in setTaskDurations state setter.

The form has three inputs: a <select> input for selecting the task that the task duration is for, and two date inputs for selecting the start and end date of the task duration. The form state is managed using the three local state variables, task, startDate, and endDate, as well as their state setters. The onChange function handles updating the local state when an input value is changed.

First, let's populate the tasks <select> input with <option> elements for each task. Add the following code inside of the <select> input with an id of select-task:

  <option disabled defaultValue value="">
    select a task
  </option>
  {tasks &&
    tasks.map((tsk) => (
      <option key={tsk?.id} value={tsk?.id}>
        {tsk?.name}
      </option>
    ))}

Now you'll see that the <select> menu is populated with all the task names. If you add a task, you'll see that it's added to the <select> menu as the GanttChart component re-renders.

To get the handleSubmit function to work, add the following lines to it, below e.preventDefault():

  if (task === '') return;
  const timeStamp = Date.now();
  const newTaskDuration = {
    id: timeStamp,
    start: startDate,
    end: endDate,
    task: parseInt(task),
  };

  setTaskDurations((prevState) => {
    const newState = prevState;
    return [...newState, newTaskDuration];
  });

If a task has not been selected, we return. We then create a new task duration using the local state and a time stamp for the id. We then set the taskDurations state using setTaskDurations by returning a new array from the passed-in function.

You'll now be able to add new task durations to your Gantt chart.

Making the "Tracker period" functional

To complete the code for the TimeRange component, we need to give each <select> element the correct value using the passed-in timeRange state. We then need to update this state in the onChange handler function.

Replace the value props of the four <select> elements with the following value props:

// <select> with id="from-select-month""
value={timeRange.fromSelectMonth}

// <select> with id="from-select-year"
value={timeRange.fromSelectYear}

// <select> with id="to-select-month"
value={timeRange.toSelectMonth}

// <select> with id="to-select-year"
value={timeRange.toSelectYear}

Now add the following lines to the onChange function, below the line const { value, id } = e.target;:

  if (id === 'from-select-month') {
    setTimeRange((prevState) => {
      return { ...prevState, fromSelectMonth: value };
    });
  }
  if (id === 'from-select-year') {
    setTimeRange((prevState) => {
      return { ...prevState, fromSelectYear: value };
    });
  }
  if (id === 'to-select-month') {
    setTimeRange((prevState) => {
      return { ...prevState, toSelectMonth: value };
    });
  }
  if (id === 'to-select-year') {
    setTimeRange((prevState) => {
      return { ...prevState, toSelectYear: value };
    });
  }

When the value of one of the <select> inputs is changed, we update the timeRange state. This causes the GanttChart component to re-render, which will show the updated time range.

We've completed our basic Gantt chart, but the process was a little tedious and possibly not bug free. Now let's create a Gantt chart using our Bryntum Gantt component for comparison.

Using Bryntum Gantt with Next.js

To install Bryntum Gantt with npm you just need to install two libraries with zero external dependencies. If you are unfamiliar with Bryntum products, you can follow the guide here.

Let's import the Bryntum Gantt component. In the components folder, create a Gantt.js file and add the following lines:

import { BryntumGantt } from '@bryntum/gantt-react';

export default function Gantt({ ganttRef, ...props }) {
  return <BryntumGantt {...props} ref={ganttRef} />;
}

We'll use the imported BryntumGantt component. We'll pass in a config file as props to determine how the Gantt chart looks and where it gets data from. You can also pass in a ref if needed.

We need to import the BryntumGantt component dynamically. Create another component called GanttInstance.js and add the following code:

import dynamic from 'next/dynamic';
import { ganttConfig } from '../ganttConfig.js';

const Gantt = dynamic(() => import('../components/Gantt.js'), {
  ssr: false,
  loading: () => {
    return (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          height: '100vh',
        }}
      >
        <p>Loading...</p>
      </div>
    );
  },
});

const GanttInstance = () => {
  return (
    <>
      <Gantt
        {...ganttConfig}
        // other props
      />
    </>
  );
};

export { GanttInstance };

In the project's root folder, create a ganttConfig.js file and add the following code:

/**
 * Application configuration
 */

const ganttConfig = {
  columns: [{ type: 'name', field: 'name', width: 250 }],
  viewPreset: 'weekAndDayLetter',
  barMargin: 10,
  project: {
    transport: {
      load: {
        url: 'data/gantt-data.json',
      },
    },
    autoLoad: true,
  },
};

export { ganttConfig };

We pass in the configuration from ganttConfig.js to the Gantt component. This includes the columns property to create the Gantt chart columns for the tasks. You can learn more about the config options in the Bryntum docs.
We configure the project with the transport property to populate the Gantt chart's data stores. We've configured the url to load data using the load property. The url data source is a JSON file in the public folder of the starter repository. You can also configure the transport to sync data changes to a specific url. For more information, you can read the following guide in our docs: Binding Bryntum Gantt data.

We dynamically import the Gantt component with ssr set to false. While the component is loading, we display a loading component that returns a <p> tag with the message "Loading...".

In order for the Gantt chart's data population to work, we need to turn off strict mode. Set reactStrictMode to false in the next.config.js file, which is in the project's root folder:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  swcMinify: true,
};

module.exports = nextConfig;

Let's create a page to view our Bryntum Gantt chart. In the pages folder, create a file named bryntum.js and add the following lines to it:

import Head from 'next/head';
import { GanttInstance } from '../components/GanttInstance';
import '@bryntum/gantt/gantt.stockholm.css';

export default function BryntumGanttPage() {
  return (
    <div className="container">
      <Head>
        <title>
          Creating a Gantt chart with React using Next.js and Bryntum
        </title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <GanttInstance></GanttInstance>
      <style jsx>{`
        .container {
          height: 100vh;
        }
      `}</style>
    </div>
  );
}

We import our GanttInstance component and the CSS for the Bryntum Gantt Stockholm theme, which is one of five available themes. You can see a demo showing the different themes here. You can also create custom themes. In this demo, you can also learn about the different components of the Gantt chart by clicking on the "Learn" button in the top right corner.

The GanttInstance component is wrapped in a <div> with a class of container. We give it a height of 100vh so that the Gantt chart fills the whole screen.

In your app, go to the bryntum route by going to the following url: http://localhost:3000/bryntum. You'll now see the Bryntum Gantt chart.

This basic example of the Bryntum Gantt component has more features by default than the Gantt chart that we created. The features include:

Collapsible task groups.
Drag-and-drop re-ordering of tasks.
Add, edit, copy, and delete tasks. Right-click on a task to see a pop-up menu with these actions.
Draggable task durations.
Re-sizeable task durations. Hover your mouse over the left or right side of a task duration, which is green, until the cursor changes to a resize icon. Then click and hold down while you move your mouse left or right.

Try out some of these features in your app.

Comparing the vanilla JS, React, and Bryntum Gantt charts

Let's compare the Gantt chart that we created with the basic example of the Bryntum Gantt chart, as well as the vanilla JavaScript one that we created in a previous article.

Breaking the React Gantt chart into different components, organizing code, and managing state was easier than when vanilla JavaScript was used. React manages state declaratively, which makes managing it easier. The vanilla JavaScript Gantt chart required a lot of direct DOM manipulation, selecting DOM elements and adding events to them. The code of the vanilla JavaScript Gantt chart and React Gantt chart are quite similar, however because we used Next.js, we had to take SSR into account.

The Bryntum Gantt chart was easy to set up, it has a very customizable API that you can learn about in the API docs. You can see all the available features here and view an advanced demo of a React Gantt chart here. The advanced demo includes features such as highlighting critical paths, theme selection, and undoing or redoing actions.

The Bryntum Gantt chart is built with pure JavaScript/ES6+ and it uses a very fast rendering engine. Its performance is great even with large datasets. You can test this yourself: Return to your local development server and set the Tracker Period in the custom-built Gantt to its maximum range and add a new task. You'll notice that it takes a couple of seconds for the new task to be added. This is because there are many cells to render. Try this with the live example of the vanilla JavaScript Gantt from the previous article as well. You'll notice the same thing.

Now change the date range of the project in the chart that you created with the Bryntum Gantt component. Make the date range 1000 years and then add a task. There is no noticeable difference in performance.

Next steps

There are many ways you can add to or improve the Gantt chart component as described in the "Next Steps" section of our previous article where we used vanilla JavaScript to create a Gantt chart. Unlike the vanilla JavaScript Gantt chart, you don't need to worry about sanitizing the task and task duration data with React.

You can improve the Gantt chart by adding input validation. State management can also be improved by preventing unnecessary re-renders. The TimeTable component renders the table using many nested loops. Minimizing the number of nested loops would improve performance.

Build or buy?

This article gives you a starting point for building your own React Gantt chart using Next.js. If you’re instead looking to buy an off-the-shelf, battle-tested solution that just works, take a look at some examples of our Bryntum Gantt. With the Bryntum Gantt component, you can:

Schedule tasks using dependencies and constraints.
Leverage calendars for projects, tasks, and resources.
Use recurrent and fixed time intervals.
Customize rendering and styling.
Customize user experience through many different column types and task editors.
Deal with extensive datasets and performance tuning.

We also have a support forum and offer professional services.

Creating a Gantt chart with vanilla JavaScript

Bryntum — Tue, 28 Jun 2022 18:28:00 +0000

A Gantt chart is a really handy project management tool for coordinating complex schedules for large teams or multiple teams. While many companies use Excel to build Gantt charts, using a Gantt chart that is JavaScript-based has a couple of advantages over spreadsheets, for example, you can:

Easily integrate your chart into existing project management dashboards.
Share your chart online.
Customize your chart to suit your needs.

Gantt charts are surprisingly complex, so if you’re looking to build your own for production use, this guide will only show you the first steps. If you instead prefer to buy a battle-tested off-the-shelf version, take a look at our commercial Bryntum Gantt Chart.

Let’s take a look at how you can make a basic drag-and-drop Gantt chart component using vanilla JavaScript. You can find all the code used below in our GitHub repository.

The basic Gantt chart we will create will have the following features:

The user can select the planning time period by selecting a start date and an end date.
We’ll be able to add, delete, and edit tasks.
Task durations can be added and deleted, and we’ll be able to edit them using drag and drop.

You can see a live example of the final Gantt chart here. Once you're done, you'll have a Gantt chart that looks like the one shown below.

Getting started

We’ll create our Gantt chart using only HTML, CSS and JavaScript.

The CSS will be defined in JavaScript files. We will use JavaScript modules to split the code into separate modules that can be imported and exported, so we’ll need a local HTTP server to run the code. We need to do this because JavaScript modules follow the same-origin policy, which means that you cannot import modules from your file system by default. To get a local server with live reload, you can install the npm Live Server package. If you are using VS Code, you can install the Live Server extension.

If you want to do this tutorial in the browser with minimal setup, you can make use of Replit, which is an online integrated development environment (IDE). You can check their documentation for how to create a project.

Let’s get an overview of how the app will be structured and create the basic app and the building blocks of our component.

Folder structure

Everything that can be exported using the export statement is considered a component. The index.html file will only import a single JavaScript file, script.js, which is a module. This will be the single entry point to our application. The Gantt chart component is imported into script.js.

We will break the Gantt component up into four separate components:

The main module, ganttChart.js,
A module for the HTML, htmlContent.js,
A module for the CSS, style.js, and
A module for some utility functions, utils.js.

A utility function is a generic function that performs a task that we could reuse in another project. We will create utility functions for date calculations and date formatting.

Create the following files and folders:

|__ index.html
|__ script.js
|__ components 
    |__ ganttChart
        |__ ganttChart.js
        |__ htmlContent.js
        |__ style.js
        |__ utils.js</code></pre>

Basic app structure

Before we make the Gantt chart component, let’s set up the app that will render the Gantt chart. Add the following lines to the index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./script.js" type="module" defer></script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap"
      rel="stylesheet"
    />
    <title>Creating a Gantt Chart component with Vanilla JavaScript</title>
  </head>
  <body>
    <div role="gantt-chart"></div>
  </body>
</html>

The type=module attribute of the script.js file that we embed into our HTML document allows us to use module features in our script. In the <body> tag there is a single <div> with a role of "gantt-chart". We use this to identify the HTML element that will be used to create our Gantt chart component.

Now add the following lines to the script.js file:

import { GanttChart } from "./components/ganttChart/ganttChart.js";

// can have multiple instances of Gantt chart
document.addEventListener("DOMContentLoaded", () => {
  // get data - could get from server
  const tasks = [
    { 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" },
    { id: 7, name: "Task 7" },
    { id: 8, name: "Task 8" },
  ];

  const taskDurations = [
    {
      id: "1",
      start: new Date("2022/1/2"),
      end: new Date("2022/1/8"),
      task: 1,
    },
    {
      id: "2",
      start: new Date("2022/1/10"),
      end: new Date("2022/1/15"),
      task: 2,
    },
    {
      id: "3",
      start: new Date("2022/1/11"),
      end: new Date("2022/1/18"),
      task: 4,
    },
  ];

  const ganttCharts = document.querySelectorAll("[role=gantt-chart]");
  ganttCharts.forEach(ganttChart => {
    new GanttChart(ganttChart, tasks, taskDurations);
  });
});

We import GanttChart, which will be the constructor function that creates our Gantt chart. Once the HTML content is loaded and parsed, we create our Gantt chart. You can create multiple instances of the Gantt chart if you need to.

We hard code the tasks and taskDurations data objects for the Gantt chart. You could get this data from your backend using an HTTP request. The taskDurations indicate the duration of a task. They have a task property, which specifies the task it is associated with, as indicated by the task id property. They also have start and end date properties, which indicate the task duration. These are JavaScript Date objects.

For each HTML element on our page that has a role of "gantt-chart", we create a Gantt chart using the GanttChart constructor function. We pass in the ganttChart DOM element object, as well as the task and task duration data. This function creates the content of the Gantt chart component.

HTML structure

Now let’s describe the Gantt chart component. The following diagram describes the Gantt chart layout. The numbered blocks represent the <div> containers for each part of the Gantt chart. They each have a unique id.

Let’s add the HTML needed for our Gantt Chart component. Add the following lines to the htmlContent.js file:

import { cssStyles } from "./style.js";

export function createHtmlContentFragment() {
  const content = `
  <style>
    ${cssStyles()}
  </style>

  <div id="gantt-container">

      <div class="title">
        <h1> Gantt Tracker</h1>
      </div>

      <div id="gantt-grid-container">
        <div id="gantt-grid-container__tasks"></div>
        <div id="gantt-grid-container__time"></div>
      </div>

      <div id="add-forms-container">

          <div class="inner-form-container">

                <form id="add-task">
                  <h1>Add Task</h1>                  
                  <div><input placeholder="Add task name" type="text"></div>
                  <button type="submit">
                    Add
                  </button>
                </form>



                <form id="add-task-duration">
                    <h1>Add Task duration</h1>
                    <div class="inner-form-container">
                        <fieldset >
                          <label for="select-task">Which task?</label>
                          <select id="select-task" name="select-task"></select>
                        </fieldset>
                        <fieldset id="date" >
                          <label for="start-date">Start date:</label>
                          <input type="date" id="start-date" name="start-date"
                              value="2022-01-01"
                              min="2022-01-01" max="2050-12-31"
                          >

                          <label for="end-date">End date:</label>
                          <input type="date" id="end-date" name="end-date"
                            value="2022-01-03"
                            min="2022-01-01" max="2050-12-31"
                          >
                        </fieldset>
                    </div>
                    <button>
                      Add
                    </button>
                </form>

            </div>

          <div class="tracker-period">                 
              <h1 >Tracker Period</h1>
              <div>
                  <div id="settings">
                      <fieldset id="select-from">
                          <legend>From</legend>
                          <select id="from-select-month" name="from-select-month"></select>
                          <select id="from-select-year" name="from-select-year"></select>
                      </fieldset>

                      <fieldset id="select-to">
                          <legend>To</legend>
                          <select id="to-select-month" name="to-select-month"></select>
                          <select id="to-select-year" name="to-select-year"></select>
                      </fieldset>
                  </div>
              </div>
           </div>
      <div>
  </div>
  `;

    // turn the HTML string into a document fragment
    const contentFragment = document
        .createRange()
        .createContextualFragment(content);
    return contentFragment;
}

We import our CSS styles as a string from style.js, which we will define in the next section. We create an HTML string and store it in the content variable. We will go through the specifics of the HTML and CSS as we go through the tutorial. We convert the HTML string into DOM nodes by creating a DocumentFragment that is stored in the contentFragment variable. This document fragment is made up of DOM nodes, and is separate from the document DOM tree. It will not be displayed on the page until we add it to the document DOM. The createHtmlContentFragment function returns the contentFragment variable. Later, we will add this document fragment as a child to the Gantt chart DOM element to put it on the page.

Adding styling with CSS

Now let’s add the basic styling for our Gantt chart component. Add the following lines to the styles.js file:

export function cssStyles() {
  const CELL_HEIGHT = 40;
  const outlineColor = "#e9eaeb";

  return `
    * {
        box-sizing: border-box;
        margin: 0;
    }

    html {
      font-family: 'Montserrat', sans-serif;
    }

    h1 {
      font-size: 1.5rem;
    }

    fieldset {
        border:none;
        padding: 0.5rem;
    }

    fieldset label {
      margin-right: 10px;
    }

    #date > label:nth-child(3) {
      margin-left: 10px;
    }

    form button {
      width: 70px;
      height: 50px;
    }

    select {
      font-size: 1.2rem;
      padding: 0.2rem 0.2rem;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.05);
    }

    input {
      font-family: 'Montserrat', sans-serif;
      height: 100%;
      padding: 10px 5px;
      border: 1px solid #EDEDED;
      border-radius: 5px;
      transition: 0.2s ease-out;
    }

    input:focus {
      outline-color: #0095e4;
    }

    button:hover {
      cursor: pointer;
    }

    .title {
      text-align: center; 
      margin-bottom: 20px
    }

    #gantt-container {
      padding: 1rem;
    }

    #gantt-grid-container {
        display: grid;
        grid-template-columns: 150px 1fr;
        outline: 2px solid ${outlineColor};
    }

    #gantt-grid-container, #settings > fieldset,
    #add-task, #add-task-duration  {
      border-radius: 5px;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.05);
    }

    #gantt-grid-container__time {
      display: grid;
      overflow-x: auto;
    }

    .gantt-task-row {
        outline: 0.5px solid ${outlineColor};
        text-align: center;
        height: ${CELL_HEIGHT}px;
        // expand across whole grid
        grid-column: 1/-1;
        width: 100%;
        border: none;
    }

    .gantt-task-row button {
      border: none;
      height: ${CELL_HEIGHT}px;
    }

    .gantt-task-row input {
      width: 127px;
      border: none;
      outline: none;
      background: none;
    }

    #gantt-grid-container__tasks button {
      color: #ef5350;
      background: none;
      border-radius: 5px;
      height: 20px;
      transition: all 0.2s ease;
    }

    #gantt-grid-container__tasks button:focus {
      outline: none;
      transform: scale(1.3);
    }

    #gantt-grid-container__tasks .gantt-task-row {
      padding: 2px 0;
    }

    .gantt-time-period {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(30px, 1fr);
        text-align: center;
        height: ${CELL_HEIGHT}px;
    }

    .gantt-time-period span {
      margin: auto;
    }

    .gantt-time-period-cell-container {
      grid-column: 1/-1;
      display: grid;
    }

    .gantt-time-period-cell {
      position: relative;
      outline: 0.5px solid ${outlineColor};
    }

    .day {
      color: #bbb;
    }

    #settings {
        display: flex;
        align-items: center;
        font-size: 14px;
        padding-bottom: 0.5rem;
    }

    .taskDuration {
      position: absolute;
      height: ${CELL_HEIGHT}px;
      z-index: 1;
      background: linear-gradient(90deg, rgba(158,221,255,1) 0%, rgba(0,149,228,1) 100%);
      border-radius: 5px;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.05);
      cursor: move;
    }


    .taskDuration:focus {
      outline: 1px solid black;
    }

    .dragging {
      opacity: 0.5;
    }

    #add-forms-container {
      display: flex;
      flex-wrap: wrap;
      padding: 1rem 0;
      justify-content: space-between;
    }

    #add-forms-container form {
      padding: 1rem;
    }

    #add-forms-container form > * {
      display: flex;
      align-items: center;
    }

    #add-forms-container input {
      height: ${CELL_HEIGHT}px;
    }

    #add-task, #add-task-duration {
      margin-right: 10px;
      margin-bottom: 10px;
    }

    #add-forms-container button:hover,
    #add-forms-container button:focus {
      opacity: 0.85;
    }

    input[type=text], select {
      padding: 5px 7px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
    }


    #add-forms-container button {
      color: white;
      background: #2ade3c;
      font-size: 1.1rem;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.05);
      padding: 0.5rem 1rem;
      border: 0;
      border-radius: 5px;
      transition: all 0.3s ease;
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
    }

    .tracker-period {
      padding: 1rem;
    }

    .tracker-period h1{
      margin-bottom: 16px;
    }

    .inner-form-container {
      display: flex; 
      flex-direction: row
    }

    .inner-form-container h1 {
      margin-bottom: 0.5rem;
    }  
  `;
}

We export a cssStyles function from this module. It returns a CSS string that we import and add to the HTML string in htmlContent.js. The variable ROW_HEIGHT allows us to easily change the height of the rows in the Gantt Chart.

Adding utility functions

Next, we’ll add some utility functions for our Gantt chart component. Add the following lines to the utils.js file:

export function monthDiff(firstMonth, lastMonth) {
  let months;
  months = (lastMonth.getFullYear() - firstMonth.getFullYear()) * 12;
  months -= firstMonth.getMonth();
  months += lastMonth.getMonth();
  return months <= 0 ? 0 : months;
}

export function dayDiff(startDate, endDate) {
  const difference = endDate.getTime() - startDate.getTime();
  const days = Math.ceil(difference / (1000 * 3600 * 24)) + 1;
  return days;
}

export function getDaysInMonth(year, month) {
  return new Date(year, month, 0).getDate();
}

export function getDayOfWeek(year, month, day) {
  const daysOfTheWeekArr = ["M", "T", "W", "T", "F", "S", "S"];
  const dayOfTheWeekIndex = new Date(year, month, day).getDay();
  return daysOfTheWeekArr[dayOfTheWeekIndex];
}

export function createFormattedDateFromStr(year, month, day) {
  let monthStr = month.toString();
  let dayStr = day.toString();

  if (monthStr.length === 1) {
    monthStr = `0${monthStr}`;
  }
  if (dayStr.length === 1) {
    dayStr = `0${dayStr}`;
  }
  return `${year}-${monthStr}-${dayStr}`;
}

export function createFormattedDateFromDate(date) {
  let monthStr = (date.getMonth() + 1).toString();
  let dayStr = date.getDate().toString();

  if (monthStr.length === 1) {
    monthStr = `0${monthStr}`;
  }
  if (dayStr.length === 1) {
    dayStr = `0${dayStr}`;
  }
  return `${date.getFullYear()}-${monthStr}-${dayStr}`;
}

These functions will be used for date calculations and date formatting. We will go through the specifics of the functions as we use them in the tutorial.

Creating the Gantt chart component

Now that we have the basic structure of our app set up, we can start creating the Gantt chart. We will only work in the ganttChart.js file from now on. Add the following to the ganttChart.js file:

import { createHtmlContentFragment } from "./htmlContent.js";
import {
  monthDiff,
  dayDiff,
  getDaysInMonth,
  getDayOfWeek,
  createFormattedDateFromStr,
  createFormattedDateFromDate,
} from "./utils.js";

export function GanttChart(ganttChartElement, tasks, taskDurations) {
  const months = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec",
  ];
  const contentFragment = createHtmlContentFragment();
  let taskDurationElDragged;

  ganttChartElement.appendChild(contentFragment);
}

We import all the functions we need from the other modules. The GanttChart constructor function takes in the Gantt chart DOM element, tasks, and task durations as arguments. We also create some variables that we will use later, including a contentFragment variable that is the document fragment of our HTML content from htmlContent.js. We then append this to the ganttChartElement so that it is added to the document DOM.

Now let’s add the month and year options for our “From” and “To” <select> elements. Add the following lines just above ganttChartElement.appendChild(contentFragment);:

// add date selector values
  let monthOptionsHTMLStrArr = [];
  for (let i = 0; i < months.length; i++) {
    monthOptionsHTMLStrArr.push(`<option value="${i}">${months[i]}</option>`);
  }

  const years = [];
  for (let i = 2022; i <= 2050; i++) {
    years.push(`<option value="${i}">${i}</option>`);
  }

  const fromSelectYear = contentFragment.querySelector("#from-select-year");
  const fromSelectMonth = contentFragment.querySelector("#from-select-month");
  const toSelectYear = contentFragment.querySelector("#to-select-year");
  const toSelectMonth = contentFragment.querySelector("#to-select-month");

  fromSelectMonth.innerHTML = `
      ${monthOptionsHTMLStrArr.join("")}
  `;
  fromSelectYear.innerHTML = `
      ${years.join("")}
  `;
  toSelectMonth.innerHTML = `
      ${monthOptionsHTMLStrArr.join("")}
  `;
  toSelectYear.innerHTML = `
      ${years.join("")}
  `;

We use for loops to create string arrays of the <option> tags that we need. We then find their <select> tags in the document fragment stored in the contentFragment variable and add the options to their respective <select> tags. If you run your local server now, you should see the following basic skeleton of our app in your browser window:

Creating the Gantt chart grid

Let’s create the Gantt chart grid that will display our tasks, a timeline, and our task durations. The diagram below has six numbered arrows that show the order in which the columns, rows, and task duration elements will be created. The creation of each part of the grid will be performed with functions. These six functions will be called in the createGrid function, which we will soon create.

Let’s now select the tasks and time period containers from the content fragment, create the createGridfunction, and call it. Add the following lines just above ganttChartElement.appendChild(contentFragment);:

// create grid
  const containerTasks = contentFragment.querySelector(
    "#gantt-grid-container__tasks"
  );
  const containerTimePeriods = contentFragment.querySelector(
    "#gantt-grid-container__time"
  );

  const addTaskForm = contentFragment.querySelector("#add-task");
  const addTaskDurationForm =
    contentFragment.querySelector("#add-task-duration");
  const taskSelect = addTaskDurationForm.querySelector("#select-task");

  function createGrid() {
    const startMonth = new Date(
      parseInt(fromSelectYear.value),
      parseInt(fromSelectMonth.value)
    );
    const endMonth = new Date(
      parseInt(toSelectYear.value),
      parseInt(toSelectMonth.value)
    );
    const numMonths = monthDiff(startMonth, endMonth) + 1;

    // clear first each time it is changed
    containerTasks.innerHTML = "";
    containerTimePeriods.innerHTML = "";

    // createTaskRows();
    // createMonthsRow(startMonth, numMonths);
    // createDaysRow(startMonth, numMonths);
    // createDaysOfTheWeekRow(startMonth, numMonths);
    // createTaskRowsTimePeriods(startMonth, numMonths);
    // addTaskDurations();
  }

  createGrid();

We first get the tasks and time periods containers from the document fragment, contentFragment. We also get the “add task” and “add task duration” form elements, as well as the “add task duration” <select> element. We will use these elements later.

We then define the createGrid function. In this function, we determine the planning time period based on the values of the “From” and “To” <select> values. We then use our utility function monthDiff to determine how many months the planning time period extends over. If the “From” date is greater than the “To” date, the monthDiff function returns zero.

Each time createGrid is called, we clear the containerTasks and containerTimePeriods inner HTML. We do this so that when we update the tasks or task durations and re-create the grid by calling createGrid, the old contents that showed the previous state are removed. We then call the six functions required to create the columns, rows, and task duration elements. The functions are commented out for now. As we define each function, you can uncomment the function call to see its effect on the grid creation. After defining the createGrid function, we call it for its initial render.

Let’s define the six functions called in createGrid now, one by one.

Creating task rows

Add the following function below ganttChartElement.appendChild(contentFragment);:

function createTaskRows() {
    const emptyRow = document.createElement("div");
    emptyRow.className = "gantt-task-row";
    // first 3 rows are empty
    for (let i = 0; i < 3; i++) {
      containerTasks.appendChild(emptyRow.cloneNode(true));
    }

    // add task select values
    let taskOptionsHTMLStrArr = [];

    tasks.forEach((task) => {
      const taskRowEl = document.createElement("div");
      taskRowEl.id = task.id;
      taskRowEl.className = "gantt-task-row";

      const taskRowElInput = document.createElement("input");
      taskRowEl.appendChild(taskRowElInput);
      taskRowElInput.value = task.name;

      taskOptionsHTMLStrArr.push(
        `<option value="${task.id}">${task.name}</option>`
      );

      // add delete button
      const taskRowElDelBtn = document.createElement("button");
      taskRowElDelBtn.innerText = "✕";
      taskRowEl.appendChild(taskRowElDelBtn);

      containerTasks.appendChild(taskRowEl);
    });
    taskSelect.innerHTML = `
      ${taskOptionsHTMLStrArr.join("")}
    `;
  }

First, we create three empty rows. We then create a row for each task. Each task row has two children: an <input> element and a delete button. The value of the input is the task name. We’ve used an input here so that it can be edited easily. We also add the tasks as options for the task <select> element in the “add task” form.

You will be able to see the populated task rows in your app now. Make sure to uncomment the createTaskRows() function call in the createGrid function. We still need to make the task edit and delete functional.

Adding months

Let’s add function two now. Add the following createMonthsRow function below the createTaskRows function:

function createMonthsRow(startMonth, numMonths) {
    containerTimePeriods.style.gridTemplateColumns = `repeat(${numMonths}, 1fr)`;

    let month = new Date(startMonth);

    for (let i = 0; i < numMonths; i++) {
      const timePeriodEl = document.createElement("div");
      timePeriodEl.className = "gantt-time-period day";
      // to center text vertically
      const timePeriodElSpan = document.createElement("span");
      timePeriodElSpan.innerHTML =
        months[month.getMonth()] + " " + month.getFullYear();
      timePeriodEl.appendChild(timePeriodElSpan);
      containerTimePeriods.appendChild(timePeriodEl);
      month.setMonth(month.getMonth() + 1);
    }
  }

Make sure to uncomment the createMonthRow() function call in the createGrid function.

The startMonth and numMonths arguments determine how many month columns there will be and where the months start. The number of columns is dynamic because the user can change the time period. Each time a time period is selected, the number of columns in the containerTimePeriods container is determined based on the number of months in the time period. We use the CSS property grid-template-columns to make each month’s column take up one fraction of the container width so that the container is divided evenly into columns for each month.

For each month, we create a new time period row. We add a <span> element to it as a child. This span element is centered vertically in the row and contains the label for the month and year.

You will be able to see a single row with the text “Jan 2022” in your app now. However, changing the time period date range will not update the months. We need to add event listeners to listen for a change in the date range so that we can dynamically update the grid.

Add the following event listeners below the createMonthsRow function:

// re-create Grid if year / month selection changes
  fromSelectYear.addEventListener("change", createGrid);
  fromSelectMonth.addEventListener("change", createGrid);
  toSelectYear.addEventListener("change", createGrid);
  toSelectMonth.addEventListener("change", createGrid);

We listen for the "change" event on the time period <select> tags to check if the year and month ranges have changed. If they have, we re-create the grid by calling the createGrid function.

You will now be able to see how the time period rows update when the planning time period is changed. For large time periods, there is a horizontal scroll in the grid container with the ID "gantt-grid-container__time". If an invalid time period is selected, for example from Jan 2023 to Jan 2022, only the first month of the “From” date will be displayed.

Adding days of the month

Let’s add function three now. Add the following createDaysRow function above the "change" event listeners:

function createDaysRow(startMonth, numMonths) {
    let month = new Date(startMonth);

    for (let i = 0; i < numMonths; i++) {
      const timePeriodEl = document.createElement("div");
      timePeriodEl.className = "gantt-time-period";
      containerTimePeriods.appendChild(timePeriodEl);

      // add days as children
      const numDays = getDaysInMonth(month.getFullYear(), month.getMonth() + 1);

      for (let i = 1; i <= numDays; i++) {
        let dayEl = document.createElement("div");
        dayEl.className = "gantt-time-period";
        const dayElSpan = document.createElement("span");
        dayElSpan.innerHTML = i;
        dayEl.appendChild(dayElSpan);
        timePeriodEl.appendChild(dayEl);
      }

      month.setMonth(month.getMonth() + 1);
    }
  }

Make sure to uncomment the createDaysRow() function call in the createGrid function.

This function loops through the number of months provided as an argument and creates a time period element, timePeriodEl, for each month. We create a Date object for the start month, which is stored in the month variable. In each iteration through the number of months, we increase the date of the month variable by one month using the setMonth method of the Date object.

We have a nested loop for creating the days of each month. The number of days in each month is calculated using our getDaysInMonth utility function. We then loop through each day of the month and create a day element <div> tag called dayEl. We create a <span> element that displays the day value. We add it as a child of the day element. We then add the day element as a child to the time period element for the given month.

If you view your app now, you will see that the days of the month cells are centered vertically. This is because the container with the "gantt-grid-container__time" ID has its display property set to grid. We will need this later for the drag-and-drop container that we will add inside of the grid. Once we add all of the rows, the rows will be aligned correctly.

Adding days of the week

Let’s add the fourth function. Add the following createDaysOfTheWeekRow function above the "change" event listeners:

function createDaysOfTheWeekRow(startMonth, numMonths) {
    let month = new Date(startMonth);

    for (let i = 0; i < numMonths; i++) {
      const timePeriodEl = document.createElement("div");
      timePeriodEl.className = "gantt-time-period";
      containerTimePeriods.appendChild(timePeriodEl);

      // add days of the week as children
      const currYear = month.getFullYear();
      const currMonth = month.getMonth() + 1;
      const numDays = getDaysInMonth(currYear, currMonth);

      for (let i = 1; i <= numDays; i++) {
        let dayEl = document.createElement("div");
        dayEl.className = "gantt-time-period";
        const dayOfTheWeek = getDayOfWeek(currYear, currMonth - 1, i - 1);
        const dayElSpan = document.createElement("span");
        dayElSpan.innerHTML = dayOfTheWeek;
        dayEl.appendChild(dayElSpan);
        timePeriodEl.appendChild(dayEl);
      }

      month.setMonth(month.getMonth() + 1);
    }
  }

Make sure to uncomment the createDaysOfTheWeekRow() function call in the createGrid function.

This function is similar to the previous createDaysRow function, the difference being that we add the days of the week instead of the day of the month number to the <span> element. We use our dayOfTheWeek utility function to determine the day of the week, which is displayed as a capitalized string of the first letter of its name. We use the current year, month, and day to calculate which day of the week it is. The dayOfTheWeek utility function makes use of the Date method getDay to determine this.

Creating a time period container

Let’s add the fifth function. Add the following createTaskRowsTimePeriods function above the "change" event listeners:

function createTaskRowsTimePeriods(startMonth, numMonths) {
    const dayElContainer = document.createElement("div");
    dayElContainer.className = "gantt-time-period-cell-container";
    dayElContainer.style.gridTemplateColumns = `repeat(${numMonths}, 1fr)`;

    containerTimePeriods.appendChild(dayElContainer);

    tasks.forEach((task) => {
      let month = new Date(startMonth);
      for (let i = 0; i < numMonths; i++) {
        const timePeriodEl = document.createElement("div");
        timePeriodEl.className = "gantt-time-period";
        dayElContainer.appendChild(timePeriodEl);

        const currYear = month.getFullYear();
        const currMonth = month.getMonth() + 1;

        const numDays = getDaysInMonth(currYear, currMonth);

        for (let i = 1; i <= numDays; i++) {
          let dayEl = document.createElement("div");
          dayEl.className = "gantt-time-period-cell";

          // color weekend cells differently
          const dayOfTheWeek = getDayOfWeek(currYear, currMonth - 1, i - 1);
          if (dayOfTheWeek === "S") {
            dayEl.style.backgroundColor = "#f7f7f7";
          }

          // add task and date data attributes
          const formattedDate = createFormattedDateFromStr(
            currYear,
            currMonth,
            i
          );
          dayEl.dataset.task = task.id;
          dayEl.dataset.date = formattedDate;
          timePeriodEl.appendChild(dayEl);
        }

        month.setMonth(month.getMonth() + 1);
      }
    });
  }

Make sure to uncomment the createTaskRowsTimePeriods() function call in the createGrid function.

This function creates a dayElContainer <div> element that will be the drop zone for the draggable task duration elements. We use the same grid-template-columns CSS styling that we used in the createMonthsRow function for the containerTimePeriods container. This is done so that the number of columns in the container is determined by the number of months in the selected time period.

We then create a row for each task by iterating through the tasks. For each task row, we loop through the months. For each month, we loop through each day of the month and create an empty cell. This nested loop is similar to the loops we used for the previous two functions: createDaysRow and createDaysOfTheWeekRow.

For each empty cell, we color the cell differently if it is a weekend day. We also add task and date data attributes. These will be used for positioning our task durations on the grid.

Adding task durations

Let’s add the sixth and final function that is called in the createGrid function, which will add the task durations as horizontal bars on our grid. Add the following addTaskDurations function above the "change" event listeners:

function addTaskDurations() {
    taskDurations.forEach((taskDuration) => {
      const dateStr = createFormattedDateFromDate(taskDuration.start);
      // find gantt-time-period-cell start position
      const startCell = containerTimePeriods.querySelector(
        `div[data-task="${taskDuration.task}"][data-date="${dateStr}"]`
      );

      if (startCell) {
        // taskDuration bar is a child of start date position of specific task
        createTaskDurationEl(taskDuration, startCell);
      }
    });
  }

Make sure to uncomment the addTaskDurations() function call in the createGrid function.

For each taskDuration passed into our Gantt chart component, we find the start position of where to place the task duration on our grid. This is stored in the startCell variable. We use our createFormattedDateFromDate utility function to convert each task duration’s start property, which is a Date object, into a string. The task duration task and start date is used to find the correct starting position on the grid by finding the cell with the matching data attributes for the task duration. If the start cell is found, we call the createTaskDurationEl function, which will create the task duration element and add it as a child to the cell at its starting position in the grid. Let’s now define this function. Add the createTaskDurationEl below the addTaskDurations function declaration:

function createTaskDurationEl(taskDuration, startCell) {
    const dayElContainer = containerTimePeriods.querySelector(
      ".gantt-time-period-cell-container"
    );
    const taskDurationEl = document.createElement("div");
    taskDurationEl.classList.add("taskDuration");
    taskDurationEl.id = taskDuration.id;

    const days = dayDiff(taskDuration.start, taskDuration.end);
    taskDurationEl.style.width = `calc(${days} * 100%)`;

    // append at start pos
    startCell.appendChild(taskDurationEl);

    return days;
  }

We pass in the task duration object and the start cell element as arguments. The dayElContainer element will be the drop zone for our task durations once we add drag-and-drop functionality.

We create a task duration element and give it the "taskDuration" class for CSS styling. It has a z-index of 1 so that it is placed on top of the grid. Its position is absolute, and the cell that it is placed on has a relative position so that the task duration is placed on its start cell.

In order for the task duration to span across the correct number of cells, we make use of our dayDiff utility function to determine how many days our task duration is. We use this value to calculate the width of the task duration element by setting its width to 100% of the cell width, which is a single day, multiplied by the number of days. The function returns days, which we will use when we add drag-and-drop functionality.

Making the Gantt chart functional

Now that we have created our Gantt chart UI, let’s turn our attention to how to make the Gantt chart functional.

Adding drag-and-drop functionality to task durations

Let’s add drag-and-drop functionality to our task durations so that we can change the position of the task duration elements on the grid. Add the following lines inside the createTaskDurationEl function, just above the startCell.appendChild(taskDurationEl); line:

// drag and drop
    taskDurationEl.draggable = "true";

    taskDurationEl.addEventListener("dragstart", (e) => {
      taskDurationEl.classList.add("dragging");
      // determine taskDuration element that was dragged
      taskDurationElDragged = e.target;
    });

    taskDurationEl.addEventListener("dragend", () => {
      taskDurationEl.classList.remove("dragging");
    });

The first thing we do is set the draggable property of the taskDurationEl to true. We don’t need this property for our drag and drop to work, but it is good for UX because it creates a “ghost” image of the task duration element that is attached to the mouse cursor as it is being dragged.

We then add two event listeners to the taskDurationEl: "dragstart" and "dragend". When the task duration element is being dragged, we add the class "dragging" to it. When the drag ends, we remove the class. We do this to style the task duration element that is being dragged. In our style.js file, we gave elements with the "dragging" class an opacity of 0.5. If you try to drag a task duration element and check the “Elements” tab in your dev tools, you will see that the "dragging" class is added when the drag starts and removed when the drag ends.

We also set the taskDurationElDragged variable to the task duration element that is being dragged. We will use this value later to remove the task duration element that was dragged, create a new task duration for the new position on the grid, and to update the task durations.

If you try to drag a task duration, you will see that the cursor will be changed to the “not-allowed” icon. This is because dragging and dropping an element inside of another element is disabled by default. You can read more about this in the following article: Using the HTML5 Drag and Drop API. To remove this default behavior, add the following lines of code under the "dragend" event listener we just added.:

 dayElContainer.addEventListener("dragover", (e) => {
      e.preventDefault();
    });

This adds a "dragover" event listener to the dayElContainer, which is our drag-and-drop zone. This event fires continuously as an element is dragged over it. We prevent the event default behavior using the preventDefault method. Our cursor will now not show the “not-allowed” icon in our drag-and-drop zone.

Let’s get the drag and drop to work. In the createTaskRowsTimePeriods function, add the following line of code just above the timePeriodEl.appendChild(dayEl); line:

dayEl.ondrop = onTaskDurationDrop;

We add the onDrop attribute to define the drop event handler for each cell in the drag-and-drop zone of the grid. The onTaskDurationDrop function is called when an element is dropped on a cell. Let’s define the onTaskDurationDrop function. Add the following lines below the createTaskDurationEl function:

function onTaskDurationDrop(e) {
    const targetCell = e.target;

    // prevent adding on another taskDuration
    if (targetCell.hasAttribute("draggable")) return;

    // find task
    const taskDuration = taskDurations.filter(
      (taskDuration) => taskDuration.id === taskDurationElDragged.id
    )[0];

    const dataTask = targetCell.getAttribute("data-task");
    const dataDate = targetCell.getAttribute("data-date");

    // remove old position from DOM
    taskDurationElDragged.remove();
    // add new position to DOM
    const daysDuration = createTaskDurationEl(taskDuration, targetCell);

    // get new task values
    // get start, calc end using daysDuration - make Date objects - change taskDurations
    const newTask = parseInt(dataTask);
    const newStartDate = new Date(dataDate);
    let newEndDate = new Date(dataDate);
    newEndDate.setDate(newEndDate.getDate() + daysDuration - 1);

    // update taskDurations
    taskDuration.task = newTask;
    taskDuration.start = newStartDate;
    taskDuration.end = newEndDate;

    const newTaskDuration = taskDurations.filter(
      (taskDuration) => taskDuration.id !== taskDurationElDragged.id
    );
    newTaskDuration.push(taskDuration);

    // update original / make API request to update data on backend
    taskDurations = newTaskDuration;
  }

We determine which cell the task duration element has been dropped on by accessing the target property of the event. We prevent adding the task duration to another task duration by checking if the targetCell has a draggable attribute. Only the task durations have this attribute.

We then find the task in the task durations array by using the dragged task duration element’s id. The taskDurationElDragged was determined at the start of the drag. We then get the task duration’s name and start date from its data attributes. We remove it from the DOM and create a new task duration element for the task duration’s new position using the createTaskDurationEl function.

Lastly, we update the taskDurations by removing the dragged task duration and adding the updated dragged task duration with its new position data.

Making task durations deletable

Now let’s make our task durations deletable by pressing the delete button when the task duration is in focus. Add the following lines in the createTaskDurationEl function, above the startCell.appendChild(taskDurationEl); line:

// add event listener for deleting taskDuration
    taskDurationEl.tabIndex = 0;
    taskDurationEl.addEventListener("keydown", (e) => {
      if (e.key === "Delete" || e.key === 'Backspace') {
        deleteTaskDuration(e);
      }
    });

We set the task duration element’s tabindex attribute to zero so that it can be focused, and add it to the sequential keyboard navigation.

Our "keydown" event listener listens for when the task duration element is in focus and the delete button is pressed. Should that occur, we call the deleteTaskDuration function. Let’s define this function below the onTaskDurationDrop function definition:

 function deleteTaskDuration(e) {
    const taskDurationToDelete = e.target;
    // remove from DOM
    taskDurationToDelete.remove();
    // update taskDurations
    const newTaskDurations = taskDurations.filter(
      (taskDuration) => taskDuration.id !== taskDurationToDelete.id
    );
    // update original / make API request to update data on backend
    taskDurations = newTaskDurations;
  }

In this function, we determine which task to delete by checking which task duration was in focus using the event’s target property. We then remove it from the DOM and update the task durations by filtering the deleted task duration out of the task durations array.

You will be able to delete your task durations now by clicking on them and pressing the delete button.

Making the “Add task duration” form functional

Let’s make the “Add task duration” form functional so that we can add task durations to our grid. Add the following event listener below the "change" event listeners:

addTaskDurationForm.addEventListener("submit", handleAddTaskDurationForm);

This listens for a "submit" event on our “Add task duration” form.

Let’s define the event handler function. Add the following handleAddTaskDurationForm function below the deleteTaskDuration function declaration:

function handleAddTaskDurationForm(e) {
    e.preventDefault();
    const task = parseInt(e.target.elements["select-task"].value);
    const start = e.target.elements["start-date"].value;
    const end = e.target.elements["end-date"].value;
    const startDate = new Date(start);
    const endDate = new Date(end);

    const timeStamp = Date.now();
    const taskDuration = {
      id: `${timeStamp}`,
      start: startDate,
      end: endDate,
      task: task,
    };

    // add task duration
    taskDurations.push(taskDuration);
    // find gantt-time-period-cell start position
    const startCell = containerTimePeriods.querySelector(
      `div[data-task="${taskDuration.task}"][data-date="${start}"]`
    );

    if (startCell) {
      // taskDuration bar is a child of start date position of specific task
      createTaskDurationEl(taskDuration, startCell);
    }
  }

The first thing this event handler function does is prevent the “submit event” default behavior. This prevents the form from being submitted via a GET request, which would cause a page refresh. We would lose the changes that we made as we are not persisting the data changes.

We then get the new task name, start date, and end date from the form inputs. We create a timestamp using Date.now() to create a unique ID for our new task duration. We then use these values to create a taskDuration object and add it to the task durations data array.

Lastly, we create a task duration element and add it to the grid, if we can find its start position. You will now be able to add tasks to your Gantt chart component from the form.

Making tasks editable

The task inputs can be edited, but they do not update the tasks data array, and the edits don’t update options in the “Which task?” <select> element of the “Add task duration” form.

Let’s first create a function that handles updating the edited tasks. Add the following updateTasks function below the handleAddTaskDurationForm function definition:

function updateTasks(e) {
    const { id } = e.target.parentNode;
    const { value } = e.target.parentNode.firstChild;
    const idNum = parseInt(id);
    let newTasks = tasks.filter((task) => task.id !== idNum);
    newTasks.push({ id: idNum, name: value });

    newTasks = newTasks.sort((a, b) => a.id - b.id);
    // update original / make API request to update data on backend
    tasks = newTasks;
  }

We get the id of the task to update from the target event’s parentNode. The target will be the task <input>, which has a parent element with an id attribute set to the task id we set in the createTaskRows function. We then remove the task that was edited from the tasks data array and add a new task with the updated task name to update the tasks. We also sort the tasks by ID, that is, the order in which they are created.

To call updateTasks when a task input value is changed, we need to add a "change" event listener to each task input. Add the following lines to the createTaskRows function below the taskRowElInput.value = task.name; line:

      // update task name
      taskRowElInput.addEventListener("change", updateTasks);

The tasks data array will be updated when the task input is changed.

We also need to update the “Which task?” <select> element of the “Add task duration” form. Add the following code to the end of the updateTasks function:

   let newTaskOptionsHTMLStrArr = [];
    tasks.forEach((task) => {
      newTaskOptionsHTMLStrArr.push(
        `<option value="${task.id}">${task.name}</option>`
      );

      taskSelect.innerHTML = `
        ${newTaskOptionsHTMLStrArr.join("")}
      `;
    });

This will update the taskSelect <select> element with options that reflect the updated tasks state.

Making tasks deletable

Now let’s make the delete task buttons work. In the createTaskRows function below taskRowElDelBtn.innerText = "✕"; line, add the following line:

     taskRowElDelBtn.addEventListener("click", deleteTask);

This adds a "click" event listener to each task delete button. Let’s add the deleteTask function that is called when the click event is fired. Add the following deleteTask function below the updateTasksfunction:

function deleteTask(e) {
    const id = parseInt(e.target.parentNode.id);
    // filter out task to delete
    const newTasks = tasks.filter((task) => task.id !== id);
    // update original / make API request to update data on backend
    tasks = newTasks;

    // delete any taskDurations associated with the task
    const newTaskDurations = taskDurations.filter(
      (taskDuration) => taskDuration.task !== id
    );
    taskDurations = newTaskDurations;
    createGrid();
  }

This function gets the id of the task from its parentNode, like we did for the <input> in the updateTasks function. We then filter out the task to delete from the tasks data array to update the tasks. We also delete any task durations that are associated with the deleted task by filtering out any task durations that have a task id that matches the deleted task’s id.

You will now be able to delete tasks by clicking the delete button next to each task name input.

Making the “Add task” form functional

To make the add task form functional, we will first create a "submit" event listener. Add the following line to the GanttChart function, at the bottom:

addTaskForm.addEventListener("submit", handleAddTaskForm);

We need to define the handleAddTaskForm function that is called when the “Add task” form is submitted. Add the following handleAddTaskForm function below the handleAddTaskDurationForm function definition:

 function handleAddTaskForm(e) {
    e.preventDefault();
    const newTaskName = e.target.elements[0].value;
    // find largest task number, add 1 for new task - else could end up with tasks with same id
    const maxIdVal = tasks.reduce(function (a, b) {
      return Math.max(a, b.id);
    }, -Infinity);
    // create new task
    tasks.push({ id: maxIdVal + 1, name: newTaskName });
    // re-create grid
    createGrid();
  }

We first prevent the default "submit" event behavior, and then get the new task name value from the form. We use the reduce array method to determine the new task id. The task id values are numbers that represent the order in which they were created. They are sorted by their id. We find the largest current task id, and then add one to it to create the id for the new task.

We then call the createGrid function to re-render the grid so that it will show the new task row.

We now have a working basic Gantt chart component, but you might like to make some improvements to it.

Next steps

There are many ways you can add to or improve the Gantt chart component. Here are some things that you might want to try:

Improve the styling. The screenshot shown has some extra CSS not included in the examples above, but which you can find in the GitHub repository.
Make the number of days that the task durations span editable.
Make the tasks reorderable.
Sanitize the task and task duration data as setting user-supplied data using innerHTML is a security risk.
Add configuration arguments or properties that will allow a user to easily change properties of the Gantt chart component, such as the styling or theme.
Persist the data in a database.
Make the component a web component so that you have a nicely encapsulated custom HTML element.

A fully featured Gantt chart component that could be used for large projects would include many other advanced features such as:

Scheduling conflict resolution.
Handling time-zone differences.
Grouping of tasks.
Extra information labels.
Undo and redo functionality.
Complex task and task duration customization.
Exporting to Excel, PDF, or as an image.
Performance optimizations for big data sets.
Integration with other project management tools, such as task boards.

Build or buy?

This article gives you a starting point for building your own Gantt chart. If you’re instead looking to buy an off-the-shelf battle-tested solution that just works, take a look at some examples of our Bryntum Gantt Chart.