JSFiddle - React, Tailwind, and code Playground

by Cédric Martel

HTML

<div id="creneauGarde"></div>
<br/>
<hr>
<br/>
<div>
    <button id='btnSelection'>get selection</button>
    <label id='selection' />
</div>
<div>
    <button id='btnSetSelection'>set selection</button>
</div>
<button id='btnSave'>Save</button>
<button id='btnLoad'>Load</button>
<label id="saveInfo"></label>
<div>
    <input type="text" id="frames" value="[[7.5, 19.5]]" />
    <button id="btnSetFrames">Set Frame</button>
</div>
<div>
    <input type="text" id="exclusions" value="[[7.5, 9],[13.5,14.5]]" />
    <button id="btnSetExclusions">Set Exclusion</button>
</div>
<div>
    <button id="btnNoFramesExclusions">No Frames / Exclusions</button>
</div>

CSS

.creneauTable {
    border: 1px solid lightgray;
}
.creneauSelector {
    background-color: white;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding: 2px 6px 2px 6px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none !important;
    user-select: none;
}
.creneauSelector:hover {
    background-color: #FFE158;
}
.creneauSelected {
    background-color: #51B6F1;
}
.creneauSelectedTemp {
    background-color: #00FFFF !important;
}
.creneauUnselectable {
    background-color: #D8D8D8 !important;
}

JavaScript

// gestionnaire de créneaux à la demie heure
// plugin jquery ui

$(function () {
    $.widget("custom.creneau", {
        options: null,

        // constructor
        _create: function () {
            var defautOptions = {
                heureDebut: 7,
                peutSaisirMinute: false,
                boutons: {
                    position: "bas", // "haut" ou "bas"
                    element: "a", // "a" ou "button"
                    boutonAucun: true,
                    boutonTous: false,
                },
                events: {
                    onDragStart: null,
                    onDragStop: null,
                    onChange: null, 
                },
                frame: null
            };
            this.options = $.extend(true, {}, defautOptions, this.options);

            var curTr = null,
                td;

            // sélection multiple / minute
            if (this.options.peutSaisirMinute) {
                $("<div style='width:100%; text-align:center;'><input type='radio' name='selType' value='mu' id='selTypeMu' checked='checked'><label for='selTypeMu'>Saisie multiple à la demie  heure</label>&nbsp;&nbsp;&nbsp;&nbsp;<input type='radio' name='selType' value='mi' id='selTypeMi'><label for='selTypeMi'>Saisie à la minute</label></div>").appendTo(this.element);
                this._on($(this.element.find("input[type=radio]")), {
                    change: this._selMinuteCreneauChange
                });

                var selMin = $("<table class='selMinutes' style='display:none' />").appendTo(this.element);
                curTr = $("<tr/>").appendTo(selMin);
                $("<td>Début</td>").appendTo(curTr);
                $("<td><input class='timeDeb' type='text' style='width:50px' /></td>").appendTo(curTr);
                $("<td class='j1Deb' style='display:none'>J+1</td>").appendTo(curTr);
                $("<td>Fin</td>").appendTo(curTr);
                $("<td><input class='timeFin' type='text'...