2

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!

Improve this question
2
  • I can't understand what you want to do. Do you just want to popup the list of events in day X and being able to reorder them (the way you want, by dragging) and then save? Commented Nov 16, 2015 at 21:01
  • That's exactly what I want to do. I have it worked out, but I'm having trouble getting the list of events to show up in the popup. I have a custom sort field that I'm using eventOrder with so the events can be ordered as the user wants. Commented Nov 16, 2015 at 21:05

1 Answer 1

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

I understand how to do that part. I'm having trouble with the "ajax loaded content" that you mention. I haven't been able to get the day's events loaded in the popup modal.
Are you able to get the selected day date? Check this for loading content stackoverflow.com/questions/18378720/…
I'm sure that the selected day date is in the event information that I'm first displaying. I checked that link and it's for remote loading of content. I'm just loading from the current calendar I'm displaying.
Check my post, I added few info from my code. Hope it helps
Ok. Thanks! I'm going to give that a whirl! I'll post back here when completed.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.