DayPilot Pro Scheduler for ASP.NET Core (Preview)

Update

April 3, 2018: The development of the ASP.NET Core version of DayPilot is on hold. We recommend using DayPilot Pro for JavaScript in your ASP.NET Core project.

See also the following tutorials:

• ASP.NET Core/JavaScript Scheduler

• ASP.NET Core/JavaScript Weekly Calendar

• ASP.NET Core/JavaScript Monthly Calendar

Create a New ASP.NET Core Web Application Project

Create a new Visual Studio 2015 project using File -> New -> Project... menu option.

Choose "Web Application" ASP.NET Core project template:

Install DayPilot Pro for ASP.NET Core from .nupkg File

This pre-release version of DayPilot Pro for ASP.NET Core is not available through the public NuGet repository. You need to download DayPilot.Pro.AspNetCore.8.3.4.nupkg and install it from a local NuGet package source.

1. Download DayPilot.Pro.AspNetCore.8.3.4.nupkg

2. Save it to C:\DayPilotNuget\DayPilot.Pro.AspNetCore.8.3.4.nupkg

Right-click the project and open "Manage NuGet Packages...".

Click the gear icon to manage NuGet package sources.

Add a new package source using "C:\DayPilotNuGet" path, click Update and OK:

Select "DayPilot Local" as the package source and open the "Browse" tab in the NuGet Package Manager:

Install DayPilot.Pro.AspNetCore package.

ASP.NET Core Scheduler Application

Open Views/Home/Index.cshtml and add <daypilot-scheduler> tag.

There are two required properties:

• id - specifies the Scheduler ID, it's used for the placeholder <div> id attribute and also for the client-side DayPilot.Scheduler object that represents the Scheduler.

• backend-url - specifies the backend controller URL

Index.cshtml (View)

@using DayPilot.AspNetCore;

@{
    ViewData["Title"] = "Home Page";
}

@addTagHelper "*, DayPilot.AspNetCore"

<daypilot-scheduler id="dp"
                    backend-url="/Home/Backend"
                    resources='new ResourceCollection() {
        new Resource("Room A", "A"),
        new Resource("Room B", "B"),
        new Resource("Room C", "C"),
        new Resource("Room D", "D"),
        new Resource("Room E", "E"),
        new Resource("Room F", "F")
    }' />

Now we need to add the backend controller action that will handle the internal communication with the client-side Scheduler object.

Add a new Backend() method to HomeController:

public IActionResult Backend()
{
  return new Dps().CallBack(this);
}

It passes control to Dps class which handles the server-side events. The first version of Dps class only handles OnInit event that initializes the Scheduler:

    public class Dps : DayPilotScheduler
    {
        protected override void OnInit(InitArgs e)
        {
            Update(CallBackUpdateType.Full);
        }
    }

HomeController.cs (Controller)

using DayPilot.AspNetCore;
using DayPilot.AspNetCore.Enums;
using DayPilot.AspNetCore.Events.Scheduler;
using Microsoft.AspNetCore.Mvc;

namespace TutorialDayPilotAspNetCorePreview.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Backend()
        {
            return new Dps().CallBack(this);
        }
    }

    public class Dps : DayPilotScheduler
    {
        protected override void OnInit(InitArgs e)
        {
            Update(CallBackUpdateType.Full);
        }
    }
}

Loading Resources

It's possible to specify the resources using the <daypilot-scheduler> tag in the view as we did in the first example:

@using DayPilot.AspNetCore;

@{
    ViewData["Title"] = "Home Page";
}

@addTagHelper "*, DayPilot.AspNetCore"

<daypilot-scheduler id="dp"
                    backend-url="/Home/Backend"
                    resources='new ResourceCollection() {
        new Resource("Room A", "A"),
        new Resource("Room B", "B"),
        new Resource("Room C", "C"),
        new Resource("Room D", "D"),
        new Resource("Room E", "E"),
        new Resource("Room F", "F")
    }' />

Normally you don't want to use a static list. It's more common to load resources from the database. There are two options:

1. You can pass the resource list to the <daypilot-scheduler> config as a MVC model.

2. You can load it using the OnInit event in the Dps class.

The OnInit event is fired immediately after the Scheduler is initialized on the client-side.

public class Dps : DayPilotScheduler
{
    protected override void OnInit(InitArgs e)
    {

        Resources = new ResourceCollection()
        {
            new Resource("Room A", "A"),
            new Resource("Room B", "B"),
            new Resource("Room C", "C"),
            new Resource("Room D", "D"),
            new Resource("Room E", "E"),
            new Resource("Room F", "F")
        };

        Update(CallBackUpdateType.Full);
    }
}

Loading Events

We will also use OnInit event to load the events. The "Events" property accepts an IEnumerable object that holds arbitrary objects. This way you can reuse objects returned from database. You just need to map the key fields/properties:

• DataIdField - specifies the primary key

• DataStartField - specifies the field with events start (must be convertible to DateTime)

• DataEndField - specifies the field with events start (must be convertible to DateTime)

• DataResourceField - specifies the field with resource id (used to match events and resources/rows)

• DataTextField - specifies the field with event name/text

This example uses "EventData" class which is an ad-hoc structure that holds the event data.

public class Dps : DayPilotScheduler
{
    protected override void OnInit(InitArgs e)
    {
    
        // ...

        Events = new List<EventData>
        {
            new EventData() { Id = "1", Resource = "A", Start = new DateTime(2016, 12, 10), End = new DateTime(2016, 12, 15), Text = "Event 1"},
            new EventData() { Id = "2", Resource = "B", Start = new DateTime(2016, 12, 10), End = new DateTime(2016, 12, 15), Text = "Event 2"},
        };

        DataIdField = "Id";
        DataStartField = "Start";
        DataEndField = "End";
        DataResourceField = "Resource";
        DataTextField = "Text";

        Update(CallBackUpdateType.Full);
    }
}

public class EventData
{
    public string Id;
    public string Resource;
    public DateTime Start;
    public DateTime End;
    public string Text;
}

Scale and Time Headers

With the default configuration, the Scheduler timeline starts at 12am (midnight) today and it displays one day with one hour as the grid time unit:

We want to customize the timeline so it displays 31 days of December 2016 (StartDate and Days properties):

public class Dps : DayPilotScheduler
{
  protected override void OnInit(InitArgs e)
  {
      // ...

      StartDate = new DateTime(2016, 12, 1);
      Days = 31;

      // ...
  }
}

with the grid unit set to one day (Scale property):

public class Dps : DayPilotScheduler
{
  protected override void OnInit(InitArgs e)
  {
      // ...

      StartDate = new DateTime(2016, 12, 1);
      Days = 31;

      Scale = TimeScale.Day;

      // ...

  }
}

And we will also adjust the time headers accordingly. The time header now displays months and days in two rows (TimeHeaders property).

This is how the scheduler looks with the new configuration:

public class Dps : DayPilotScheduler
{
  protected override void OnInit(InitArgs e)
  {
      // ...

      StartDate = new DateTime(2016, 12, 1);
      Days = 31;

      Scale = TimeScale.Day;

      TimeHeaders = new TimeHeaderCollection()
      {
          new TimeHeader(GroupBy.Month),
          new TimeHeader(GroupBy.Day)
      };

      Update(CallBackUpdateType.Full);
  }
}