Easy Steps to Synchronize JIRA Calendar Tasks With the Blazor Scheduler
Tags: blazor, webdev, csharp, dotnet
Published: 2021-08-23 13:32:33

---
title: Easy Steps to Synchronize JIRA Calendar Tasks With the Blazor Scheduler
published: true
date: 2021-08-22 07:05:04 UTC
tags: blazor, webdev, csharp, dotnet
canonical_url: https://www.syncfusion.com/blogs/post/easy-steps-to-synchronize-jira-calendar-tasks-with-the-blazor-scheduler.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gt04uqcgvfmhodosspkx.png
---

Dynamic tasks are vital when following the [Scrum](https://en.wikipedia.org/wiki/Scrum_(software_development) "Link to the Wikipedia page for Scrum (software development)") framework in developing a product. Properly managing different states of multiple tasks assigned to different members of the team might be a nightmare. To effectively handle these tasks, you need a versatile tool to effectively manage them.

Our Syncfusion [Blazor Scheduler component](https://www.syncfusion.com/blazor-components/blazor-scheduler "Link to Blazor Scheduler") is a fully featured event calendar that helps users manage their time and projects efficiently. It facilitates easy resource scheduling and the rescheduling of events or tasks (appointments) through editor pop-ups, drag-and-drop operations, and resizing actions.

In this blog post, I will quickly explain how to synchronize [Jira](https://en.wikipedia.org/wiki/Jira_(software) "Link to the Wikipedia page for Jira (software)") calendar tasks and customizations with the Syncfusion Blazor Scheduler component for effective task management.

Let’s get started!

## Project setup

First things first, create a simple Blazor server-side Scheduler application. Refer to the [Getting Started with Blazor Scheduler Component](https://blazor.syncfusion.com/documentation/scheduler/getting-started/#getting-started "Link to Getting Started with Blazor Scheduler Component") documentation for an introduction to configuring the common specifications.

## Initialize the Syncfusion Blazor Scheduler component

Now, add the Syncfusion Blazor Scheduler component to the Index.razor page and set the value of the **TValue** property as **AppointmentModel**. Then, define the Scheduler component’s  **AppointmentModel** class.

Refer to the following code example.

```csharp
<SfSchedule TValue="AppointmentModel">
</SfSchedule>
public class AppointmentModel
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { get; set; }
        public string CssClass { get; set; }
    }
```

## Generate Jira API token

Now, generate the Jira API token. Refer to the [manage API tokens for your Atlassian account documentation](https://support.atlassian.com/atlassian-account/docs/manage-api-tokens-for-your-atlassian-account/ "Link to Manage API tokens for your Atlassian account documentation") to generate the token from your Atlassian account.

## Get tasks from Jira

Now, create an HTTP request and read the Jira tasks from the Rest API, as mentioned in the following code.

```csharp
 HttpClient client = new HttpClient();
 var byteArray = new UTF8Encoding().GetBytes("mail:token");
 client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", Convert.ToBase64String(byteArray));
 var request = new HttpRequestMessage(HttpMethod.Get, "Rest API Url");
 var response = await client.SendAsync(request);
```

## Synchronizing Jira Calendar tasks with the Blazor Scheduler

Next, deserialize the HTTP response and form the appointment data. Then, assign the resultant value to the  **DataSource**  property in the Blazor Scheduler.

Refer to the following code example.

```csharp
<SfSchedule TValue="AppointmentModel">
        <ScheduleEventSettings DataSource="@DataSource">
    </ScheduleEventSettings>
    <ScheduleViews>
        <ScheduleView Option="View.Month"></ScheduleView>
    </ScheduleViews>
</SfSchedule>   

 protected override async Task OnInitializedAsync()
    {
        HttpClient client = new HttpClient();
        var byteArray = new UTF8Encoding().GetBytes("mail:token");
        client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", Convert.ToBase64String(byteArray));
        var request = new HttpRequestMessage(HttpMethod.Get, "Rest api url");
        var response = await client.SendAsync(request);
        if (response.IsSuccessStatusCode && DataSource == null)
        {
            var responseStream = await response.Content.ReadAsStringAsync();
            var data = JsonConvert.DeserializeObject<JIRA>(responseStream);
            List<AppointmentModel> events = new List<AppointmentModel>();
            foreach (var issue in data.Issues)
            {
                events.Add(new AppointmentModel()
                {
                    Id = issue.Id,
                    Subject = issue.Fields.Summary,
                    Description = issue.Fields.Description,
                    StartTime = issue.Fields.Created,
                    EndTime = issue.Fields.Created.AddHours(1),
                    IsAllDay = true,
                    CssClass = GetCssClass(issue.Fields.Priority.Name)
                });
            }
            DataSource = events;
        }
        else
        {
            getTasksError = true;
        }
    }
```

## Customize appointment cell header

You can customize a cell’s header by using the **CellHeaderTemplate** option in the **ScheduleTemplates**.

Refer to the following code example to show the total number of issues created on a specific date in each cell’s header.

```html
<<SfSchedule TValue="AppointmentModel">>
        <<ScheduleEventSettings DataSource="@DataSource">>
    <</ScheduleEventSettings>>
    <<ScheduleViews>>
        <<ScheduleView Option="View.Month">><</ScheduleView>>
    <</ScheduleViews>>
    <<ScheduleTemplates>>
        <<CellHeaderTemplate>>
            @context.Date.Day
            @{
                var count = GetIssueCount(@context.Date);
                if (count >> 0)
                {
                    <<span>> Issues: @GetIssueCount(@context.Date)<</span>>
                }
            }
        <</CellHeaderTemplate>>
    <</ScheduleTemplates>>
<</SfSchedule>>
```

## Customize appointment appearance

Also, you can apply custom colors to appointments based on the task’s priority. To do so, use the built-in field **CssClass** in which you can pass the class name to be applied to the specific appointments.

```js
@code {
public string GetCssClass(string priority)
    {
        string css;
        if (priority == "Release-Breaker")
        {
            css = "release-breaker";
        }
        else if (priority == "Normal")
        {
            css = "normal";
        }
        else if (priority == "High")
        {
            css = "high";
        }
        else if (priority == "Critical")
        {
            css = "critical";
        }
        else if (priority == "Ultra Critical")
        {
            css = "ultra-crtical";
        }
        else
        {
            css = "low";
        }
        return css;
    }
}

<style>
    .e-schedule .e-month-view .low {
        background: #99ccff;
    }

    .e-schedule .e-month-view .normal {
        background: #66cc66;
    }

    .e-schedule .e-month-view .high {
        background: #006633;
    }

    .e-schedule .e-month-view .critical {
        background: #ff0000;
    }

    .e-schedule .e-month-view .ultra-critical {
        background: #990000;
    }

    .e-schedule .e-month-view .release-breaker {
        background: #000000;
    }
</style>
```

![Applying Custom Colors to the Appointments](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Applying-Custom-Colors-to-the-Appointments.png)<figcaption>Applying Custom Colors to the Appointments</figcaption>

**Note:** For more information, refer to the [appointment customization in Blazor Scheduler documentation](https://blazor.syncfusion.com/documentation/scheduler/appointments#appointment-customization "Link to Appointment customization in Blazor Scheduler documentation").

## Customize the appointment tooltip

You can also display the required tasks’ information on a tooltip using the **TooltipTemplate** option within the **ScheduleEventSettings**.

Refer to the following code example.

```html
<SfSchedule TValue="AppointmentModel">
        <ScheduleEventSettings DataSource="@DataSource" EnableTooltip="true">
            <TooltipTemplate>
                @{
                var data = (context as AppointmentModel);
                <p>@data.Subject</p>
                <p>@data.Description</p>
            }
        </TooltipTemplate>
    </ScheduleEventSettings>
    <ScheduleViews>
        <ScheduleView Option="View.Month"></ScheduleView>
    </ScheduleViews>
</SfSchedule>
```

![Displaying Custom Tooltip on the Appointments ](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Customizing-the-Appointment-Tooltip.png)<figcaption>Custom Tooltip on an Appointment</figcaption>

**Note:** Also, refer to the documentation on [customizing event tooltips in a Blazor Scheduler using a template](https://blazor.syncfusion.com/documentation/scheduler/appointments#customizing-event-tooltip-using-template "Link to Customizing event tooltip using template in Blazor Scheduler").

## Resource

For more details, check out the complete working example to [synchronize Jira calendar tasks with the Blazor Scheduler](https://github.com/SyncfusionExamples/blazor-scheduler-jira-calendar "Link to Synchronize Jira Calendar Tasks with Blazor Scheduler demo on GitHub").

## **Summary**

Thanks for reading! This blog explained in detail how to synchronize Jira calendar tasks and how to customize headers, appointment colors, and tooltips with the Syncfusion [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler "Link to Blazor Scheduler") component. So, try out the steps and enjoy hassle-free project and resource management.

Our Syncfusion Scheduler control is also available in our [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-scheduler "Link to Xamarin Scheduler"), [UWP](https://www.syncfusion.com/uwp-ui-controls/scheduler "Link to UWP Scheduler"), [WinForms](https://www.syncfusion.com/winforms-ui-controls/scheduler "Link to WinForms Scheduler"), [WinUI](https://www.syncfusion.com/winui-controls/scheduler "Link to WinUI Scheduler"), [WPF](https://www.syncfusion.com/wpf-controls/scheduler "Link to WPF Scheduler"), [Blazor](https://www.syncfusion.com/blazor-components/blazor-scheduler "Link to Blazor Scheduler"), ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/scheduler "Link to ASP.NET Core Scheduler"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/scheduler "Link to ASP.NET MVC Scheduler"), and [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/scheduler "Link to ASP.NET Web Forms Scheduler")), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-scheduler "Link to JavaScript Scheduler"), [Angular](https://www.syncfusion.com/angular-ui-components/angular-scheduler "Link to Angular Scheduler"), [React](https://www.syncfusion.com/react-ui-components/react-scheduler "Link to React Scheduler"), and [Vue](https://www.syncfusion.com/vue-ui-components/vue-scheduler "Link to Vue Scheduler") platforms.

For current customers, the new version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can start a [30-day free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out these features.

Also, you can reach us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/account/login "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

- [What’s New in 2021 Volume 2: Blazor Scheduler](https://dev.to/sureshmohan/what-s-new-in-2021-volume-2-blazor-scheduler-10aj-temp-slug-2072371 "Link to What’s New in 2021 Volume 2: Blazor Scheduler blog")
- [How to Synchronize Google Calendar with Syncfusion Blazor Scheduler](https://dev.to/karthickramasamy08/how-to-synchronize-google-calendar-with-syncfusion-blazor-scheduler-2c6j-temp-slug-7714852 "Link to How to Synchronize Google Calendar with Syncfusion Blazor Scheduler blog")
- [How to Send Emails and Reminders for Events in Blazor Scheduler](https://dev.to/syncfusion/how-to-send-emails-and-reminders-for-events-in-blazor-scheduler-1095 "Link to How to Send Emails and Reminders for Events in Blazor Scheduler blog")
- [How to Access Microsoft Graph Calendar Events with Syncfusion Blazor Scheduler](https://dev.to/karthickramasamy08/how-to-access-microsoft-graph-calendar-events-with-syncfusion-blazor-scheduler-gmo-temp-slug-5642119 "Link to How to Access Microsoft Graph Calendar Events with Syncfusion Blazor Scheduler blog")