JSFiddle - React, Tailwind, and code Playground

by mukkaram waheed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- <div id='wrap'>

  <div id='external-events'>
    <h4>Draggable Events</h4>
    <div class='fc-event' data-event='{"id": 1, "randomProperty": "foobar", "title": "This is event 1"}'>My Event 1</div>
  </div>

  <div id='calendar'></div>

  <div style='clear:both'></div>

</div>
 -->
 
 <div id="amethystBackground2"> <!-- CSS for background page !-->
    <br /><br />
    <div class="container">
        <div id='calendar' style="background:#ECF0F1"></div>
    </div>
</div>

<!--Add event modal-->
<div id="createEventModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span> <span class="sr-only">close</span></button>
                <h4>Add an Event</h4>
            </div>
            <div id="modalBody" class="modal-body">
               <div class="form-group">
                    <input class="form-control" type="text" placeholder="Event Name">
                </div>

                <div class="form-group form-inline">
                    <div class="input-group date" data-provide="datepicker">
                        <input type="text" class="form-control" placeholder="Due Date mm/dd/yyyy">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <textarea...

CSS

body {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

#wrap {
  width: 1100px;
  margin: 0 auto;
}

#external-events {
  float: left;
  width: 150px;
  padding: 0 10px;
  border: 1px solid #ccc;
  background: #eee;
  text-align: left;
}

#external-events h4 {
  font-size: 16px;
  margin-top: 0;
  padding-top: 1em;
}

#external-events .fc-event {
  margin: 10px 0;
  cursor: pointer;
}

#external-events p {
  margin: 1.5em 0;
  font-size: 11px;
  color: #666;
}

#external-events p input {
  margin: 0;
  vertical-align: middle;
}

#calendar {
  float: right;
  width: 900px;
}

JavaScript

$(document).ready(function () {
    // page is now ready, initialize the calendar...
     $('#calendar').fullCalendar({
        // put your options and callbacks here
        defaultView: 'agendaDay',
        eventBorderColor: "#de1f1f",

         header:
        {  
            left: 'prev,next,today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

        editable: true,
        selectable: true,

        //When u select some space in the calendar do the following:
        select: function (start, end, allDay) {
            //do something when space selected
            //Show 'add event' modal
            $('#createEventModal').modal('show');
        },

        //When u drop an event in the calendar do the following:
        eventDrop: function (event, delta, revertFunc) {
            //do something when event is dropped at a new location
        },

        //When u resize an event in the calendar do the following:
        eventResize: function (event, delta, revertFunc) {
            //do something when event is resized
        },

        eventRender: function(event, element) {
            $(element).tooltip({title: event.title});             
        },

        //Activating modal for 'when an event is clicked'
        eventClick: function (event) {
            $('#modalTitle').html(event.title);
            $('#modalBody').html(event.description);
            $('#fullCalModal').modal();
        },
    })

      $('#submitButton').on('click', function(e){
            // We don't want this to act as a link so cancel the link action
            e.preventDefault();

            doSubmit();
          });

      function doSubmit(){
        $("#createEventModal").modal('hide');
        $("#calendar").fullCalendar('renderEvent',
            {
                title: $('#eventName').val(),
                start: new Date($('#eventDueDate').val()),

            },
            true);
       }
    });





/* Edited from...