JSFiddle - React, Tailwind, and code Playground

Saving events on Fullcalendar : or : Live calendar update on popover

by brasofilo

HTML

<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.0/fullcalendar.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.0/fullcalendar.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.0/lang/pt-br.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<h3 class="fiddle-header">Live calendar update on popover</h3>

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

<div id="eventToAdd">
    <div class="form-group">
        <input type="text" class="form-control input-lg" id="eventTitle" placeholder="Title" />
    </div>
    <div class="form-group">
        <input class="form-control input-sm" type="text" placeholder="Description" id="eventDesc" />
    </div>
</div>

<div id="text" style="position:absolute;visibility:hidden" ></div>

CSS

.popover {
    width: 250px;
}
.fiddle-header {
    background-color: #ddd;
    margin:0 0 10px 0;
    text-align: center;
    color: #fff
}
.fc-button-group {
    padding: 0 10px;
}
.fc-center h2 {
    font-size:20px
}
.fc-toolbar {
    margin-bottom: .1em;
}
.save-cal {
    position:absolute;
    /*right: -55px;
    margin-top: -19px !important;
    bottom:0;*/
    bottom: -35px;
    left: 0;
    display: none
}
#eventToAdd {
    display:none
}
input.form-control {
    width: 94%;
}
.popcontent em {
    font-style:italic;
    color:#bbb
}

JavaScript

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var last_click_time = new Date().getTime();

// http://stackoverflow.com/q/12573134/1287812
var calendarView = (!$.cookie('calendarDefaultView')) ? 'month' : $.cookie('calendarDefaultView');

// Editing events
var saveButton = '<button type="button" class="save-cal btn btn-default btn-xs">save</button>';

/**
 * Force double click on dayClick
 * http://stackoverflow.com/a/23658604/1287812
 */
function cfDoubleClick() {
    var this_click_time = new Date().getTime();
    var time_since_last_click = this_click_time - last_click_time;
    last_click_time = this_click_time;
    if( time_since_last_click < 300 )
        return true;
    return false;
}

/**
 * Save updated event
 */
function endEdit(content,title) {
    window.currentEvent.msg = content;
    window.currentEvent.title = title;
    $('#calendar').fullCalendar('updateEvent', window.currentEvent);
    $('.popover').remove();
}

/**
 * Popovers click behavior
 */
$('body').on('click', '.popover-content .editable, .popover-title .editable', function () {
    $click = $(this);
    $click.attr('contenteditable', 'true').focus();
    $click.closest('.popover.fade').find('.save-cal').show();
    $('.save-cal').click(function () {
        var cont_text = $(this).closest('.popover').find('.popover-content .editable').text();
        var tit_text = $(this).closest('.popover').find('.popover-title .editable').text();
        if( cont_text == 'enter description' ) cont_text = '';
        endEdit( cont_text, tit_text );
    });
});

/**
 * fullCallendar()
 */
function renderCalendar() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay' // basicWeek,basicDay,
        },
        defaultView: 'agendaDay',
        editable: true,
        //droppable: true,
        //lang: 'pt-br',

        // View change...