DayPilot Pro for JavaScript 7.8

Release date: June 10, 2014 (build 7.8.870)

Real-Time Moving Position Indicator (Scheduler)

Example

dp.eventMovingStartEndEnabled = true; 
dp.eventMovingStartEndFormat = "MMMM d, yyyy";

EventMoving Event (Scheduler)

Fired whenever the shadow position changes during drag and drop event moving.

Displaying details of the current position:

dp.onEventMoving = function(args) {
  $("#msg").html(args.start + " " + args.end + " " + args.resource);
};

Customizing the built-in indicators (visibility and HTML):

dp.onEventMoving = function(args) {
  args.left.enabled = true;
  args.left.html = args.start.toString("M/d/yyyy");
  args.right.enabled = false;
};

Real-Time Resizing Position Indicator (Scheduler)

dp.eventResizingStartEndEnabled = true; 
dp.evnetResizingStartEndFormat = "MMMM d, yyyy";

EventResizing Event (Scheduler)

dp.onEventResizing = function(args) {
  $("#msg").html(args.start + " " + args.end);
}; 

Customizing the built-in indicators (visibility and HTML):

dp.onEventResizing = function(args) {
  args.left.enabled = true;
  args.left.html = "Start: " + args.start.toString("M/d/yyyy H:mm tt");
  args.right.enabled = true;
  args.right.html = "End: " + args.end.toString("M/d/yyyy H:mm tt");
};

Real-Time Selection Position Indicator (Scheduler)

dp.timeRangeSelectingStartEndEnabled = true;
dp.timeRangeSelectingStartEndFormat = "MMMM d, yyyy";

TimeRangeSelecting Event (Scheduler)

Fired whenever the selected time range changes during drag and drop.

dp.onTimeRangeSelecting = function(args) {
  $("#msg").html(args.start + " " + args.end + " " + args.resource);
};

Customizing the built-in indicators (visibility and HTML):

dp.onTimeRangeSelecting = function(args) {
  args.left.enabled = true;
  args.left.html = args.resource + " " + args.start.toString("M/d/yyyy H:mm tt");
  args.right.enabled = true;
  args.right.html = "End: " + args.end.toString("M/d/yyyy H:mm tt");
};

Event Deleting (Scheduler)

Event deleting is now integrated in the scheduler and you can enable it simply using .eventDeleteHandling = "Update". The default value of eventDeleteHandling is "Disabled". You can still add custom actions and icons using event active areas.

dp.eventDeleteHandling = "Update";
dp.onEventDelete = function(args) {
  if (!confirm("Do you really want to delete this event?")) {
    args.preventDefault();
  }
};
dp.onEventDeleted = function(args) {
  dp.message("Event deleted: " + args.e.id());
};

Event Deleting (Event Calendar)

Read more about event deleting [doc.daypilot.org].

Event Deleting (Monthly Event Calendar)

Read more about event deleting [doc.daypilot.org].

New Row Click Actions (Scheduler)

New values of .rowClickHandling:

• "Edit" - start inline row name editing mode
• "Select" - select a row 

Row Double Click (Scheduler)

Properties

• rowDoubleClickHandling (default value: "Enabled")

Possible values:

• "Edit" - start inline row name editing mode
• "Select" - select a row 
• "Enabled"
• "Disabled" - the event won't fire, makes the eventClick event to fire faster (no check for double-click required)
• "PostBack" (ASP.NET)
• "CallBack" (ASP.NET, ASP.NET MVC, Java)

Events

• onRowDoubleClick
• onRowDoubleClicked

Methods (ASP.NET, ASP.NET MVC, Java)

• rowDoubleClickCallBack
• rowDoubleClickPostBack (ASP.NET)

Inline Row Editing (Scheduler)

dp.rowClickHandling = "Edit";
dp.onRowEdited = function(args) {
  dp.message("Row text changed to " + args.newText);
};

Properties

• rowEditHandling (default value: "Update")

Events

• onRowEdit
• onRowEdited

Methods (ASP.NET, ASP.NET MVC, Java)

• rowEditCallBack
• rowEditPostBack (ASP.NET)

Row Selecting (Scheduler)

Enable it by setting either rowClickHandling or rowDoubleClickHandling to "Select".

Supports selecting multiple rows by hodling "Ctrl".

Windows 8 Touch Support (Calendar)

Touch gestures are now supported on Windows 8 touch devices.

Touch Gesture Customization (Calendar)

The following gestures are supported out of the box:

• tap for events - fires EventClick event
• tap and hold for events - activates drag and drop event moving
• tap and hold for background cells - activates time range selecting

You can customize the "tap and hold" behavior for both events and time cells. You can also add custom drag handlers to the events.

New properties:

• eventTapAndHoldHandling (default value: "Move", other options: "ContextMenu")
• timeRangeTapAndHoldHandling (default value: "Select", other options: "ContextMenu")

Custom Touch Drag Handlers (Calendar)

You can add custom drag handlers using active areas. The active areas with "Move" action are now supported on touch devices and you can use them to move the event using a finger.

var e = new DayPilot.Event({
  id: 1,
  text: "Test",
  start: "2014-04-14T11:00:00",
  end : "2014-04-14T15:30:00",
  areas: [{"h":20,"css":"event_action_move","action":"Move","right":10,"left":10,"top":0,"v":"Visible"}]
});

dp.events.add(e);

External Drag and Drop on Touch Devices (Calendar)

New API:

<div id="draggable">Event 1 (30 minutes)</div>>

<script type="text/javascript">
  var item = {
    element: document.getElementById("draggable"),
    id: 1,
    text: "Event 1",
    duration: 1800
  };
  DayPilot.Calendar.makeDraggable(item);

</script>

jQuery example:

<h2>External Drag and Drop</h2>
<div class="external">
  <div data-id="123" data-duration="3600">Event 1</div>
  <div data-id="124" data-duration="7200">Event 2</div>
</div>


<script type="text/javascript">
$(document).ready(function () {
  $(".external div").each(function () {
      $(this).css({
          cursor: "move",
          width: "100px",
          border: "1px solid black",
          padding: "5px"
      });
      var item = {
          element: this,
          id: $(this).data("id"),
          text: $(this).text(),
          duration: $(this).data("duration")
      };
      DayPilot.Calendar.makeDraggable(item);
  });
});

</script>

External Drag and Drop on Touch Devices (Scheduler)

New API:

<div>
  Drag items from this list to the scheduler:
  <ul id="external">
      <li data-id="123" data-duration="1800"><span style="cursor:move">Item #123 (30 minutes)</span></li>
      <li data-id="124" data-duration="3600"><span style="cursor:move">Item #124 (60 minutes)</span></li>
  </ul>
</div>

<script type="text/javascript">
  function makeDraggable() {
      var parent = document.getElementById("external");
      var items = parent.getElementsByTagName("li");
      for (var i = 0; i < items.length; i++) {
          var e = items[i];
          var item = {
              element: e,
              id: e.getAttribute("data-id"),
              text: e.innerText,
              duration: e.getAttribute("data-duration")
          };
          DayPilot.Scheduler.makeDraggable(item);
      }
  }
</script>

Improvements

• [Calendar] .show() updates the height for heightSpec="Parent100Pct" (build 795)
• [Scheduler] Updating floating headers during window resize. (build 797)
• [Scheduler] .cells.findXy accepts an array of coordinates: dp.cells.findXy([{x:0, y:0}, {x:0, y:1}]); (build 798)
• [Calendar] Moving shadow disabled for eventMoveHandling = "Disabled" and moveBy = "Full". (build 799)
• [Scheduler] External drag&drop supported on touch devices - using DayPilot.Scheduler.makeDraggable(). (build 802)
• [Calendar] External drag&drop supported on touch devices - using DayPilot.Calendar.makeDraggable(). (build 802)
• [Calendar] Event active areas with action: "move" (build 802)
• [Calendar] timeRangeTapAndHoldHandling implemented ("Select", "ContextMenu"). (build 806)
• [Scheduler] treeAutoExpand property added (enabled by default). (build 809)
• [Scheduler] onTimeRangeSelecting + selection start and end indicators. (build 810)
• [Calendar] AutoRefresh supported (onAutoRefresh). (build 813)
• [Month] AutoRefresh supported (onAutoRefresh). (build 813)
• [Scheduler] AutoRefresh supported (onAutoRefresh). (build 813)
• [Calendar] Windows 8 touch support: external drag and drop, event active area move drag handler. (build 817)
• [Scheduler] Updating drawArea cache after callback. (build 820)
• [Scheduler] onResourceHeaderDoubleClick, onResourceHeaderEdit, onResourceHeaderEdited. (build 826)
• [Scheduler] resourceHeader* events renamed to rowHeader*. (build 827)
• Active area context menu on hover. (build 834)
• [Calendar] Event deleting in CssOnly mode. (build 841)
• [Scheduler] Built-in event deleting. (build 841)
• [Scheduler] Fixing event display after auto cell width update. (build 855)
• [Scheduler] DayPilot.Event.data.barBackColor supported. (build 856)
• [Month] Month: Event deleting. (857)
• [Calendar] Custom column width in columnWidthSpec="Fixed" mode. (build 858)

Fixes

• [Calendar] Calendar: Default ToolTip fixed. (build 818)
• [Scheduler] Scheduler: Active area customization in onBeforeEventRender fixed. (build 821)
• [Scheduler] Scheduler: Corner HTML fixed (it was cleared during .update()). (build 822)
• [Calendar] Resizing using event end fixed in overnight shift setup (DayBeginsHour > DayEndsHour). (build 823)
• [Scheduler] Custom timeline cell width fixed. (build 824)
• [Scheduler] Scheduler: Passing the correct object to resource active area. (build 836)
• [Scheduler] Scheduler: Rendering of zero-duration events starting and ending at cell start fixed. (build 840)
• [Scheduler] External drag over resource and time header fixed. (build 844)
• [Scheduler] Resizing short events using the left border when useEventBoxes = "Never" fixed. (build 848)

API Changes

Resource Header Click Event -> Row Click Event

• .resourceHeaderClickHandling -> .rowClickHandling
• .onResourceHeaderClick -> .onRowClick
• .onResourceHeaderClicked -> .onRowClicked
• .resourceHeaderClickCallBack -> .rowClickCallBack
• .resourceHeaderClickPostBack -> .rowClickPostBack

Resource Header Menu Click Event -> Row Menu Click Event

• .resourceHeaderMenuClickPostBack -> .rowMenuClickPostBack
• .resourceHeaderMenuClickCallBack -> .rowMenuClickCallBack