DayPilot calendar won't show at all

Question

I'm trying to implement a calander that is just going to display bookings that have already been made, and are in a table in the database.

After following this tutorial: https://www.codeproject.com/Articles/404647/AJAX-Event-Calendar-Scheduler-for-ASP-NET-MVC-3-in

I have a blank space where the calendar is suppose to be, it seems to be leaving a large area so I'm not sure where it's going wrong or if it's not rendering it or something. I have no errors and can't see where I went wrong.

Gyazo Screenshot

Here is my view for the calander:

@{
    ViewBag.Title = "Booking Calander";
}

<h2>All Bookings</h2>

<div id="dp">

    <script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>

    @Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
    {
    BackendUrl = Url.Content("~/Home/BookingCalander"),
    })


</div>

Here's what I have in the controller (it's just in the home controller):

    public ActionResult BookingCalander()
    {
        return View();
    }

    public ActionResult Backend()
    {
        return new Dpc().CallBack(this);
    }

    public class Dpc : DayPilotCalendar
    {
        protected override void OnInit(InitArgs e)
        {
            var db = new ApplicationDbContext();
            Events = from ev in db.HallBookings select ev;

            DataIdField = "ActivityBookingId";
            DataTextField = "Activity" + " - " + "CustomerName";
            DataStartField = "BookingStartTime";
            DataEndField = "BookingEndTime";

            Update();
        }
    }

I have added the namespace to Views/Web.Config:

      <namespaces>

        <add namespace="DayPilot.Web.Mvc"/>

      </namespaces>
    </pages>
  </system.web.webPages.razor>

Answer 1

The BackendUrl should point to the "Backend" action (as the name suggests):

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
})