Task Scheduling and Markers in Blazor Gantt Chart
Tags: blazor, development, gantt, web
Published: 2023-01-11 12:53:11

---
title: Task Scheduling and Markers in Blazor Gantt Chart
published: true
date: 2023-01-11 11:07:13 UTC
tags: blazor, development, gantt, web
canonical_url: https://www.syncfusion.com/blogs/post/task-scheduling-and-markers-in-blazor-gantt-chart.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qp4qaky08pehhapy84kz.png
---
The [Syncfusion Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart "Syncfusion Blazor Gantt Chart") is a project management tool that provides a Microsoft Project-like interface for scheduling and managing projects.

Once computers introduced new ways of working, project managers found they could save time creating and updating their Gantt charts. Gantt charts help us to automate this process to support more advanced requirements, like creating task dependencies, adding milestones, or identifying the critical path of a project plan.

In this blog, I’ll talk about the task scheduling and marker features of Syncfusion’s Blazor Gantt Chart.

## Task Scheduling

### What is scheduling?

Gantt charts show what work is scheduled on a specific day. They also allow you to view a project’s start and end dates along with the progress made. Apart from individual task progress, you can also look at a task’s contribution to the completion of a parent task.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Gantt-Chart-Displaying-Scheduled-Tasks-and-Their-Progress-1.png" alt="Gantt Chart Displaying Scheduled Tasks and Their Progress" style="width:100%">

  <figcaption>Gantt Chart Displaying Scheduled Tasks and Their Progress</figcaption>

</figure>

### How does scheduling tasks help project planning?

Scheduling tasks is key to forecasting the completion of a project and enhancing communication with a team. Using a Gantt chart is like putting a bridge between your initial project plan and its execution. Gantt charts allow you to set accurate deadlines.

The Gantt Chart control provides different ways to schedule a task to meet any requirement:

- [Automatically](#auto-scheduling-mode)
- [Manually](#manual-scheduling-mode)
- [Custom](#custom-scheduling-mode)
- [Unscheduled](#unscheduled-tasks)
- [Baseline](#baseline)

#### <a name="auto-scheduling-mode">Auto-scheduling mode</a>

Syncfusion’s Blazor Gantt Chart is more convenient to handle and add information to. With [auto](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks/#automatically-scheduled-tasks "Automatically scheduled tasks in Blazor Gantt Chart documentation") mode, tasks in the Gantt Chart are validated for their start and end date values. These validations are based on child task duration and data value mismatch.

Auto-scheduling mode decreases the time spent planning tasks. Let’s see some examples that clearly explain this mode.

**Example 1**

```csharp
new TaskData() {
    TaskId = 5,
    TaskName = "Project estimation",
    StartDate = new DateTime(2019, 03, 29),
    EndDate = new DateTime(2019, 04, 2),
    Duration="4"
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Auto-scheduling-in-Blazor-Gantt-Chart-1.png" alt="Auto-scheduling in Blazor Gantt Chart" style="width:100%">

  <figcaption>Auto-scheduling in Blazor Gantt Chart</figcaption>

</figure>
Here the **EndDate** value in **dataSource** is on 2 April 2019, yet the taskbar is rendered up to 3 April 2019 since the duration is only four days. Also, considering [Saturday and Sunday](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks/#weekend-or-non-working-days "Automatically schedule weekend or non-working days in Blazor Gantt Chart") as non-working days, the end date is auto-validated as 3 April 2019.

**Example 2**

```csharp
new TaskData() {
    TaskId = 1,
    TaskName = "Project initiation",
    StartDate = new DateTime(2019, 03, 28),
    EndDate = new DateTime(2019, 07, 28), // This is end of parent record.
    Duration="4"
},
new TaskData() {
    TaskId = 2,
    TaskName = "Identify Site location",
    StartDate = new DateTime(2019, 03, 29),
    Progress = 30,
    ParentId = 1,
    Duration="2" // Child record duration.
 },
 new TaskData() {
     TaskId = 3,
     TaskName = "Perform soil test",
     StartDate = new DateTime(2019, 03, 29),
     ParentId = 1,
     Duration="4" // Child record duration
 },
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Auto-scheduling-Parent-Child-Tasks-in-Blazor-Gantt-Chart-1.png" alt="Auto-scheduling Parent-Child Tasks in Blazor Gantt Chart" style="width:100%">

  <figcaption>Auto-scheduling Parent-Child Tasks in Blazor Gantt Chart</figcaption>

</figure>
In this example, the end date value of the parent record is 28 July 2019. Yet the parent row’s taskbar is rendered only until 3 April 2019. This is because parent row duration is auto-validated, considering its child-record durations. Since the maximum end date of the child record is 3 April 2019, the end date of the parent record is auto-validated to 3 April 2019.

#### <a name="manual-scheduling-mode">Manual scheduling mode</a>

The Gantt chart provides an option to auto-validate tasks to optimize task scheduling. We can schedule task dates as planned by the project managers by skipping the optimizations or validations. To do so, we can use the [manual mode](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks/#manually-scheduled-tasks "Manually scheduled tasks in Blazor Gantt Chart").

Let’s see an example.

```csharp
new TaskData() {
     TaskId = 1,
     TaskName = "Project initiation",
     StartDate = new DateTime(2019, 03, 28),
     Duration="4"
},
```

The parent record’s start and end dates are 29 March 2019 and 31 March 2019, respectively.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Manual-Scheduling-in-Blazor-Gantt-Chart-1.png" alt="Manual Scheduling in Blazor Gantt Chart" style="width:100%">

  <figcaption>Manual Scheduling in Blazor Gantt Chart</figcaption>

</figure>
The baseline taskbar, drawn in gray (where the red arrow points), is rendered with values found in **DataSource** without any validation. Though in manual mode, an auto-validated taskbar will also be rendered below the manually scheduled baseline taskbar.

The previous image shows that the manually scheduled baseline taskbar does not consider weekends, holidays, and child tasks.

#### <a name="custom-scheduling-mode">Custom</a>

[Custom mode](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks/#custom "Customize tasks scheduling in Blazor Gantt Chart") is a combination of both auto and manual modes. You can specify which records need to be auto-validated and which ones need to be manually scheduled.

#### <a name="unscheduled-tasks">Unscheduled tasks</a>

We may have some uncertain tasks, such as not having a start or end date or not having both date values, which are unscheduled tasks. We can represent these unscheduled tasks by partially rendering the taskbar in the Gantt Chart.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Unscheduled-Task-in-Blazor-Gantt-Chart-1.png" alt="Unscheduled Task in Blazor Gantt Chart" style="width:100%">

  <figcaption>Unscheduled Task in Blazor Gantt Chart</figcaption>

</figure>

In the previous image:

- The first record has no start and end date; it has only a duration value.
- The second record has only the start date.
- The third record has only an end date.
- The fourth record is a scheduled task.
- The fifth record has no start or end date. And since the duration value is 0, it is marked as a milestone.

#### <a name="baseline">Baseline</a>

To get a better view of a project’s deviation, a [baseline](https://blazor.syncfusion.com/documentation/gantt-chart/baseline/ "Baseline in Blazor Gantt Chart") works well. It shows the deviation between the planned and actual dates of a project. This feature is beneficial when you need to react quickly to project deviations. We should provide the deviation values along with **DataSource** to the Gantt control, and the Gantt chart will provide a UI representation of the deviations as taskbars.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Baseline-in-Blazor-Gantt-Chart-1.png" alt="Baseline in Blazor Gantt Chart" style="width:100%">

  <figcaption>Baseline in Blazor Gantt Chart</figcaption>

</figure>

## Markers

Markers are indicators in the Gantt chart timeline highlighting a task or a specific date.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Markers-in-Blazor-Gantt-Chart-1.png" alt="Markers in Blazor Gantt Chart" style="width:100%">

  <figcaption>Markers in Blazor Gantt Chart</figcaption>

</figure>
In the previous image, **Research phase** is a marker that denotes the product analysis that needs to be completed within that timeline.

### Why are markers used?

In a large project or resource planning chart, markers highlight key events, deadlines, or reference points.

There are different types of markers to choose from based on the application scenario.

- [Event markers](#event-markers)
- [Data markers](#data-markers)
- [Holidays](#holidays)

#### Event markers

A vertical line drawn on a particular timeline in a Gantt chart highlights the entire tasks in a project.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Event-Marker-in-Blazor-Gantt-Chart-1.png" alt="Event Marker in Blazor Gantt Chart" style="width:100%">

  <figcaption>Event Marker in Blazor Gantt Chart</figcaption>

</figure>

#### Data markers

Data markers display information in addition to a regular taskbar. We can use them to display a date or any other value.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Data-Markers-in-Blazor-Gantt-Chart-1.png" alt="Data Markers in Blazor Gantt Chart" style="width:100%">

  <figcaption>Data Markers in Blazor Gantt Chart</figcaption>

</figure>

#### Holidays

Different localities have different non-working days, and you can map the non-working days on a project timeline in a Gantt chart. This is helpful for task scheduling for working days.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Mapping-Holidays-in-Blazor-Gantt-Chart-1.png" alt="Mapping Holidays in Blazor Gantt Chart" style="width:100%">

  <figcaption>Mapping Holidays in Blazor Gantt Chart</figcaption>

</figure>

You can also customize [weekend holidays](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks/#weekend-or-non-working-days "Scheduling weekend or non-working days in Blazor Gantt Chart") in the timeline.

## Resources

For more information, refer to the GitHub project called [Task Scheduling and Markers in the Blazor Gantt Chart component](https://github.com/SyncfusionExamples/task-scheduling-and-markers-in-blazor-gantt-chart "Demo: Task Scheduling and Markers in the Blazor Gantt Chart").

## Conclusion

Thank you for reading this blog, where I addressed the Gantt chart’s task scheduling and marker features. For more details, refer to the [Blazor Gantt Chart documentation](https://blazor.syncfusion.com/documentation/gantt-chart/getting-started "Getting started with Blazor Gantt Chart"). You can also use the sample uploaded [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-1750312392.zip "Demo: Blazor Gantt Chart") for better reference.

You can download our [free trial](https://www.syncfusion.com/downloads/blazor/confirm "Free evaluation of the Syncfusion Blazor components") if you want to try this Syncfusion component.

Contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2022 Volume 4 Is Here! ](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-4-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 4 Is Here!")
- [What’s New in Syncfusion Blazor: 2022 Volume 4 ](https://www.syncfusion.com/blogs/post/whats-new-in-syncfusion-blazor-2022-volume-4.aspx "Blog: What’s New in Syncfusion Blazor: 2022 Volume 4")
- [Implement User Tagging in Blazor Rich Text Editor with Mention Component](https://www.syncfusion.com/blogs/post/user-tagging-in-blazor-rich-text-editor.aspx "Blog: Implement User Tagging in Blazor Rich Text Editor with Mention Component")
- [Boosting Performance of Blazor Gantt Chart Using Virtualization](https://www.syncfusion.com/blogs/post/boosting-performance-of-blazor-gantt-chart-using-virtualization.aspx "Blog: Boosting Performance of Blazor Gantt Chart Using Virtualization")