JSFiddle - React, Tailwind, and code Playground

by romulotorres

HTML

<link rel="stylesheet" href="http://dl.dropbox.com/u/1510510/temp/demo/fullcalendar.css">
<script src="http://dl.dropbox.com/u/1510510/temp/demo/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
<body>
    <div id='wrap'>
        <div id='external-events'>
             <h4>Eventos</h4>

            <div class='external-event'>Evento 1</div>
            <div class='external-event'>Evento 2</div>
            <div class='external-event'>Evento 3</div>
            <div class='external-event'>Evento 4</div>
            <div class='external-event'>Evento 5</div>
            <p>
                <input type='checkbox' id='drop-remove' />
                <label for='drop-remove'>Remover após soltar</label>
            </p>
            <input type="button" value="Exibir dados" id="exibir-dados">
        </div>
        <div id='calendar'></div>
        <div style='clear:both'></div>
    </div>
</body>

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-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;
    }
    #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;
    }
#exibir-dados{
    text-align: center;
    margin: 0 auto;
    display: block;
    margin-bottom: 20px;
}
}

JavaScript

$(document).ready(function () {

    // Inicializando os eventos
    // -----------------------------------------------------------------*/

    $('#external-events div.external-event').each(function () {
        var eventObject = {
            title: $.trim($(this).text()) // Usa o texto como título do evento
        };

        // armazena o objeto do evento ao DOM para usar depois
        $(this).data('eventObject', eventObject);

        // ativar o drag and drop com jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true, // Voltar se não for colocado em um local válido
            revertDuration: 0
        });
    });

    // Vou armazenar meus eventos aqui
    var armazenamento = [];
    
    // Função auxiliar para clonar o objeto
    function clone(obj) {
        var novoObjeto = {};
        return jQuery.extend(novoObjeto,obj);
    }

    // Inicializar o calendário
    // -----------------------------------------------------------------*/
    
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        droppable: true, // Ativando o drop
        drop: function (date, allDay) { // Essa função será chamada quando o evento for solto 
            // pegando o elemento dropado
            var originalEventObject = $(this).data('eventObject');
            
            // A cópia foi feita para que multiplos eventos não tenham a mesma referencia
            var copiedEventObject = $.extend({}, originalEventObject);

            // Coloca os valores de data no objeto
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;
            
            // Guardando a informação
            armazenamento.push(clone(copiedEventObject));
            
            // Renderizar o novo evento
            $('#calendar').fullCalendar('renderEvent',...