angularjs-doctor-appointment-scheduling-php-doctor.png

It is possible to show free/busy information in DayPilotNavigator. The busy days are marked with *_busy CSS class (see also Navigator Theme CSS Classes).

JavaScript

You can load events using events.list array. 

  • The objects in the array use the same format as the main controls (Calendar, Month, Scheduler). You can use the same data source for loading the busy data.
  • The only required fields are start and end.

Example

<div id="nav"><div>

<script type="text/javascript">
    var nav = new DayPilot.Navigator("nav");
    nav.showMonths = 3;
    nav.selectMode = "week";
    nav.onTimeRangeSelected = function(args) {
        dp.startDate = args.start;
        dp.update();
    };
    nav.events.list = [ {start: "2013-03-01", end: "2013-03-20"}];
    nav.init();
</script>

AngularJS

You can specify the event data using daypilot-events attribute.

  • The data format of the array items is compatible with the main controls - you can point daypilot-events attribute to the same Angular object.
  • Remember that in most cases the Navigator displays a larger range than the main control - use visibleStart() and visibleEnd() methods to get the range.

Tutorial

Example

<div ng-app="main" ng-controller="DemoCtrl" >

    <div style="float:left; width:160px">
        <daypilot-navigator id="navigator" daypilot-config="navigatorConfig" daypilot-events="events"></daypilot-navigator>
    </div>
    <div style="margin-left: 160px">
        <daypilot-calendar id="calendar" daypilot-config="calendarConfig" daypilot-events="events" ></daypilot-calendar>
    </div>
    
</div>

<script>
    var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope, $timeout, $http) {
        
    $scope.navigatorConfig = {
      selectMode: "week",
      showMonths: 3,
      skipMonths: 3,
      // ...
    };
    
    $scope.calendarConfig = {
      // ...
    };
    
});

</script>

ASP.NET WebForms

Steps

1. Set VisibleRangeChangedHandling property to CallBack.

2. Set DataSourceID (or DataSource) property. You can use the same data source for DayPilotNavigator and for the main DayPilot control.

3. Set DataStartField and DataEndField.

4. Handle VisibleRangeChanged event:

  • Use VisibleStart and VisibleEnd properties to get the visible range.
  • Call DataBind() in the to reload the data.

5. The prefix_busy class is applied (added) to the busy days (see also CSS).

ASP.NET MVC

MVC View

Add BackendUrl and VisibleRangeChangedHandling to the config:

@Html.DayPilotNavigator("dpn", new DayPilotNavigatorConfig { 
  ShowMonths = 3,
  SkipMonths = 3,
  CssOnly = true,
  CssClassPrefix = "navigator_transparent",
  ShowWeekNumbers = true,
  BoundDayPilot = "dpc",
  SelectMode = NavigatorSelectMode.Week,
  BackendUrl = ResolveUrl("~/Calendar/NavigatorBackend"),
  VisibleRangeChangedHandling = VisibleRangeChangedHandlingType.CallBack
  
  })

MVC Controller

Redirect the "NavigatorBackend" action to a custom Dpn class that inherits from DayPilotNavigator class.

Override OnVisibleRangeChanged method and load events to Events property.

public class CalendarController : Controller
{
 
  // ...

  public ActionResult NavigatorBackend()
  {
      return new Dpn().CallBack(this);
  }

  public class Dpn : DayPilotNavigator
  {
      protected override void OnVisibleRangeChanged(VisibleRangeChangedArgs a)
      {
          Events = new EventManager(Controller).Data.AsEnumerable();
  
          DataStartField = "start";
          DataEndField = "end";
          DataIdField = "id";

      }

      // ...

  }
}