I'm using FullCalendar and it works perfect(ish) :)
Now my users are demanding a simple way to copy a full months of scheduled shifts to the next month - or any month.
I already have a "Copy week" function in place and it works fine. But I simply can't figure out the correct way to copy an entire months shifts. I was thinking to copy "day N Month A" to "day N Month B" but this leads to failure - as the 1. day in the month is constantly moving.
Any ideas how to accomplish this?
Edit:
The task I'm looking for input on, is really in the PHP/MySQL backend. In the frontend the user simply have 2 selects: Copy month to and a button "Copy".
In the backend I receive "mthfrom=>2014-1" and "mthto=>2015-1". I have no problem finding all events from 2014-1 with SELECT * from dbevent WHERE year(shiftstart)='2014' and MONTH(shiftstart)='1';.
The problem is that I need to "match" the correct workingdays, so the corresponding weekdays match up in the month copied to. E.g. I want to copy all shifts from January 2014 to March 2014.
Maybe you can use two datepickers connected (that is, the earliest date of the second should be latter than the date of the first), and use a button to copy the events.
IMO the best way is to copy the events in the server. Assuming you have a DB, you would select the events from the given period and duplicate the events on click of a button.
This way, you will have a "Copy events by period" instead of "copy events by week (and month, and quarter, ..)".
So, your front-end code would be something like this:
<div class='input-group date' id='dtpFrom'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='dtpTo'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<button id="copyEvents" class="btn btn-default">Copy Events </button>
<div id="calendar"></div>
<script>
$('#dtpFrom').datetimepicker();
$('#dtpTo').datetimepicker();
$("#copyEvents").on('click', function() {
var dateFrom = $('#dtpFrom').data("DateTimePicker").getDate(),
dateTo = $("#dtpTo").data("DateTimePicker").getDate();
$.ajax({
url: 'url-for-server',
data: {from: dateFrom, to: dateTo},
type: 'post',
dataType: 'json',
success: function() {
// reload events if you want
$("#calendar").fullCalendar( 'refetchEvents' );
}
});
});
// start fullcalendar
$("#calendar").fullCalendar();
</script>
The full code is in this JsFiddle and serves as a demonstration to guide you. I've used Bootstrap, but you can use the datepickers from jQuery UI.
The only thing not present is the server code, that you need to create for yourself. However, you will have the period to copy to the next month, so its just a matter of duplicate the DB rows adding 1 month to each start / end.