JSFiddle - React, Tailwind, and code Playground

by veer712

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 src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js"></script>
<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'
        },
        editable: true,
        disableDragging: true,
        disableResizing: true,
        droppable: true,
        drop: function( date, allDay, jsEvent, ui ){
           console.log(jsEvent);
           console.log(ui);
        },
        // add event name to title attribute on mouseover
        eventMouseover: function(event, jsEvent, view) {            
            if (view.name == "month") {
                $(jsEvent.target).attr('title', event.title);
            }
            //alert(event.id);
        },
        // For DEMO only
        // *************
        events: [
            {   id: 1,
                title: 'User1',
                start: '2012-09-01',
                end: '2012-09-01',
                color:'#E9B33E',
                className: 'user-class1'},
            {   id: 2,
                title: 'User2',
                start: '2012-09-06',
                end: '2012-09-06',
                color:'#00813E',
                className: 'user-class2'},    
            {   id: 3,
                title: 'User3',
                start: '2012-09-06',
                end: '2012-09-06',
                color:'#E59238',
                className: 'user-class3'},     
            {   id: 4,
                title: 'User4',
                start: '2012-09-06',
                end: '2012-09-06',
                color:'#00813E',
                className: 'user-class4'},            
            {   id: 5,
                title: 'User5',
                start: '2012-09-08',
                end: '2012-09-08',
                color:'#00813E',
             ...