Overview

  • Block past days in the JavaScript Calendar component using disabled cells feature
  • Prevent navigation to past weeks using the Navigator (date picker) component
  • Includes a trial version of DayPilot Pro for JavaScript (see License below)
  • Requires DayPilot Pro version 2019.2.3867 (included) or later

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. Buy a license.

Live Demo

Blocking Navigation to Past Days

javascript-calendar-blocking-days-navigator.png

You can block access to past days using the Navigator (date picker) component by customizing the selection logic in onTimeRangeSelect event handler.

In this example, we are checking the selected date and reset it to the previous value if needed:

onTimeRangeSelect: function(args) {
  if (args.day < DayPilot.Date.today()) {
    args.preventDefault();
    nav.select(lastDate, {dontNotify: true, dontFocus: true});
  }
  else {
    lastDate = args.start;
  }
}

In order to provide a visual hint to the users, we will change the background of the blocked days using onBeforeCellRender event handler:

onBeforeCellRender: function(args) {
  if (args.cell.day < DayPilot.Date.today()) {
    args.cell.cssClass = "navigator-disabled-cell";
  }
},

The navigator-disabled-cell CSS class changes the background and cursor styles:

.navigator_default_cell.navigator-disabled-cell {
  background-color: #ddd !important;
  color: #888;
  cursor: not-allowed !important;
}

Our Navigator configuration now looks like this:

var lastDate = null;

var nav = new DayPilot.Navigator("nav", {
  selectMode: "week",
  onBeforeCellRender: function(args) {
    if (args.cell.day < DayPilot.Date.today()) {
      args.cell.cssClass = "navigator-disabled-cell";
    }
  },
  onTimeRangeSelect: function(args) {
    if (args.day < DayPilot.Date.today()) {
      args.preventDefault();
      nav.select(lastDate, {dontNotify: true, dontFocus: true});
    }
    else {
      lastDate = args.start;
    }
  },
  onTimeRangeSelected: function(args) {
    dp.startDate = args.start;
    dp.update();
  }
});
nav.init();

Calendar: Blocking Drag and Drop

javascript-calendar-blocking-drag-and-drop-calendar.png

In the Calendar component, it is possible to disable selected grid cells using onBeforeCellRender event handler. This will will make in inaccessible for all drag and drop operations (event creating, moving and resizing):

var dp = new DayPilot.Calendar("dp", {
  // ...
  onBeforeCellRender: function(args) {
    if (args.cell.start < DayPilot.Date.today()) {
      args.cell.disabled = true;
      args.cell.backColor = "#eee";
    }
  }
});
dp.init();

Full Source Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>JavaScript Calendar: Blocking Selected Dates</title>


  <style>
    .navigator_default_cell.navigator-disabled-cell {
      background-color: #ddd !important;
      color: #888;
      cursor: not-allowed !important;
    }

    .main {
      display: flex;
    }

    .col-left {
      padding-right: 10px;
    }
    .col-main {
      flex: 1;
    }
  </style>

  <!-- DayPilot library -->
  <script src="js/daypilot/daypilot-all.min.js"></script>

</head>
<body>

<div class="main">
  <div class="col-left">
    <div id="nav"></div>
  </div>
  <div class="col-main">
    <div id="dp"></div>
  </div>
</div>

<script>

  var lastDate = null;

  var nav = new DayPilot.Navigator("nav", {
    selectMode: "week",
    onBeforeCellRender: function(args) {
      if (args.cell.day < DayPilot.Date.today()) {
        args.cell.cssClass = "navigator-disabled-cell";
      }
    },
    onTimeRangeSelect: function(args) {
      if (args.day < DayPilot.Date.today()) {
        args.preventDefault();
        nav.select(lastDate, {dontNotify: true, dontFocus: true});
      }
      else {
        lastDate = args.start;
      }
    },
    onTimeRangeSelected: function(args) {
      dp.startDate = args.start;
      dp.update();
    }
  });
  nav.init();

  var dp = new DayPilot.Calendar("dp", {
    viewType: "Week",
    onTimeRangeSelected: function (args) {
      DayPilot.Modal.prompt("Create a new event:", "Event 1").then(function(modal) {
        var dp = args.control;
        dp.clearSelection();
        if (!modal.result) { return; }
        dp.events.add(new DayPilot.Event({
          start: args.start,
          end: args.end,
          id: DayPilot.guid(),
          text: modal.result
        }));
      });
    },
    onBeforeCellRender: function(args) {
      if (args.cell.start < DayPilot.Date.today()) {
        args.cell.disabled = true;
        args.cell.backColor = "#eee";
      }
    }
  });
  dp.events.list = [
    {
      id: "1",
      start: DayPilot.Date.today().addHours(10),
      end: DayPilot.Date.today().addHours(12),
      text: "Event 1"
    }
  ];
  dp.init();
</script>

</body>
</html>