JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://javascript.daypilot.org/sandbox/js/daypilot-all.min.js?v=1214"></script>
<input type="button" value="clickme" id="poop"/>
<div class="container">
<div id="dps"></div>
<div id="dpc"></div>
</div>
<div id="log">
</div>
CSS
.container{
height:200px;
}
JavaScript
$("#poop").click(function(){
dps.rows.all()[0].events.collapseGroups()
})
$(function(){
dps = new DayPilot.Scheduler("dps");
dps.viewType = "Resources";
dps.allowMultiSelect = true;
dps.timeHeaders = [
{groupBy: 'Month', format: 'MMMM yyyy'},
{groupBy: 'Week'},
{groupBy: 'Day'},
{groupBy: 'Hour', format:"HH:mm"}
];
dps.events.list = [];
dps.events.list.push({
start:new DayPilot.Date().getDatePart().addHours(8), //"2012-10-02T00:00:00"
end:new DayPilot.Date().getDatePart().addHours(8).addMinutes(60), //"2012-11-02T01:00:00"
id: "3",
text: "Type boat1",
resource:"123"
})
dps.events.list.push({
start:new DayPilot.Date().getDatePart().addHours(8).addMinutes(60), //"2012-10-02T00:00:00"
end:new DayPilot.Date().getDatePart().addHours(8).addMinutes(60).addMinutes(60), //"2012-11-02T01:00:00"
id: "5",
text: "Type boat1",
resource:"123"
})
dps.events.list.push({
start:new DayPilot.Date().getDatePart().addHours(10).addMinutes(15), //"2012-10-02T00:00:00"
end:new DayPilot.Date().getDatePart().addHours(10).addMinutes(60), //"2012-11-02T01:00:00"
id: "4",
text: "Type boat1",
resource:"abc"
})
dps.groupConcurrentEvents = true;
dps.groupConcurrentEventsLimit = 1;
dps.resources = [
{
id:"123",
name:"Viktor"
},
{
id:"abc",
name:"Sanna"
}
]
dps.heightSpec = "Auto";//Parent100Pct
dps.cellWidthSpec = 'Auto';
dps.rowHeaderWidthAutoFit = false;
dps.useEventBoxes = "Never";
dps.init();
setTimeout(function(){
var ev = dps.events.find("4");
dps.multiselect.clear();
if(ev){
dps.multiselect.add(ev);
}
},1000)
})