JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.htmlhifive.com/h5.css">
<script src="https://code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script>
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/calendar/src/CalendarController.js"></script>
<link rel="stylesheet" href="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/calendar/src/CalendarController.css">
<div id="container"></div>
<p>
  <select id="selDowName">
    <option value="sun" selected="">日曜日</option>
    <option value="mon">月曜日</option>
    <option value="tue">火曜日</option>
    <option value="wed">水曜日</option>
    <option value="thu">木曜日</option>
    <option value="fri">金曜日</option>
    <option value="sat">土曜日</option>
  </select>
  <select id="selCssDowName">
　　<option selected="">default</option>
    <option>blue</option>
    <option>red</option>
  </select>
  <input type="button" id="btnCssDow" value="適用">
</p>

CSS

.blue {
	color: white;
	font-weight: bold;
	background: blue;
}

.red {
	color: white;
	font-weight: bold;
	background: red;
}

JavaScript

$(function(){
  var disableDates = [];
	var mainController = {
		__name : 'h5.ui.container.MainController',
		calendarController: h5.ui.components.Calendar,
		__meta : {
			calendarController: {
				rootElement: '#container'
			},
		},

		__init: function(){
    	this.$find(".select:first").attr("checked", true);
		},
    
    		// 週間の日のスタイルにCSSでカスタマイズ
		'#btnCssDow click': function() {
			this.calendarController.setCssClassForDow(
				this.$find('#selDowName').val(), 
        this.$find("#selCssDowName").val()
      );
		},
	};

	h5.core.controller('body', mainController);

});