JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://javascript.daypilot.org/sandbox/js/daypilot-all.min.js?v=932"></script>
<div ng-app="main" ng-controller="DemoCtrl" >
    <daypilot-scheduler id="dp" daypilot-config="config" daypilot-events="events"></daypilot-scheduler>

  <p><button ng-click="clearEvents()">Clear Events</button></p>
</div>

JavaScript

var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope) {

    $scope.config = {
        resources: [
            {name:"Room 1", id:"1"},
            {name:"Room 2", id:"2"}
        ],
        cellDuration: 1440,
        days: 15,

        onTimeRangeSelect: function(args) {
            $scope.dp.clearSelection();
            var ev = {
                id: null,
                resource: args.resource,
                start: args.start,
                end: args.end,
            }
            $scope.dp.events.add(new DayPilot.Event(ev));
        },
    };
    
	$scope.events = [{
		id: null,
        resource: '1',
        start: new DayPilot.Date(),
        end: new DayPilot.Date().addDays(2)
	}];

    // clear events - click multiple times then add an event
	$scope.clearEvents = function() {
        console.debug($scope.events);
		$scope.events = [];
        $scope.dp.update();
	};

});