Copying a months FullCalendar events to next month

拈花ヽ惹草 提交于 2019-12-11 18:25:11

问题


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.

  • How to make sure that the monday shifts ends up on the correct weekday?
  • How to make sure that no shifts end up on saturday/sunday?
  • What to do if a user wants to copy a month with 28 days to a month with 31 days or vice/versa?

回答1:


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.



来源:https://stackoverflow.com/questions/26528620/copying-a-months-fullcalendar-events-to-next-month

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!