将月份的FullCalendar事件复制到下个月 [英] Copying a months FullCalendar events to next month

查看:90
本文介绍了将月份的FullCalendar事件复制到下个月的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



现在我的用户要求一种简单的方法来将整整几个月的预定班次复制到下个月 - 或任何月份。



我已经有一个复制周功能,并且工作正常。但我根本无法弄清楚复制整个月的正确方法。
我正在考虑将第N天A月复制到第N天B月,但这会导致失败 - 因为本月的第1天不断移动。



任何想法如何实现这一点?

编辑:



我正在寻找的任务用于输入,实际上是在PHP / MySQL后端。在前端,用户只需要2个选择:复制月份和按钮复制。

在后端,我收到mthfrom => 2014-1和 mthto => 2015-1\" 。我没有问题,从2014-1年的 SELECT *从dbevent WHERE year(shiftstart)='2014'和MONTH(shiftstart)='1'; / p>

问题是我需要正确匹配正确的工作日,所以相应的周一到了复制的月份。例如。我想复制从2014年1月到2014年3月的所有班次。


  • 如何确保星期一班班在正确的工作日结束?

  • 如何确保在星期六/星期日没有班次结束?

  • 如果用户想用28天的时间复制一个月,该怎么办到31天的一个月,或者反之亦然? 可能你可以使用两个日期选择器连接(即第二个的最早日期应该晚于第一个的日期),并使用按钮来复制事件。

    IMO最好的办法是复制服务器中的事件。假设你有一个数据库,你可以从给定的时间段内选择事件,并通过点击按钮复制事件。



    这样,你将有一个复制事件按周期而不是按周(和月,和季度,...)复制事件。

    因此,你的前端代码应该是这样的:

     < 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 =copyEventsclass =btn btn-default>复制事件< / 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(){
    //如果您想要
    $(#calendar),则重新加载事件。fullCalendar('refetchEvents');
    }
    });
    });

    //开始fullcalendar
    $(#calendar)。fullCalendar();
    < / script>

    完整的代码是 在这个JsFiddle 中,并作为示例来指导您。我使用过Bootstrap,但是可以使用jQuery UI中的datepickers。



    唯一不存在的是服务器代码,您需要为自己创建。但是,您将有复制到下个月的时间,因此只需复制数据库行,并在每个开始/结束时添加1个月。


    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?

    解决方案

    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.

    这篇关于将月份的FullCalendar事件复制到下个月的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆