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

Resources as Columns

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

Custom Set of Days

You can also use the Resources view to create a custom set of days (e.g. 2 weeks without weekends):

dp.viewType = "Resources";
dp.columns = [];

var first = DayPilot.Date.today().firstDayOfWeek();

for (var i = 0; i < 14; i++) {
  var day = first.addDays(i);
  var dayOfWeek = day.getDayOfWeek();

  // skip weekends
  if (dayOfWeek === 0 || dayOfWeek === 6) {
    continue;
  }
  dp.columns.push({start: day, name: day.toString("dddd MMMM d, yyyy")});
}

Angular

Tutorial:

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";
    }
  }
}