javascript date picker with free busy highlighting open source

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

JavaScript Date Picker

You can load events using events.list array. 

  • The objects in the array use the same format as the main UI component (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">
    const datePicker = new DayPilot.Navigator("nav", {
        showMonths: 3,
        selectMode: "Week",
    });
    datePicker.init();

    // ...

    datePicker.update({events: [{start: "2023-03-01", end: "2023-03-20"}] });

</script>

Vue Date Picker

The Vue date picker can load the event (free/busy) data automatically using the :events attribute. The free/busy highlighting will be updated automatically when the data source changes.

Example

<template>
  <DayPilotNavigator id="nav" :config="datePickerConfig" :events="events" />
</template>

<script>
import {DayPilot, DayPilotCalendar, DayPilotNavigator} from '@daypilot/daypilot-lite-vue'

export default {
  name: 'FreeBusyDatePicker',
  data: function() {
    return {
      events: [],
      datePickerConfig: {
        // ...
      },
      // ...
    }
  },
  components: {
    DayPilotNavigator
  },
  mounted() {
    this.events =[
      {
        id: 1,
        start: "2022-06-05T10:00:00",
        end: "2022-06-05T11:00:00",
        text: "Event 1",
        barColor: "#6aa84f",
      },
      // ...
    ];
  }
}
</script>

Tutorial

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";

      }

      // ...

  }
}

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>