JSFiddle - React, Tailwind, and code Playground

by 100thGear

HTML

<link rel="stylesheet" href="http://dl.dropbox.com/u/1510510/temp/demo/fullcalendar.css">
<script src="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.js"></script>
<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.3/demos/cupertino/theme.css">
<script type="text/javascript">
function iconsAlert(iconID,dtype){alert("ID:"+iconID+"\nType:"+dtype);return false;}
</script>
<div style="background-color:#F9F0AB">Drag Icons</div>
<div id="external-events">    
    <div class="passport-event"></div>
    <div class="visa-event"></div>
    <div class="entrystamp-event"></div>
    <div class="traveldoc-event"></div>                          
</div>
<hr />
<div id='calendar'></div>

CSS

#external-events div {
        font-size: 16px;
        margin: 0px;
        padding: 0px;             
        }
        
    .external-event { /* try to mimick the look of a real event */
        margin: 10px 0;
        padding: 2px 4px;
        background: #3366CC;
        color: #fff;
        font-size: .85em;
        cursor: pointer;
        border-radius: 3px;
        }
    .passport-event { /* try to mimick the look of a real event */
        margin-right: 1em;
        position: relative;
        top: 4px;        
        background: url(http://png-5.findicons.com/files//icons/2018/business_icons_for/16/passport.png) no-repeat scroll 0 0 transparent;
        display: inline-block;
        height: 16px;
        width: 16px;
        }
    .visa-event{ /* try to mimick the look of a real event */
        margin-right: 1em;
        position: relative;
        top: 4px;        
        background: url(http://findicons.com/files//icons/1571/chalkwork_payments/16/card_visa.png) no-repeat scroll 0 0 transparent;
        display: inline-block;
        height: 16px;
        width: 16px;
    }
    .entrystamp-event{ /* try to mimick the look of a real event */
        margin-right: 1em;
        position: relative;
        top: 4px;
        background: url(http://findicons.com/files//icons/894/banking_stuff/16/postage_stamp.png) no-repeat scroll 0 0 transparent;
        display: inline-block;
        height: 16px;
        width: 16px;
        }
    .traveldoc-event{ /* try to mimick the look of a real event */
        margin-right: 1em;
        position: relative;
        top: 4px;
        background: url(http://findicons.com/files//icons/756/ginux/16/richtext.png) no-repeat scroll 0 0 transparent;
        display: inline-block;
        height: 16px;
        width: 16px;
        }

JavaScript

// FullCalendar v1.5
// Script modified from the "theme.html" demo file

$(document).ready(function() {    
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        droppable: true,
        drop: function(date, allDay, jsEvent, ui) {
            var tempEvent = {start: date, end: date};
            $('#calendar').fullCalendar('clientEvents',function(event){
                console.log(event);
            });
        },
        editable: true,
        
        // add event name to title attribute on mouseover
        eventMouseover: function(event, jsEvent, view) {
            if (view.name !== 'agendaDay') {
                $(jsEvent.target).attr('title', event.title);
            }
        },
        
        eventAfterRender: function(event, element, view) {  
             var width = $(element).width();
            
        
             // Check which class the event has so you know whether it's half or quarter width
            if($(element).hasClass("e1-event")){
                width = width / 4;
            }
            if($(element).hasClass("e2-event")){
                width = width / 4;
            }
            if($(element).hasClass("e3-event")){
                width = width / 4;
            }
            if($(element).hasClass("e4-event")){
                width = width / 4;
            }
        
             // Set the new width
             $(element).css('width', width + 'px');
          },

        // For DEMO only
        // *************
        events: [
            {   id: 1,
                title: 'User1',
                start: '2012-08-01',
                end: '2012-08-01',
                color:'#E9B33E',
                className: 'user-class1'},
            {   id: 2,
 ...