Overview

  • The first and last day of each reservation is shown as a diagonally split cell: the check-in and check-out halves indicate that these boundary days are only partially occupied.

  • See how to implement the diagonal split by skewing the reservation box.

  • This example uses CSS transform and onBeforeEventRender event handler to adjust the appearance and behavior.

  • The tutorial is built using the open-source DayPilot Lite for JavaScript scheduling library.

Skewing the reservation box to create the diagonal split

The JavaScript Scheduler component uses .scheduler_default_event for the event element and .scheduler_default_shadow for the drag/resize shadow (see also Scheduler CSS Classes). We apply a horizontal skew to both:

.scheduler_default_event {
  transform: skewX(-45deg) translateX(20px);
}

.scheduler_default_shadow {
  transform: skewX(-45deg) translateX(20px);
}

What this does:

  • skewX(-45deg) shears the event horizontally: the top edge stays where it is, the bottom edge is shifted right, so the left and right sides become diagonal.

  • translateX(20px) nudges the skewed bar horizontally so it still visually aligns with the day columns.

At this point the whole event (including text and default resize handles) is skewed, so we’ll render the content manually.

Rendering custom content with onBeforeEventRender

We use onBeforeEventRender to:

  1. Remove the default HTML.

  2. Disable the built-in resize handles (they don’t match a skewed div).

  3. Insert active areas: a text area that will be unskewed, left and right strips that behave as custom resize handles.

onBeforeEventRender: (args) => {
  // no default HTML
  args.data.html = "";

  // built-in resize handles don't work well when the event div is skewed
  args.data.resizeDisabled = true;

  const color = args.data.tags?.color;
  args.data.backColor = color || "#c0c0c0";
  args.data.borderColor = "darker";

  args.data.areas = [
    // 1) Text area – we will "unskew" this in CSS
    {
      left: 10,
      top: 0,
      bottom: 0,
      right: 0,
      text: args.data.text,
      cssClass: "reservation-text",
      verticalAlignment: "center"
    },

    // 2) Custom resize handle on the left (start)
    {
      left: 0,
      top: 0,
      bottom: 0,
      width: 10,
      action: "ResizeStart"
    },

    // 3) Custom resize handle on the right (end)
    {
      right: 0,
      top: 0,
      bottom: 0,
      width: 10,
      action: "ResizeEnd"
    }
  ];
}

The text area is a normal inner div; we’ll apply a reverse transform so the text looks straight.

The resize areas reuse the standard resize logic via action: "ResizeStart" / "ResizeEnd". They will be skewed together with the main element.

Skewing the text back (so it’s readable)

Because the whole event is skewed, we need to “undo” the skew for the text area. We do that with a matching skewX(45deg) (opposite sign) on the inner element:

.scheduler_default_event .reservation-text {
  transform: skewX(45deg);
}

Result:

  • Outer event: skewX(-45deg) → diagonal start and end.

  • Inner text: skewX(45deg) → cancels the skew, text appears horizontal.

Skew angle is calculated from cellWidth and eventHeight

The diagonal shape of the event is determined by:

  • cellWidth – width of one day column (Scheduler config)

  • eventHeight – height of the event bar (Scheduler config)

  • skew angle – the value used in transform: skewX(angle) (CSS)

For a rectangle of height H skewed by angle α:

The bottom edge is shifted horizontally by
offset = H · tan(α)

We want this horizontal offset to match one day width, i.e.:

offset = cellWidth
H = eventHeight

So:

eventHeight · tan(α) = cellWidth
tan(α) = cellWidth / eventHeight
α = atan(cellWidth / eventHeight)

Example 1 (current settings)

eventHeight = 40px
cellWidth   = 40px

tan(α) = 40 / 40 = 1
α = atan(1) = 45°

So:

.scheduler_default_event {
  transform: skewX(-45deg) translateX(20px);
}

Example 2 (different sizes)

If you change sizes, recompute α:

  • cellWidth = 60, eventHeight = 40
    → tan(α) = 60 / 40 = 1.5 → α ≈ atan(1.5) ≈ 56°

  • cellWidth = 40, eventHeight = 30
    → tan(α) = 40 / 30 ≈ 1.33 → α ≈ atan(1.33) ≈ 53°

Use that angle in your CSS:

/* example for cellWidth = 60, eventHeight = 40 */
.scheduler_default_event {
  transform: skewX(-56deg) translateX(30px); /* translateX ≈ cellWidth / 2 */
}