FullCalendar list day's events modal

Question

I'm using FullCalendar 2.4. I have an application that has the following specific parameters:

Monthly View only.
allDay events only.
No reoccurring events.
No multiple day events.

I have it working the way that I want, except for one feature. When someone clicks on an event, I have it pop up the title/description of the event with buttons to Edit or Delete the event. If you click on Edit, it pops up the edit form, and so forth.

The one thing that I'd like to add is a button that says "Reorder". I want it to popup (modal like "Edit" is or possibly another option) a list of all the events for that day (the day the original single event was on). I'm using a jQuery sortable list so they can change the order of the events by dragging/dropping. There will be a save button to save the new order. I'm not wanting to popup the reorder list on dayClick because I have an Add Event form that pops up then.

I have it all worked out EXCEPT getting the list of events for that day to display and be accessible (so I can reference the event id for later saving to MySQL where the calendar is stored).

It's not a big database, so I don't mind a round trip for data if that's the best way. I'm just missing method and syntax.

I'm an experienced programmer but only been doing PHP for a few years and JQuery just this year.

I wouldn't mind doing the same thing with the Bubble that pops up when you click the +More link on a day...if I could figure out how to create a sortable list in it. I'm open to alternative ways of doing this if I'm missing a better way.

I've scoured Google and stackoverflow. I've found some similar situations but no cigar.

Thanks!

Answer 1

I would popup a modal (with ajax loaded content)

$('#calendar').fullcalendar({
    /* ... options ... */
    dayClick: function( date, jsEvent, view ) {
        // some info in console
        console.log('Clicked on: ' + date.format());
        console.log('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
        console.log('Current view: ' + view.name);

        // Here you load the modal
        $('#ajax_modal').load('nestable_list.php', {event_date: date.format()}, function(){
            $('#ajax_modal').modal();
        });
    },
    /* ... other options ... */
});

with a nestable list and the button save. In this file you will require you core php files with DB connection, so that you create your list and initialise the plugin. My remote php file for modal content is like this:

<?php $date_str = $_GET['event_date'];
$date = date('d-m-Y', strtotime($date_str)); //format the way you need
$res = $db->query("SELECT event_id, title FROM events_table WHERE event_date = '$date' ORDER BY index");
?>
<div class="modal-header">
    <button type="button" class="close close-icon-medium" data-dismiss="modal" aria-hidden="true"></button>
    <h4 class="modal-title">Edit</h4>
</div>
<div class="modal-body">
    <div class="dd" id="nestable">
        <ol class="dd-list">
        <?php foreach($res AS $row) : ?>
            <li class="dd-item" data-id="<?=$row['event_id']?>">
                <div class="dd-handle"><?=$row['title']?></div>
            </li>
        <?php endforeach; ?>
        </ol>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-sm save" type="button"> Save</button>
    <button type="button" class="btn btn-sm" data-dismiss="modal">Cancel</button>
</div>

You can also add your javascript at bottom of php file

$(document).ready(function(){
    $('#nestable').nestable({ /* options here */});
    $('.save').on('click', function(){
        // loop over li elements and save index with ajax to another file.
        // close modal
        // you are done here
    });
});

Once the list is ordered and the save button clicked, you update each event with the current selected index (add event_index column in DB), and then refresh the calendar page. With

$('#calendar').fullCalendar( 'refetchEvents' );

NB event index field will be default 0 and then 1 to n in each day, this will allow to fetch both unordered and ordered events in the wanted way. (add "ORDER BY event_index" to your query). Add ORDER BY to the query that fatches events from DB