JSFiddle - React, Tailwind, and code Playground

by jac

HTML

<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_timeline.js"></script>
<link rel="stylesheet" href="http://docs.dhtmlx.com/scheduler/codebase/dhtmlxscheduler.css">
<script src="http://docs.dhtmlx.com/scheduler/codebase/dhtmlxscheduler.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_serialize.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_active_links.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_limit.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_editors.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_collision.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_readonly.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_readonly.js"></script>
<div id="scheduler_here" class="dhx_cal_container" style='width:1200px; height:900px;'>
		<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="month_tab" style="right:76px;"></div>
		</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;
		}

		.dhx_cal_event div.dhx_footer,
		.dhx_cal_event.past_event div.dhx_footer,
		.dhx_cal_event.event_english div.dhx_footer,
		.dhx_cal_event.event_math div.dhx_footer,
		.dhx_cal_event.event_science div.dhx_footer{
			background-color: transparent !important;
		}
		.dhx_cal_event .dhx_body{
			-webkit-transition: opacity 0.1s;
			transition: opacity 0.1s;
			opacity: 0.7;
		}
		.dhx_cal_event .dhx_title{
			line-height: 12px;
		}
		.dhx_cal_event_line:hover,
		.dhx_cal_event:hover .dhx_body,
		.dhx_cal_event.selected .dhx_body,
		.dhx_cal_event.dhx_cal_select_menu .dhx_body{
			opacity: 1;
		}

		.dhx_cal_event.event_math div, .dhx_cal_event_line.event_math{
			background-color: orange !important;
			border-color: #a36800 !important;
		}
		.dhx_cal_event_clear.event_math{
			color:orange !important;
		}

		.dhx_cal_event.event_science div, .dhx_cal_event_line.event_science{
			background-color: #36BD14 !important;
			border-color: #698490 !important;
		}
		.dhx_cal_event_clear.event_science{
			color:#36BD14 !important;
		}

		.dhx_cal_event.event_english div, .dhx_cal_event_line.event_english{
			background-color: #FC5BD5 !important;
			border-color: #839595 !important;
		}
		.dhx_cal_event_clear.event_english{
			color:#B82594 !important;
		}
		/* enabling marked timespans for month view */
		.dhx_scheduler_month .dhx_marked_timespan {
			display: block;
		}
		/* style to display special dates, e.g. holidays */
		.holiday {
	        background-color: #fadcd3;
			text-align: center;
			font-size: 24px;
			opacity: 0.8;
			color: #e2b8ac;
		}
		/* we don't want to show that marked timespans on day and week views */
		.dhx_scheduler_day .pending, .dhx_scheduler_week .pending, .dhx_scheduler_day .completed, .dhx_scheduler_week .completed {
			display: none;
		}

JavaScript

scheduler.config.xml_date="%Y-%m-%d %H:%i";
			scheduler.config.time_step = 5;
			scheduler.config.multi_day = false;
			scheduler.locale.labels.section_subject = "Type_Confort";
			scheduler.config.first_hour = 6;
			scheduler.config.limit_time_select = true;
			scheduler.config.details_on_dblclick = true;
			scheduler.config.details_on_create = true;
			scheduler.config.collision_limit = 4;
            scheduler.config.event_duration = 1; 
            scheduler.config.auto_end_date = true;
			scheduler.attachEvent("onEventCollision", function (ev, evs){
				 alert("Sorry, you're allowed to have just 4 event per time slot");
				return true;
			        });
                 
                scheduler.attachEvent("onLightbox", function(){
                   var section = scheduler.formSection("description");
                   section.control.disabled = false;
                });

			scheduler.templates.event_class=function(start, end, event){
				var css = "";

				if(event.subject) // if event has subject property then special class should be assigned
					css += "event_"+event.subject;

				if(event.id == scheduler.getState().select_id){
					css += " selected";
				}
				return css; // default return

				/*
					Note that it is possible to create more complex checks
					events with the same properties could have different CSS classes depending on the current view:

					var mode = scheduler.getState().mode;
					if(mode == "day"){
						// custom logic here
					}
					else {
						// custom logic here
					}
				*/
			};

			var subject = [
				{ key: '', label: 'C1' },
				{ key: 'english', label: 'C2' },
				{ key: 'math', label: 'C3' },
				{ key: 'science', label: 'C4' }
			];

			scheduler.config.lightbox.sections=[
                { name:"description", height:50, map_to:"text", type:"textarea", focus:true, default_value:"Confort" },
				{name:"subject", height:20, type:"select", options: subject, map_to:"subject" },
				{name:"time", height:72,...