GanttChart.razor

@page "/ganttchart"
@inject IJSRuntime JSRuntime

<h3>Gantt Chart</h3>
<div id="gantt"></div>

<button @onclick="GetGanttChartData">Get Gantt Chart Data</button>


@code {
    private async Task GetGanttChartData()
    {
        {
            var ganttData = await JSRuntime.InvokeAsync<string>("eval", "JSON.stringify(window.gantt.tasks)");
            Console.WriteLine(ganttData);
        }
        {
            var ganttDataJson = await JSRuntime.InvokeAsync<string>("eval", "JSON.stringify(window.gantt.tasks)");
            var ganttDataList = System.Text.Json.JsonSerializer.Deserialize<List<GanttTask>>(ganttDataJson);
            Console.WriteLine(ganttDataList);
            foreach (var ganttTask in ganttDataList)
            {
                Console.WriteLine($"Id: {ganttTask.Id}, Name: {ganttTask.Name}, Start: {ganttTask.Start}, End: {ganttTask.End}, Progress: {ganttTask.Progress}");
            }
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var tasks = new[]
            {
                new { id = "Task 1", name = "Redesign website", start = "2025-03-01", end = "2025-03-05", progress = 20 },
                new { id = "Task 2", name = "Write new content", start = "2025-03-06", end = "2025-03-10", progress = 50 },
                new { id = "Task 3", name = "Launch website", start = "2025-03-11", end = "2025-03-15", progress = 20 }
            };

            await JSRuntime.InvokeVoidAsync("eval", $@"var tasks = {System.Text.Json.JsonSerializer.Serialize(tasks)};window.gantt = new Gantt('#gantt', tasks);");
        }
    }
}
@code{
    public class GanttTask
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
        public int Progress { get; set; }
    }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.5.0/frappe-gantt.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.5.0/frappe-gantt.min.js"></script>