License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

Features

Simple Scheduler in ASP.NET Core MVC View

We will display the Scheduler control on the main page of the application (Views/Home/Index.cshtml).

In order to show an empty Scheduler, the following steps are necessary:

1. Include DayPilot Pro library:

<script src="~/js/daypilot/daypilot-all.min.js" asp-append-version="true"></script>

We have also used "asp-append-version" attribute to include a build-specific string. This will ensure that the current version of daypilot-all.min.js will be loaded by the browser (instead of any previous version that might be cached).

2. Insert a placeholder <div> element in the page:

<div id="dp"></div>

This is where the JavaScript Scheduler will be rendered.

3. Configure and initialize the Scheduler:

<script>
    var dp = new DayPilot.Scheduler("dp");
    dp.startDate = DayPilot.Date.today().firstDayOfMonth();
    dp.days = DayPilot.Date.today().daysInMonth();
    dp.scale = "Day";
    dp.timeHeaders = [
        { groupBy: "Month" },
        { groupBy: "Day", format: "d" }
    ];
    dp.resources = [
        { name: "Resource A", id: "A"}
    ];
    dp.init();
</script>

We have set the following Scheduler properties:

  • startDate: the first visible day
  • days: number of days to be displayed
  • scale: determines the cell size (see what other scale values are available in the Scheduler)
  • timeHeaders: sets the Scheduler time headers on the X axis (see how to create your own time headers)
  • resources: specifies the Scheduler rows on the Y axis (read more about loading resource data)

If we run the project now we will see the following page in the browser:

javascript-html5-scheduler-asp.net-core-simple.png

Full source of Views/Home/Index.cshtml:

@{
    ViewData["Title"] = "Scheduler";
}

<script src="~/js/daypilot/daypilot-all.min.js" asp-append-version="true"></script>

<div id="dp"></div>

<script>
    var dp = new DayPilot.Scheduler("dp");
    dp.startDate = DayPilot.Date.today().firstDayOfMonth();
    dp.days = DayPilot.Date.today().daysInMonth();
    dp.scale = "Day";
    dp.timeHeaders = [
        { groupBy: "Month" },
        { groupBy: "Day", format: "d" }
    ];
    dp.resources = [
        { name: "Resource A", id: "A"}
    ];
    dp.init();

</script>

Loading Scheduler Events

Now we want to load the event data and display events in the Scheduler. The events can be loaded using events.list property.

Sometime we already have the event data during the Scheduler initialization so we can simply include it in the configuration (before calling .init()).

<script>
    var dp = new DayPilot.Scheduler("dp");
    // ...
    dp.events.list = [
      {
        id:"1",
        text:"Event 1",
        start:"2017-09-13T00:00:00",
        end:"2017-09-18T00:00:00",
        resource:"A"
      }
    ];
    dp.init();

</script>

This configuration will display the events during the Scheduler initialization:

javascript-html5-scheduler-asp.net-core-event-data.png

However, this would require generating the event data directly in the view source. It's possible but usually you want to split the presentation from the data.

Let's have a simple API endpoint that returns the data in the same format as a JSON string:

GET /api/events

HTTP response:

[{"id":"1","text":"Event 1","start":"2017-09-13T00:00:00","end":"2017-09-18T00:00:00","resource":"A"}]

A very simple implementation could look like this (Controllers/EventsController.cs):

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

namespace AspNetCoreScheduler.Controllers
{
    [Produces("application/json")]
    [Route("api/events")]
    public class EventsController : Controller
    {
        // GET: api/events
        [HttpGet]
        [HttpPost]
        public IEnumerable<EventData> Get()
        {
            return new EventData[] { new EventData{
                Id = "1",
                Text = "Event 1",
                Start = DateTime.Today,
                End = DateTime.Today.AddDays(5),
                Resource = "A"
                }
            };
        }

    }

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

Note that in this example the event data isn't loaded from a database but generated statically.

As soon as the API endpoint is working we can load the data using events.load() method:

<script>
    var dp = new DayPilot.Scheduler("dp");
    // ...
    dp.init();

    dp.events.load("/api/events");

</script>

This is a shortcut method for an AJAX call that could be implemented like this (using jQuery):

var url = "/api/events?start=" + dp.visibleStart().toString() + "&end=" + dp.visibleEnd().toString();
$.get(url, function (data) {
dp.events.list = data; dp.update();
});

Loading Scheduler Resources

In the first example, we have defined the resources statically during initialization:

<script>
    var dp = new DayPilot.Scheduler("dp");
    // ...
    dp.resources = [
        { name: "Resource A", id: "A"}
    ];
    dp.init();
</script>

However, we want to load the resources using the API as well.

Let's create a similar backend endpoint for resource data:

GET /api/resources

HTTP response:

[{"id":"A","name":"Resource A"},{"id":"B","name":"Resource B"},{"id":"C","name":"Resource C"},{"id":"D","name":"Resource D"}]

Controller implementation (Controllers/ResourcesController.cs);

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

namespace AspNetCoreScheduler.Controllers
{
    [Produces("application/json")]
    [Route("api/resources")]
    public class ResourcesController : Controller
    {
        // GET: api/resources
        [HttpGet]
        public IEnumerable<ResourceData> Get()
        {
            return new ResourceData[] {
                new ResourceData { Id = "A", Name = "Resource A" },
                new ResourceData { Id = "B", Name = "Resource B" },
                new ResourceData { Id = "C", Name = "Resource C" },
                new ResourceData { Id = "D", Name = "Resource D" },
            };
        }

    }

    public class ResourceData
    {
        public String Id;
        public String Name;
    }
}

Now we can load the resources using rows.load() method:

<script>
    var dp = new DayPilot.Scheduler("dp");
    // ...
    dp.init();

    dp.rows.load("/api/resources");

</script>

Result:

javascript-html5-scheduler-asp.net-core-resources.png

Again, a simple implementation that generates the resources directly but you can easily replace it with data loaded from a database.

DateTime Format in JSON Responses

By default, ASP.NET Core serializes DateTime object including current time zone data. In our example we need to avoid that because the Scheduler works with an idealized time zone and the dates would be shifted when displayed.

We can configure the ASP.NET Core JSON serializer not to include the time zone data by modifying the ConfigureServices() method in Startup.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Newtonsoft.Json;

namespace AspNetCoreScheduler
{
    public class Startup
    {
    
        // ...

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc().AddJsonOptions(options =>
            {
                options.SerializerSettings.DateTimeZoneHandling = DateTimeZoneHandling.Unspecified;
            }); 
                
        }
        
        // ...

    }
}