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 as dc" >
    <daypilot-scheduler id="dp" config="dc.config" events="dc.events" publish-as="dc.scheduler"></daypilot-scheduler>

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

JavaScript

var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope) {
		var dc = this;
    dc.config = {
        resources: [
            {name:"Room 1", id:"1"},
            {name:"Room 2", id:"2"}
        ],
        cellDuration: 1440,
        days: 15,

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

    // clear events - click multiple times then add an event
	dc.clearEvents = function() {
        console.debug(dc.events);
		dc.events.splice(0, dc.events.length);
	};

});