JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.scheduler-bundled.js"></script>
<script src="https://jp.igniteui.com/js-data/scheduler-data"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div id="scheduler"></div>

JavaScript

$( function () {
			$("#scheduler").igScheduler({
				height: "650px",
				width: "100%",
				agendaViewSettings: {
					dateRangeInterval: 10
				},
                weekViewSettings: {
                    timeSlotInterval: "fiveMinutes",
                    weekViewDisplayMode: "workingDaysOnly"
                },
                dayViewSettings: {
                    timeSlotInterval: "tenMinutes",
                    dayViewNumberOfDays: "3",
                },
				selectedDate: today,
                dataSource: appointments,
                resources: resources
			});
		});