JSFiddle - React, Tailwind, and code Playground

by Bhaumik Mehta

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/calendar/themes/claro/Calendar.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">
<div class="claro">
<div id="myCal"></div>
</div>

        <div id="event-dialog" class="dialog-popup">
            <a href="#" class="close"><img src="http://benohead.com/wp-content/uploads/2013/08/close.png" class="close-button" title="Close this dalog" alt="Close" /></a>
            <form method="post" action="#">
                <h3 align="center">
                  Create Event
                </h3>
                <fieldset>
                    <label for="eventName">
                        <span>Event Name</span>
                        <input type="text" id="eventName" class="eventName" name="eventName" placeholder="Event Name" value="">
                    </label>
                    <label for="fromDate">
                        <span>From Date and Time</span>
                        <input type="datetime-local" id="fromDate" class="fromDate" name="fromDate">
                    </label>
                    <label for="toDate">
                        <span>To Date and Time</span>
                        <input type="datetime-local" id="toDate" class="toDate" name="toDate">
                    </label>
                    
                    </fieldset>
                <button class="submit" type="button">Login</button>
            </form>
        </div>
        <div id="dialog-overlay" class="dialog-overlay" title="Click here to close the dialog">

CSS

#dialog-overlay {
            background: rgba(0,0,0,0.2);
            bottom: 0;
            display: none;
            height: 100%;
            left: 0;
            margin-left: auto;
            margin-right: auto;
            position: fixed;
            right: 0;
            top: 0;
            width: 100%;
            z-index: 99998;
        }

        .dialog-popup {
            width: 250px;
            left: 0;
            right: 0;
            margin: 0 auto;
            background: none repeat scroll 0 0 #CCCCCC;
            border: 2px solid #222222;
            border-radius: 3px 3px 3px 3px;
            font-family: Verdana,Geneva,sans-serif;
            padding: 10px;
            display: none;
            position: fixed;
            z-index: 99999; 
        }

        .dialog-popup .close-button {
            float: right;
            margin: -26px -26px 0 0;
        }

        .dialog-popup form fieldset {
            border: medium none;
            padding: 0;
        }

        .dialog-popup form fieldset label {
            display: block;
            font-size: 1.2em;
        }

        .dialog-popup form fieldset label span,
        .dialog-popup form fieldset label input,
        .dialog-popup form button,
        .dialog-popup form a {
            display: block;
            margin-bottom: 10px;
        }

        .dialog-popup form fieldset label input {
            background: none repeat scroll 0 0 #EEEEEE;
            border-color: #FFFFFF #DDDDDD #DDDDDD #FFFFFF;
            border-radius: 3px 3px 3px 3px;
            border-style: solid;
            border-width: 1px;
            color: #000000;
            padding: 6px 6px 4px;
            width: 200px;
        }

        .dialog-popup form button.submit {
            border-color: #000000;
            border-radius: 3px 3px 3px 3px;
            border-width: 1px;
            cursor: pointer;
            margin-top: 10px;
            padding: 6px 6px 4px;
            width:...

JavaScript

require([
	"dojo/parser", 
  "dojo/ready", 
  "dojox/calendar/Calendar", 
  "dojox/calendar/MobileCalendar",
  "dojox/calendar/Touch",
  "dojo/store/Observable",
  "dojo/store/Memory",
  "dojo/dom-attr",
  "dojo/dom-style",
  "dojo/query",
  "dojo/has", 
  "dojo/sniff"

], function(parser, ready, Calendar, MobileCalendar, Touch, Observable, Memory, domAttr, domStyle, query, has){

  ready(function(){
  
  	/*function pad(number) {
      if (number < 10) {
        return '0' + number;
      }
      return number;
    }
  
  	Date.prototype.toISOString = function() {
      return this.getUTCFullYear() +
        '-' + pad(this.getUTCMonth() + 1) +
        '-' + pad(this.getUTCDate()) +
        'T' + pad(this.getUTCHours()) +
        ':' + pad(this.getUTCMinutes()) +
        ':' + pad(this.getUTCSeconds()) +
        '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) +
        'Z';
    };*/

    var someData = [
      {
        id: 0,
        summary: "Bhaumik's Event",
        startTime: new Date("10/07/2016 10:00"),
        endTime: new Date("10/07/2016 12:00")
      }
    ];

    if (has("ios") || has("android") || has("bb") || has("wii") || has("safari")) { 

      var calendar = new MobileCalendar({}, "myCal");

    } else {

      var calendar = new Calendar({}, "myCal");
    }
    
    calendar.set({
    	editable: true,
			moveEnabled: true,
			resizeEnabled: true,
			createOnGridClick: true,
      store: new Observable(new Memory({data: someData})),
      dateInterval: "week"
    });
    
    var id = 2;
    var startDate;
    var endDate;
    var count = 0;
    var dialog = query(".dialog-popup")[0];
    var closeBtn = query(".close")[0];
    var toDate = query(".toDate")[0];
    var fromDate = query(".fromDate")[0];
    var eventName = query(".eventName")[0];
    var submit = query(".submit")[0];
    
    var createItem = function(view, d, e) {
    
      var isoString = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + 'T' +...