Overview

  • The React Scheduler component can display a timesheet mode (days on the vertical axis and hours on the horizontal axis)

  • Learn how to hide non-business hours, add daily totals to the row headers and scroll to the specified time of day.

  • You can generate your own React project with a preconfigured timesheet using the UI Builder online application.

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.

How to Set Up the React Timesheet?

react timesheet setup

The React timesheet is implemented using the React Scheduler component from DayPilot Pro for JavaScript. In order to display the timesheet, you need to switch the Scheduler to the timesheet mode using the viewType property. In the timesheet mode, the Scheduler displays days on the vertical axis and hours of day on the horizontal axis. Each day is displayed as one row.

The row headers show the date in the predefined format (datePattern of the current locale). You can add additional information to the row. In this example, we add one more column which will show the day of week. In the next step, we will see how to add a column with a daily summary.

The timesheet displays 24 hours on the horizontal axis. Our component displays cells with a duration of 15 minutes. The time headers at the top of the timesheet show hours and minutes of each time column.

The cell width is set to be calculated automatically (cellWidthSpec: "Auto"). The Scheduler will fill the available horizontal space with the grid and no horizontal scrollbar will be visible. However, to maintain readability, we also add the cellWidthMin property and specify the minimum cell width. If the screen is not wide enough to display all cell in full width, the minimum cell width will be used and the Scheduler will display a horizontal scrollbar.

import React, {Component} from 'react';
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

class Timesheet extends Component {

  constructor(props) {
    super(props);
    this.state = {
      rowHeaderColumns: [
        {name: "Date"},
        {name: "Day", width: 40}
      ],
      onBeforeRowHeaderRender: (args) => {
        args.row.columns[0].horizontalAlignment = "center";
        args.row.columns[1].text = args.row.start.toString("ddd");
      },
      cellWidthSpec: "Auto",
      cellWidthMin: 25,
      timeHeaders: [{"groupBy":"Hour"},{"groupBy":"Cell","format":"mm"}],
      scale: "CellDuration",
      cellDuration: 15,
      days: DayPilot.Date.today().daysInMonth(),
      viewType: "Days",
      startDate: DayPilot.Date.today().firstDayOfMonth(),
      showNonBusiness: true,
      // ...
    };
  }

  render() {
    var {...config} = this.state;
    return (
      <div>
        <DayPilotScheduler
          {...config}
          ref={component => {
            this.scheduler = component && component.control;
          }}
        />
      </div>
    );
  }
}

export default Timesheet;

How to hide non-business hours in the React timesheet?

react timesheet hide non business hours

By default, the timesheet displays full 24 hours. The business hours defined as Monday to Friday, 9 am to 5 pm and the non-business hours use a different background color for the timesheet cells. If you don’t need to display the full time range in your React application, you can hide the non-business hours.

changeBusiness() {
  const businessOnly = this.checkboxBusiness.checked;
  this.setState({
    showNonBusiness: !businessOnly
  });
}

By default, this mode hides weekends from the timesheet as well. If you want to display the weekends (Saturday, Sunday), you can use businessWeekends property.

How to show daily totals in the React timesheet?

react timesheet daily totals

You can show the daily totals in the rows headers by adding a custom column with a calculated value:

1. Extend the rowHeaderColumns array with a new column (“Total”).

this.setState({
  rowHeaderColumns: [
    {name: "Date"},
    {name: "Day", width: 40},
    {name: "Total", width: 60}
  ]
});

2. Use onBeforeRowHeaderRender event handler to define the column content. You can calculate the total hours using events.totalDuration() method of the DayPilot.Row object:

onBeforeRowHeaderRender: (args) => {
  // ...
  args.row.columns[2].text = args.row.events.totalDuration().toString("h:mm");
},

How to scroll to the specified time of day in the React timesheet?

To set the initial scrollbar position (or scroll to a specified time of day anytime later), you can use the scrollTo() method:

componentDidMount() {
  this.scheduler.scrollTo(DayPilot.Date.today().firstDayOfMonth().addHours(9));
}

The date part of the parameter will be used to scroll vertically to the given date. If you want to only set the horizontal position, use the date derived from the startDate value (the first visible day).