Edit in JSFiddle

window.showRooms = function showRooms(type) {
  var allRooms = scheduler.serverList("rooms");
	var visibleRooms ;
	if (type == 'all') {
		visibleRooms = allRooms.slice();
	}else{
        visibleRooms = allRooms
          .filter(function(room){
             return room.type == type;
        });
    }

  scheduler.updateCollection("visibleRooms", visibleRooms);
};


scheduler.locale.labels.section_custom="Section";
scheduler.config.details_on_create=true;
scheduler.config.details_on_dblclick=true;

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

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

scheduler.createTimelineView({
	name:	"timeline",
	x_unit: "day",
	x_date: "%j",
	x_step: 1,
	x_size: 31,
	section_autoheight: false,
	y_unit:	scheduler.serverList("visibleRooms"),
	y_property:	"room",
	render:"bar",
	round_position:true,
	dy:60,
	second_scale:{
		x_unit: "month", 
		x_date: "%F, %Y" 
	}
});

scheduler.attachEvent("onBeforeViewChange", function(old_mode,old_date,mode,date){
	var year = date.getFullYear();
	var month= (date.getMonth() + 1);
	var d = new Date(year, month, 0);
	var daysInMonth = d.getDate();
  var timeline = scheduler.getView('timeline'); 
  timeline.x_size = daysInMonth;
	return true;
});

scheduler.date.timeline_start = scheduler.date.month_start;

scheduler.date.add_timeline = function(date, step){
	if(step > 0){
		step = 1;
	}else if(step < 0){
		step = -1;
	}
	return scheduler.date.add(date, step, "month")
};



//===============
//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.attachEvent('onEventCreated', function (event_id) {
  var ev = scheduler.getEvent(event_id);
  ev.status = 1;
  ev.is_paid = false;
  ev.text = 'new booking';
});

scheduler.attachEvent("onParse", function(){
  showRooms("all");
  
  var roomSelect = document.querySelector("#room_filter");
  var types = scheduler.serverList("roomTypes");
  var typeElements = ["<option value='all'>All</option>"];
  types.forEach(function(type){
     typeElements.push("<option value='"+type.key+"'>" + type.label +"</option>");
  });
  roomSelect.innerHTML = typeElements.join("")
});

var headerHTML = "<div class='timeline_item_separator'></div>" +
    "<div class='timeline_item_cell'>Number</div>" +
    "<div class='timeline_item_separator'></div>" +
    "<div class='timeline_item_cell'>Type</div>" +
    "<div class='timeline_item_separator'></div>" +
    "<div class='timeline_item_cell room_status'>Status</div>";

scheduler.locale.labels.timeline_scale_header = headerHTML;

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>
			<select id="room_filter" onchange='showRooms(this.value)'></select>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>		
	</div>

html, body{
  margin:0;
  padding:0;
  height:100%;
  overflow:hidden;
}

.timeline_item_cell {
  width: 32%;
  font-size: 14px;
  text-align: center;
}

.timeline_item_separator {
  background-color: #CECECE;
  width: 1px;
  height: 100% !important;
}

.timeline_item_separator,
.timeline_item_cell {
  vertical-align:top;
  height: 100%;
  display:inline-block;
  line-height: 50px;
  vertical-align:top;
}

.collection_label {
  z-index: 2;
}