Floating Events

Since version 7.7, DayPilot Pro later supports a special floating div for events that are not fully visible in the current viewport (long events that start in the past).

Floating events turned off

Floating events turned on

Notes:

• Floating events are enabled by default. You can enable/disable this behavior using floatingEvents property.
• The themes created using the online theme designer include a style for floating events.
• Floating events work in combination with the active areas. The active areas will be displayed above the floating div.
• You may want to disable it if you are using a lot of custom structured HTML inside the events.
• The floating divs are adjusted automatically during scrolling. If you experience performance problems try turning the floating events off.

CSS

You can specify the style of the floating div using *_event_float and *_event_float_inner classes.

.scheduler_default_event {
  font-size:12px;
  color:#666;
}
.scheduler_default_event_float_inner {
  padding:6px 2px 2px 8px;
}
.scheduler_default_event_float_inner:after {
  content:"";
  border-color: transparent #666 transparent transparent;
  border-style:solid;
  border-width:5px;
  width:0;
  height:0;
  position:absolute;
  top:8px;
  left:-4px;
}

JavaScript

Example:

<div id="dp"></div>

<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.floatingEvents = false;
  // ...
  dp.init();
</script>

<div ng-app="main" ng-controller="SchedulerCtrl" >
  <daypilot-scheduler id="dp" daypilot-config="config" ></daypilot-scheduler>
</div>

<script>
  var app = angular.module('main', ['daypilot']).controller('SchedulerCtrl', function($scope) {

      $scope.config = {
        floatingEvents: false,
        // ...
      };

  }
</script>