event-calendar-resources-x-axis.png

This mode shows custom columns as specified using Columns property.

  • You can show resources instead of days on the horizontal axis.
  • You can show discontinuous sequence of days on the horizontal axis (e.g. Monday, Wednesday, Friday).
  • You can show a hierarchy of columns on the horizontal axis. See also Column Headers Hierarchy
  • Use fixed column width to add a horizontal scrollbar when displaying a large number of resources.

Each Column has the following properties:

  • Name (visible in the column title)
  • Date (the column day)
  • Value (the column resource id)

JavaScript

In order to display the events in the correct column you need to specify the resource for each event (resource property).

dp.viewType = "Resources";
dp.columns = [
  { name: "Meeting Room A", id: "A", start: "2013-03-25" },
  { name: "Meeting Room B", id: "B", start: "2013-03-25" },
  { name: "Meeting Room C", id: "C", start: "2013-03-25" }
];
dp.events.list = [
{
  start: "2013-03-25T12:00:00",
  end: "2013-03-25T14:00:00",
  id: "1",
  text: "Event 1",
  resource: "B"
},
{
  start: "2013-03-25T15:00:00",
  end: "2013-03-25T17:00:00",
  id: "2",
  text: "Event 2",
  resource: "C"
}
];
dp.update();

Demo

AngularJS

Example:

<div ng-app="main" ng-controller="CalendarCtrl" >
    <daypilot-calendar id="dp" config="config" events="events" ></daypilot-calendar>
</div>

<script type="text/javascript">

    var app = angular.module('main', ['daypilot']).controller('CalendarCtrl', function($scope, $timeout) {

        $scope.config = {
            startDate: "2016-09-01",
            viewType: "Resources",
            columns: [
                {name: "Column A", id: "A"},
                {name: "Column B", id: "B"},
                {name: "Column C", id: "C"}
            ]
        };

        $scope.events = [
            {
                start: new DayPilot.Date("2016-09-01T10:00:00"),
                end: new DayPilot.Date("2016-09-01T14:00:00"),
                id: 1,
                resource: "A",
                text: "First Event"
            }
        ];
    });

</script>

ASP.NET WebForms

In order to display the events in the correct column you need to specify the resource for each event (DataColumnField).

Example 1

The Columns can be defined in the .aspx file.

<DayPilot:DayPilotCalendar ID="DayPilotCalendar1" runat="server" 
        ViewType="Resources"
        DataColumnField="Column" 
        DataEndField="End" 
        DataStartField="Start" 
        DataTextField="Name"
        DataIdField="Id" 
        ...
        >
        <Columns>
            <DayPilot:Column Name="Meeting Room A" Value="A" Date="2011-12-31" />
            <DayPilot:Column Name="Meeting Room B" Value="B" Date="2011-12-31" />
            <DayPilot:Column Name="Meeting Room C" Value="C" Date="2011-12-31" />
        </Columns>
    </DayPilot:DayPilotCalendar>

Example 2

You can also define the Columns in the code behind.

protected void Page_Load(object sender, EventArgs e)
{
  defineColumns();

  if (!IsPostBack)
  {
      DataBind();
  }
}

private void defineColumns()
{
  DayPilotCalendar1.Columns.Clear();

  DateTime first = DayPilotCalendar1.StartDate;

  string[] resources = new string[] {"A", "B", "C"};

  foreach (string res in resources)
  {

      Column c = new Column(res, res); // using the same Name and Value
      c.Date = DateTime.Today;
      DayPilotCalendar1.Columns.Add(c);
  }
}

ASP.NET MVC

In order to display the events in the correct column you need to specify the resource for each event (DataResourceField).

Example 1: Manually setting the columns in the view

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
   BackendUrl = ResolveUrl("~/Calendar/Backend"),
   ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Resources,
   Columns = new ColumnCollection
  {
    new Column("Column A", "A", DateTime.Today),
    new Column("Column B", "B", DateTime.Today)
  }
})

Example 2: Generating the columns in the backend controller 

View

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
   BackendUrl = ResolveUrl("~/Calendar/Backend"),
   ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Resources
})

Controller

public class CalendarController : Controller
{
  public ActionResult Backend()
  {
    return new Dpc().CallBack(this);
  }

  public class Dpc : DayPilotCalendar
  {

    protected override void OnInit(InitArgs initArgs)
    {
      UpdateWithMessage("Welcome!", CallBackUpdateType.Full);

      Columns.Clear();
      Columns.Add("Column A", "A", DateTime.Today);
      Columns.Add("Column B", "B", DateTime.Today);
        
    }

    protected override void OnFinish()
    {
      // only load the data if an update was requested by an Update() call
      if (UpdateType == CallBackUpdateType.None)
      {
        return;
      }

      // this select is a really bad example, no where clause
      Events = new EventManager(Controller).Data.AsEnumerable();

      DataStartField = "start";
      DataEndField = "end";
      DataTextField = "name";
      DataIdField = "id";
      DataResourceField = "resource";
    }
  }
}