--- title: "Easily Synchronize Blazor Resource Scheduler with RESTful Services" published_at: "2021-11-17T11:00:44+00:00" modified_at: "2026-06-25T11:34:35+00:00" url: "https://www.syncfusion.com/blogs/post/easily-synchronize-blazor-resource-scheduler-with-restful-services" excerpt: "RESTful services have become the de facto standard for writing web applications. They help us expose resources on the internet using simple HTTP requests. REST (representational state transfer) is an architectural style that enables developers to create web services that..." taxonomy_category: - "Blazor" - "Development" - "Scheduler" - "Web" taxonomy_post_tag: - "Blazor" - "data synchronization" - "Scheduler" - "Web Development" - "WebAssembly" --- # Easily Synchronize Blazor Resource Scheduler with RESTful Services [Sellakumar](https://www.syncfusion.com/blogs/author/sellakumar-krishnamoorthi) ![Easily Synchronize Blazor Resource Scheduler with Restful Services](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Easily-Synchronize-Blazor-Resource-Scheduler-with-Restful-Services.png) [RESTful services](https://en.wikipedia.org/wiki/Representational_state_transfer) have become the de facto standard for writing web applications. They help us expose resources on the internet using simple HTTP requests. REST (representational state transfer) is an architectural style that enables developers to create web services that are easy to build, read, and maintain. This approach allows the developers to focus on the business logic of their application instead of worrying about how data is transmitted over the network. Our Syncfusion [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) is a fully-featured calendar component. It allows users to manage their time efficiently. It facilitates easy resource scheduling, rescheduling appointments through editor pop-ups, drag and drop, and resizing actions. This blog explains the steps to synchronize data between the Syncfusion Blazor Scheduler and RESTful services. Let’s get started! ## Project setup First, create a simple Blazor-hosted(WebAssembly) application. Refer to the [Getting started with Blazor ASP.NET Core-hosted apps in the Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-core-hosted) page for the introduction and project creation steps. The project will look like in the following screenshot. ![Created Blazor Server-Side Project](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Created-Blazor-Server-Side-Project.png)Now, refer to the [Adding a component package to the application](https://blazor.syncfusion.com/documentation/scheduler/getting-started#adding-component-package-to-the-application) page to add the Blazor Scheduler component to your application. We are going to use Entity Framework Core and data migration commands to create an SQL database and table. So, install the [Microsoft.EntityFrameworkCore](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore/) and [Microsoft.EntityFrameworkCore.SqlServer](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.SqlServer/) NuGet packages to perform these actions in the server project. ## Creating models Let’s create the required database models for the application. Create a new folder from the project shared directory under the name **Models**. ![Create a new folder from the project shared directory under the name Models](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Create-a-new-folder-from-the-project-shared-directory-under-the-name-Models.png) Then, create an event model class named **EventModel** inside the ** Models** folder. Refer to the following code example. **EventModel.cs** ``` public class EventModel { public int Id { get; set; } public string Subject { get; set; } public DateTime? StartTime { get; set; } public DateTime? EndTime { get; set; } public string StartTimezone { get; set; } public string EndTimezone { get; set; } public string Location { get; set; } public string Description { get; set; } public bool? IsAllDay { get; set; } public bool? IsBlock { get; set; } public bool? IsReadOnly { get; set; } public int? FollowingID { get; set; } public int? RecurrenceID { get; set; } public string RecurrenceRule { get; set; } public string RecurrenceException { get; set; } public int? OwnerId { get; set; } } ``` Now, create a resource model class named **ResourceModel** inside the ** Models** folder*.* **ResourceModel.cs** ``` public class ResourceModel { public int Id { get; set; } public string Name { get; set; } public string Color { get; set; } } ``` **Note:** Refer to the [Create a data model](https://docs.microsoft.com/en-us/aspnet/core/data/ef-mvc/intro?view=aspnetcore-5.0#create-the-data-model) documentation to learn more about EntityFramework data model creation. Make Appointment Planning Easier in Your Blazor Apps Syncfusion Blazor Scheduler helps you create intuitive booking, event, and calendar experiences with built-in views, recurring appointments, editing, rescheduling, localization, and flexible customization. [See Blazor Scheduler in Action](https://www.syncfusion.com/blazor-components/blazor-scheduler) ## Creating a database and context Here, we will create an SQL database based on the models in this application. Refer to the documentation on [creating the database](https://docs.microsoft.com/en-us/sql/relational-databases/databases/create-a-database?view=sql-server-ver15#SSMSProcedure) and [tables](https://docs.microsoft.com/en-us/sql/relational-databases/tables/create-tables-database-engine?view=sql-server-ver15#using-table-designer) based on the models. After creating the database, we have to add the resource table data to it to retrieve the resource initially. In this app, the local SQL database is named **ScheduleData.mdf** and is available under the ** App_Data** folder for reference. The next step is to [creating a context for the database](https://docs.microsoft.com/en-us/aspnet/core/data/ef-mvc/intro?view=aspnetcore-5.0#create-the-database-context) . Create a **SchedulerContext** class under the data folder in the server project. Refer to the following screenshot. ![Create a SchedulerContext class under the data folder in the server project](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Create-a-SchedulerContext-class-under-the-data-folder-in-the-server-project.png)In the **SchedulerContext** class, configure the database models into a database table like in the following code example. ``` public class SchedulerContext : DbContext { public SchedulerContext(DbContextOptions options) : base(options) { } public virtual DbSet EventModels { get; set; } public virtual DbSet ResourceModels { get; set; } protected override void OnModelCreating(ModelBuilder modelBuilder) { modelBuilder.Entity().ToTable("EventData"); modelBuilder.Entity().ToTable("ResourceData"); } } ``` Thus, we have successfully created the database and its context. ## Configuring the database Next, register the **SchedulerContext** class in the ** startup** class of the ** ConfigureServices** section. Refer to the following code. ``` services.AddDbContext(context => context.UseSqlServer("")); ``` Now, we have successfully connected the app with the database. ## Adding API controllers Then, we create API controllers to perform CRUD actions with the RESTful services. Create the **ScheduleController** and ** ResourceController** APIs under the ** Controllers** folder in the server project to easily retrieve, update, and remove events data in the database. **ScheduleController.cs** ``` [Route("api/[controller]")] [ApiController] public class ScheduleController : ControllerBase { private readonly SchedulerContext _context; public ScheduleController(SchedulerContext context) { _context = context; } [HttpGet] public IEnumerable Get() { return _context.EventModels.ToList(); } [HttpPost] public void Post([FromBody] EventModel eventModel) { if (ModelState.IsValid) { try { _context.EventModels.Add(eventModel); _context.SaveChanges(); } catch { throw; } } } [HttpPut("{id}")] public void Put(int id, [FromBody] EventModel eventModel) { if (ModelState.IsValid) { try { _context.Entry(eventModel).State = EntityState.Modified; _context.SaveChanges(); } catch { throw; } } } [HttpDelete("{id}")] public void Delete(int id) { if (ModelState.IsValid) { try { EventModel eventModel = _context.EventModels.Find(id); _context.EventModels.Remove(eventModel); _context.SaveChanges(); } catch { throw; } } } } ``` **ResourceController.cs** ``` [Route("api/[controller]")] [ApiController] public class ResourceController : ControllerBase { private readonly SchedulerContext _context; public ResourceController(SchedulerContext context) { _context = context; } [HttpGet] public IEnumerable Get() { return _context.ResourceModels.ToList(); } } ``` **Note:** Refer to the [Add Web API Controllers](https://docs.microsoft.com/en-us/aspnet/web-api/overview/data/using-web-api-with-entity-framework/part-2#add-web-api-controllers) documentation to synchronize data between the app and server. ## Configure RESTful services into Blazor Scheduler Finally, render the Syncfusion Blazor Scheduler component in the **index.razor** file in the client project with the RESTful API services. Use the [Data Manager](https://blazor.syncfusion.com/documentation/data/getting-started) to perform data processing between the Blazor Scheduler and RESTful services. Refer to the following example code. **Index.razor** ``` @using BlazorScheduler.Shared.Models @using Syncfusion.Blazor @using Syncfusion.Blazor.Data @using Syncfusion.Blazor.Schedule @code{ private string[] GroupData = new string[] { "Owners" }; } ``` After synchronizing the RESTful services with the Blazor Scheduler, we can easily retrieve data from the RESTful services even at the initial load of the Blazor Scheduler. For every CRUD action in the Blazor Scheduler, the data will properly synchronize with the database using the RESTful services. ![Synchronize Blazor Scheduler with RESTful Services](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Synchronize-Blazor-Scheduler-with-RESTful-Services.png) Synchronize Blazor Scheduler with RESTful Services ## GitHub reference You can check out the complete GitHub demo for [Synchronizing Blazor Scheduler events and resource data with RESTful services](https://github.com/SyncfusionExamples/synchronizing-blazor-scheduler-events-and-resource-data-in-restful-services) . ## Summary Thanks for reading! This blog provided the easy steps to synchronize events and resource data in the Syncfusion [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) with RESTful services. This will help you integrate your app with RESTful services and enjoy its benefits. So, try out the steps in this blog post and leave your feedback in the comments section below. [Syncfusion Essential Studio® for Blazor](https://www.syncfusion.com/blazor-components) offers over 65 high-performance, lightweight, and responsive UI components for the web, including file-format libraries, in a single package. Use them to enhance your app’s look! For existing customers, the latest version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out the available features. Also, try out our other demos from this [GitHub](https://github.com/syncfusion) location. You can also contact us through our [support forums](https://www.syncfusion.com/forums) , [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents) , or [feedback portal](https://www.syncfusion.com/feedback/blazor-components) . We are always happy to assist you! ## Related blogs - [4 Easy Steps to Embed a JavaScript Control into a Blazor App](https://www.syncfusion.com/blogs/post/4-easy-steps-to-embed-a-javascript-control-into-a-blazor-app.aspx) - [Easy Steps to Synchronize JIRA Calendar Tasks with the Blazor Scheduler](https://www.syncfusion.com/blogs/post/easy-steps-to-synchronize-jira-calendar-tasks-with-the-blazor-scheduler.aspx) - [Synchronize Google Calendar with Syncfusion Blazor Scheduler](https://www.syncfusion.com/blogs/post/synchronize-google-calendar-with-syncfusion-blazor-scheduler.aspx) - [Access Microsoft Graph Calendar Events with Syncfusion Blazor Scheduler](https://www.syncfusion.com/blogs/post/how-to-access-microsoft-graph-calendar-events-with-syncfusion-blazor-scheduler.aspx)