Edit in JSFiddle

scheduler.locale.labels.section_custom="Section";
scheduler.config.details_on_create=true;
scheduler.config.details_on_dblclick=true;
scheduler.config.xml_date="%Y-%m-%d %H:%i";

//===============
//Configuration
//===============

scheduler.serverList("roomTypes");
scheduler.serverList("roomStatuses");
scheduler.serverList("bookingStatuses");
scheduler.serverList("rooms");

scheduler.createTimelineView({
	name:	"timeline",
	x_unit:	"minute",
	x_date:	"%H:%i",
	x_step:	30,
	x_size: 24,
	x_start: 16,
	x_length:	48,
	y_unit:	scheduler.serverList("rooms"),
	y_property:	"room",
	render:"bar"
});

//===============
//Data loading
//===============
scheduler.config.lightbox.sections=[
	{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
	{name:"custom", height:23, type:"select", options:	scheduler.serverList("rooms"), map_to:"room" },
	{name:"time", height:72, type:"time", map_to:"auto"}
];

scheduler.init('scheduler_here',new Date(2017,2,30),"timeline");
scheduler.parse(JSON.stringify({
	"data":[
		{"room":"1","start_date":"2017-03-02","end_date":"2017-03-23","text":"A-12","id":"1","status":"1","is_paid":"1"},
		{"room":"3","start_date":"2017-03-07","end_date":"2017-03-21","text":"A-45","id":"2","status":"2","is_paid":"1"},
		{"room":"5","start_date":"2017-03-06","end_date":"2017-03-14","text":"A-58","id":"3","status":"3","is_paid":"0"},
		{"room":"7","start_date":"2017-03-04","end_date":"2017-03-18","text":"A-28","id":"4","status":"4","is_paid":"0"}],
	"collections":{
		"roomTypes":[
			{"value":"1","label":"1 bed"},
			{"value":"2","label":"2 beds"},
			{"value":"3","label":"3 beds"},
			{"value":"4","label":"4 beds"}
		],
		"roomStatuses":[
			{"value":"1","label":"Ready"},
			{"value":"2","label":"Dirty"},
			{"value":"3","label":"Clean up"}
		],
		"bookingStatuses":[
			{"value":"1","label":"New"},
			{"value":"2","label":"Confirmed"},
			{"value":"3","label":"Arrived"},
			{"value":"4","label":"Checked Out"}
		],
		"rooms":[
			{"value":"1","label":"101","type":"1","status":"1"},
			{"value":"2","label":"102","type":"1","status":"3"},
			{"value":"3","label":"103","type":"1","status":"2"},
			{"value":"4","label":"104","type":"1","status":"1"},
			{"value":"5","label":"105","type":"2","status":"1"},
			{"value":"6","label":"201","type":"2","status":"2"},
			{"value":"7","label":"202","type":"2","status":"1"},
			{"value":"8","label":"203","type":"3","status":"3"},
			{"value":"9","label":"204","type":"3","status":"3"},
			{"value":"10","label":"301","type":"4","status":"2"},
			{"value":"11","label":"302","type":"4","status":"2"}
		]
	}
}),"json");
	<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>		
	</div>
html, body{
  margin:0;
  padding:0;
  height:100%;
  overflow:hidden;
}

External resources loaded into this fiddle: