JSFiddle - React, Tailwind, and code Playground

by paul724

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>SSF Calendar</title>
<link rel="stylesheet" href="ssf.css" type="text/css">
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css">
<link type="text/css"  rel="stylesheet" href="http://www.stroudsladfarm.co.uk/admin02/jqdp406kw/smoothness.datepick.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.stroudsladfarm.co.uk/admin02/jqdp406kw/jquery.datepick.js"></script>
<script type="text/javascript" src="http://www.stroudsladfarm.co.uk/admin02/jqdp406kw/jquery.datepick.ext.js"></script>


<script type="text/javascript">
$(function() { // Shorthand for $(document).ready(function() {
    var selected_dates = new Array();
    // get all the events from the database using AJAX
    selected_dates = getSelectedDates();
    
    $('#dialog').dialog({
        autoOpen: false,
        draggable: true,
        resizable: false,
        width: 250
    });
    
    
    $('#hoverPicker').datepick({
            onShow: $.datepick.hoverCallback(showDialog),
            dateFormat: 'D dd-mm-yyyy',
            showTrigger: '#calImg',
            onSelect: function(dates) {
                listEvents(dates);
            }
        });
   
    function showDialog(date, selectable) {
// put the date in the dialog box        
        $('#dialog').dialog( "option" , 'title' , (selectable ? $.datepick.formatDate('D dd-M-yyyy', date) : '') || 'no date hovered');
        $("#dialog").html("The events on  " + (selectable ? $.datepick.formatDate('DD', date) + " are: " + selected_dates : '') || 'nothing');

// show the...