JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://javascript.daypilot.org/sandbox/js/daypilot-all.min.js?v=932"></script>
<button id="thebutton">Click me</button>
<div id="dp"><div>
CSS
.container{
height:200px;
}
JavaScript
$('#thebutton').click( function() {
var dp = new DayPilot.Scheduler("dp");
dp.treeEnabled = true;
dp.resources = [
{ name: "Tools", id: "Tools", expanded: true, children:[
{ name : "Tool 1", id : "Tool1" },
{ name : "Tool 2", id : "Tool2" }
]
},
{ name: "People", id: "People", expanded: true, children:[
{ name : "Person 1", id : "Person1" },
{ name : "Person 2", id : "Person2" }
]
},
{ name: "Locations", id: "Locations", expanded: true, children:[
{ name : "<select><option value='1' selected='true'>value1</option><option value='2' >value2</option></select>", id : "select1" },
{ name : "<select><option value='3' selected='true'>value3</option><option value='2' >value2</option></select>", id : "select2" }
]
}
];
// generate and load events
dp.events.list = [
{
start: "2015-03-02T00:00:00",
end: "2015-03-04T00:00:00",
id: 1,
resource: "Tool1",
text: "Event #1"
},
{
start: "2015-03-03T00:00:00",
end: "2015-03-06T00:00:00",
id: 2,
resource: "Tool2",
text: "Event #2"
},
];
dp.init();
dp.resources[2].children[0].name = "<select><option value='1'>value1</option><option value='2' selected='true'>value2</option></select>"
dp.update();
dp.resources[0].children[0].name = "Tool zz";
dp.resources[0].children[0].id = "Toolzz";
dp.update();
});
var dp = new DayPilot.Scheduler("dp");
dp.treeEnabled = true;
dp.resources = [
{ name: "Tools", id: "Tools", expanded: true, children:[
{ name : "Tool 1", id : "Tool1" },
{ name : "Tool 2", id : "Tool2" }
]
},
{ name: "People", id: "People", expanded: true, children:[
{ name : "Person 1", id : "Person1" },
{ name : "Person 2", id : "Person2" }
]
},
{ name: "Locations", id: "Locations", expanded: true, children:[
{ name :...