JSFiddle - React, Tailwind, and code Playground

by Mukesh Singh Negi

HTML

<script src="https://docs.dhtmlx.com/scheduler/codebase/dhtmlxscheduler.js"></script>
<script src="https://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_timeline.js"></script>
<link rel="stylesheet" href="https://docs.dhtmlx.com/scheduler/codebase/dhtmlxscheduler.css">
	<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>

CSS

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;
}

.dhx_matrix_scell{
  text-align:left;
}

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

.collection_label {
  z-index: 2;
}

.room_status {
	position: relative;
}


.room_status_indicator {
	position: absolute;
	background-color: red;
	left: 0;
	top: 0;
	right: 95%;
	bottom: 0;
}

.room_status_indicator_1 {
	background-color: #4CAF50;
}

.room_status_indicator_2 {
	background-color: red;
}

.room_status_indicator_3 {
	background-color: #FFA000;
}

.event_1 {
    background-color: #FFB74D !important;
}

.event_2 {
    background-color: #9CCC65 !important;
}

.event_3 {
    background-color: #40C4FF !important;
}

.event_4 {
    background-color: #BDBDBD !important;
}

JavaScript

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,
  event_dy: "full",
	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 =...