Schedule Your Tasks Like A Pro in Blazor Applications
Tags: blazor, webdev, csharp, dotnet
Published: 2021-09-15 11:49:40

---
title: Schedule Your Tasks Like A Pro in Blazor Applications
published: true
date: 2021-09-15 11:02:27 UTC
tags: blazor, webdev, csharp, dotnet
canonical_url: https://www.syncfusion.com/blogs/post/schedule-your-tasks-like-a-pro-in-blazor-applications.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/js5ry0yco22zqgdx7gcm.png
---

Task scheduling is a complex task and is mandatory to improve productivity. It depends on many factors, like resource availability, task deadlines, and one task’s dependency on others being completed. To effectively handle task scheduling, you need a powerful tool to handle the sequence and timeframes of tasks.

The Syncfusion [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart "Link to Blazor Gantt Chart") is a project management tool. It provides a [Microsoft Project](https://www.microsoft.com/en-in/microsoft-365/project/project-management-software "Link to Microsoft Project")-like interface for scheduling and managing projects in a Blazor application. Its intuitive user interface lets you visually manage tasks, resources, and task relationships in a project.

In this blog, we will see how to use the task scheduling and markers features in the Blazor Gantt Chart to perfectly schedule and manage your tasks.

## Task scheduling

Using a Gantt chart is like putting a bridge between your initial project plan and the execution level. With the Gantt charts, you can set reasonable deadlines to finish a project.

You can use the Blazor Gantt chart to schedule tasks that need to be done on a specific day. It also displays the start and end dates of a project in one simple view along with the progress made. Apart from the individual task progress, you can also have a look at the overall progress made in the parent task using our Blazor Gantt Chart.

![Task Scheduling in Blazor Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Task-Scheduling-in-Balzor-Gantt-Chart.png)<figcaption>Task Scheduling in Blazor Gantt Chart</figcaption>

### Scheduling modes

The Syncfusion Blazor Gantt Chart supports the following scheduling modes:

- [Auto](#auto-scheduling)
- [Manual](#manual-scheduling)
- [Custom](#custom-scheduling)
- [Unscheduled](#unscheduled-tasks)
- [Baseline](#baseline)

#### Auto scheduling

In the [auto scheduling mode](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks/#automatically-scheduled-tasks "Link to Automatically Scheduled Tasks in Blazor Gantt Chart documentation"), the Blazor Gantt Charts validate and schedule the tasks based on their start and end date values. These validations are based on the child tasks with various factors like duration, holidays, weekends, and predecessors.

This auto scheduling mode helps avoid excess planning time for a task. Let’s see some examples to have a clear picture of 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"
        }
```

![Auto Scheduling Mode in Blazor Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Auto-Scheduling-Mode-in-Blazor-Gantt-Chart.png)

Here, the EndDate value in dataSource is on April 2, 2019. But the taskbar renders up to April 3, 2019, since the duration is set to four days. The Gantt Chart considers the [weekends ( Saturday and Sunday)](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks/#weekend-or-non-working-days "Link to Weekend or Non-working Days in Blazor Gantt Chart documentation") as nonworking days. So, the end date is auto validated to April 3, 2019.

**Note:** You can also customize the weekend days.

**Example 2:**

```csharp
new TaskData() {
            TaskId = 1,
            TaskName = "Project initiation",
            StartDate = new DateTime(2019, 03, 28),
            EndDate = new DateTime(2019, 07, 28), // Here, this is the 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.
        },
```

![Auto Scheduling Hierarchy Records in Blazor Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Auto-Scheduling-Hierarchy-Records-in-Blazor-Gantt-Chart.png)

In this example, the end date value of the parent record is July 28, 2019. Yet, the Blazor Gantt Chart renders the parent row’s taskbar only up to April 3, 2019. This is because the parent row duration is auto validated considering its child records duration. The maximum end date for its child record is April 3 and so the parent record is auto validated to April 3, 2019. Similarly, the start date of the parent task is auto validated to March 29 based on the start date of its children.

#### Manual scheduling

Although the Blazor Gantt Chart provides an option to auto validate tasks to optimize their scheduling, you can also [manually schedule](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks/#manually-scheduled-tasks "Link to Manually Scheduled Tasks in Blazor Gantt Chart documentation") tasks. This helps to schedule dates as planned by the project managers without any optimizations or validations.

Let’s see an example.

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

![Manual Scheduling in Blazor Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Manual-Scheduling-in-Blazor-Gantt-Chart.png)  
Here, the parent record’s start date is March 28, 2019, and the duration is four days in the data source.

The baseline taskbar, drawn in grey color (where the red arrow points), is rendered with values as it is in the data source (March 28, 2019 and March 31, 2019 ) without any validation. It does not consider the weekends, holidays, and child tasks.

In manual mode, the auto validated taskbar is also rendered below the manually scheduled baseline taskbar (between March 29, 2019 and April 3, 2019).

#### Custom scheduling

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

![Custom Scheduling Mode](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Custom-Scheduling-Mode.png)

**Note:** For more details, refer to the [Example of Scheduling Mode in Blazor Gantt Chart Component](https://blazor.syncfusion.com/demos/gantt-chart/scheduling-mode "Link to Example of Scheduling Modes in Blazor Gantt Chart Component") demo.

#### Unscheduled tasks

Also, you can include the unscheduled tasks of a project without any definite schedule dates in our Blazor Gantt Chart. You can create or update these tasks by partially rendering the taskbar with any one of the specifics: start date, end date, duration, or none.

Refer to the following screenshot.

![Unscheduled Tasks in Blazor Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Unscheduled-Tasks-in-Blazor-Gantt-Chart.png)<figcaption>Unscheduled Tasks in Blazor Gantt Chart</figcaption>

In the previous image:

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

**Note:** For more details, refer to the [Example of Unscheduled Tasks in the Blazor Gantt Chart Component](https://blazor.syncfusion.com/demos/gantt-chart/unscheduled-task "Link to Example of Unscheduled Task in Blazor Gantt Chart Component") demo.

#### Baseline

The [baseline scheduling mode](https://blazor.syncfusion.com/documentation/gantt-chart/baseline/ "Link to Baseline in Blazor Gantt Chart Component documentation") enables users to view the deviation between the planned and actual dates of a project. This feature is beneficial when we need to act quickly for project deviations. We have to provide the deviation values along with the data source. Then, the Blazor Gantt Chart will provide a UI representation for the deviations below the main taskbar.

Refer to the following code example.

```csharp
new TaskData() {
                    TaskId = 3,
                    TaskName = "Perform soil test",
                    StartDate = new DateTime(2019, 04, 02),
                    BaselineStartDate = new DateTime(2019, 04, 04),
                    BaselineEndDate = new DateTime(2019, 04, 09),
                    Duration = "8",
                    Progress = 50
                },
```

![Baseline in Blazor Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Baseline-in-Blazor-Gantt-Chart.png)<figcaption>Baseline in Blazor Gantt Chart</figcaption>

**Note:** For more details, refer to the [Example of Baseline in Blazor Gantt Chart Component](https://blazor.syncfusion.com/demos/gantt-chart/baseline "Link to Example of Baseline in Blazor Gantt Chart Component") demo.

## Markers

In a complex project or resource planning chart, one may need to highlight some key events, deadlines, or reference points for better understanding.

You can achieve this using markers in our Blazor Gantt Chart. Use these indicators to highlight tasks, specific dates, and whatever you want in the Gannt Chart timeline.

![Markers in Blazor Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Markers-in-Blazor-Gantt-Chart.png)<figcaption>Markers in Blazor Gantt Chart</figcaption>

In the previous image,  **Research Phase** is a marker that denotes analysis of the product that needs to be completed within that timeline.

### Types of markers

The types of markers available in the Blazor Gantt Chart are:

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

#### Event markers

The [event marker](https://blazor.syncfusion.com/documentation/gantt-chart/event-markers "Link to Event Markers in Blazor Gantt Chart Component") is shown by drawing a vertical line on a timeline to highlight that time for all the tasks in a project. You can use this to highlight the important events in a project.

![Event Marker in Blazor Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Event-Marker-in-Blazor-Gantt-Chart.png)<figcaption>Event Marker in Blazor Gantt Chart</figcaption>

**Note:** For more details, refer to the [Example of Event Markers in the Blazor Gantt Chart Component](https://blazor.syncfusion.com/demos/gantt-chart/eventmarkers?theme=bootstrap4 "Link to Example of Event Markers in Blazor Gantt Chart Component") demo.

#### Data markers

The [data marker](https://blazor.syncfusion.com/documentation/gantt-chart/data-markers "Link to Data Markers in Blazor Gantt Chart Component") helps to display additional information with indicators like a tooltip along with the regular taskbar. You can use this to display events for a specific task on the timeline on any given date. Also, you can represent more than one data marker in a task.

![Data Markers in Blazor Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Data-Markers-in-Blazor-Gantt-Chart-1.png)<figcaption>Data Markers in Blazor Gantt Chart</figcaption>

#### Holidays

Different localities have different nonworking days. The Gantt Chart provides support to map the [nonworking days](https://blazor.syncfusion.com/documentation/gantt-chart/holidays "Link to Holidays in Blazor Gantt Chart Component") on a project timeline. You can easily schedule tasks for the working days alone in your Blazor app. It is also possible to customize the [weekend holidays](https://blazor.syncfusion.com/documentation/gantt-chart/scheduling-tasks/#weekend-or-non-working-days "Link to Weekend or Non-working Days") in the timeline.

Refer to the following screenshot.

![Holiday Marker in Blazor Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Holiday-Marker-in-Blazor-Gantt-Chart.png)<figcaption>Holiday Marker in Blazor Gantt Chart</figcaption>

**Note:** For more details, refer to the [Example of Holidays in the Blazor Gantt Chart Component](https://blazor.syncfusion.com/demos/gantt-chart/holidays?theme=bootstrap4 "Link to Example of Holidays in Blazor Gantt Chart Component") demo.

## GitHub reference

Also, you can download the entire project setup for the [Blazor Gantt Chart on GitHub](https://github.com/syncfusion/blazor-samples/tree/master/Pages/GanttChart "Link to Blazor Gantt Chart demos on GitHub").

## Conclusion

Thanks for reading! In this blog post, we have seen how the task scheduling and markers features in the [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart "Link to Blazor Gantt Chart") help us elegantly schedule our projects. You can use the sample uploaded [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-1750312392.zip "Link to download Blazor Gantt Chart project demo") for more references. The Blazor Gantt Chart’s rich feature set includes data binding, task relationships, filtering, globalization, localization, and more. Use them to schedule your tasks like a pro in a Blazor app!

Our Gantt Chart is also available in our [Blazor](https://www.syncfusion.com/blazor-components/blazor-gantt-chart "Link to Blazor Gantt Chart"), ASP.NET ( [Core](https://www.syncfusion.com/aspnet-core-ui-controls/gantt-chart "Link to ASP.NET Core Gantt Chart"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/gantt-chart "Link to ASP.NET MVC Gantt Chart"), and [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/gantt-chart "Link to ASP.NET Web Forms Gantt Chart")), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart "Link to JavaScript Gantt Chart"), [Angular](https://www.syncfusion.com/angular-ui-components/angular-gantt-chart "Link to Angular Gantt Chart"), [React](https://www.syncfusion.com/react-ui-components/react-gantt-chart "Link to React Gantt Chart"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-gantt-chart "Link to Vue Gantt Chart"), [WPF](https://www.syncfusion.com/wpf-ui-controls/gantt "Link to WPF Gantt Chart"), and [UWP](https://www.syncfusion.com/uwp-ui-controls/gantt "Link to UWP Gantt Chart") platforms. Try out them and enhance your productivity!

If you have any queries, please let us know in the comments section below. You can also contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/ "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [10 Reasons You Should Choose Syncfusion Blazor DataGrid](https://dev.to/kartik110895/10-reasons-you-should-choose-syncfusion-blazor-datagrid-2kog-temp-slug-7160365 "Link to 10 Reasons You Should Choose Syncfusion Blazor DataGrid blog")
- [5 Reasons Why You Should Replace the Default Navigation Bar with Syncfusion’s Blazor Sidebar](https://dev.to/kartik110895/5-reasons-why-you-should-replace-the-default-navigation-bar-with-syncfusion-s-blazor-sidebar-1n88-temp-slug-1856529 "Link to 5 Reasons Why You Should Replace the Default Navigation Bar with Syncfusion’s Blazor Sidebar blog")
- [Exploring Syncfusion Blazor Components on Cross-Platform Desktop Apps Using Electron](https://dev.to/syncfusion/exploring-syncfusion-blazor-components-on-cross-platform-desktop-apps-using-electron-1g9k "Link to Exploring Syncfusion Blazor Components on Cross-Platform Desktop Apps Using Electron blog")
- [How to Efficiently Group a Large Volume of Data in Blazor DataGrid](https://dev.to/karthickramasamy08/how-to-efficiently-group-a-large-volume-of-data-in-blazor-datagrid-4chj-temp-slug-4411555 "Link to How to Efficiently Group a Large Volume of Data in Blazor DataGrid blog")