JSFiddle - React, Tailwind, and code Playground

HTML

<header>Mi Calendario</header>
<body>
    <script src="iCal.js"></script>
    <div>
        <div id="cal"></div>
        <div id="info">
            <p>Seleccione una fecha para ver los eventos
                <br>disponibles o para añadir uno nuevo.</p>
        </div>
    </div>
    <div id="events">
        <p id="fecha">Fecha
            <p>
                <p id="dates"></p>
                <input id="input" placeholder="pagar cuenta, aniversario, ..." size="20" type="text" />
                <button id="newevent">Nuevo evento</button>
    </div>
    <div id="prueba"></div>
</body>

JavaScript

var selectedDate;

$("#cal").datepicker({
    onSelect: function (date) {
        $("#newevent").hide().fadeIn(300);
        $("#fecha").hide().fadeIn(300).text(date + " :");
        $("#input").hide().fadeIn(300);
        selectedDate = date;
    }
});

function addEvent(a) {
    alert(a);
}

$("#newevent").click(function () {
    addEvent(selectedDate);
});