为什么fullcalendar会在点击时自动移动我的活动30分钟?

时间:2017-11-22 01:05:35

标签: fullcalendar

如果我想在日历上创建活动,事件会自动向前移动我不知道为什么并且它会在原始时间增加30分钟,例如,如果我点击 13:00 < / strong>我进入consloe 13:30 ,我不知道为什么。

我还创建了一个<input>字段来设置开始时间,以便我可以看到我选择了哪个日期时间,并且我再次得到了30分钟的日期时间!

这是我的代码

$(document).ready(function() {
    var initialLocaleCode = 'ru';
    var d = new Date();
    $('#calendar').fullCalendar({

        header: {
            left: 'next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listMonth'
        },

        timezone: 'local',
        defaultView: 'agendaWeek',
        height: 650,
        locale: initialLocaleCode,
        navLinks: true,
        selectable: true,
        selectHelper: true,
        editable: false,
        resizable: true,
        eventResize: true,
        minTime: "06:00:00",
        maxTime: "22:00:00",
        eventLimit: 6,
        unselectAuto: false,
        selectConstraint: 'businessHours',
        businessHours: 
        [
            {% for work in current_user.work_hours %}
            {
                dow: [{{work.day_number}}],
                start: '{{work.work_start.strftime("%H:%M")}}',
                end: '{{work.work_end.strftime("%H:%M")}}',
            },
            {% endfor %}
        ],

        select: function(mydate, start, end, event, jsEvent, allDay, view, element) {

            var DaysOK = [1,2,3,4,5,6,7];
            var mydateObj = new Date(mydate);
            var chosenDay = mydateObj.getUTCDay();

            var modal = $('#modal_calendar');
            var title = $("select#serviceTitleCalendar option").filter(":selected").val();

            if (title) {

            $(modal).attr('style', 'display: block; top: 53px; left: 404px;');
            $('body').append('<div id="mwb" onclick="MWHide()"></div>');

            $("select#serviceTitleCalendar option").filter(function() {
                return $(this).val() == $("#serviceSet").val();
            }).attr('selected', true);

            $('#book-calendar').val(moment(start).format('YYYY-MM-DD HH:mm'));

            $("select#serviceTitleCalendar").off("change");
            $('#send-appo').off("click");

            $("select#serviceTitleCalendar").on("change", function() {

                var nameService = $(this).val();
                var csrf_token = "{{ csrf_token() }}";
                $('.loading').html('<div class="spinner"> <img id="ld_spinner" src="/static/img/icon/circle-slack.gif" alt="spinner"/></div>');
                if ($(this).val() == 'Выберите услугу') {
                $('#dynamic-period').text('минутами');
                $('.loading').html('<div class="spinner" style="display: none;"></div>');
                return false;
                } else {
                setTimeout(function(){
                    $.ajax({
                    type: 'post',
                    cache: false,
                    url: '{{url_for("panel_abonent.get_service_period")}}',
                    data: {
                        service_period: nameService
                    },
                    beforeSend: function(xhr, settings) {
                        if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                            xhr.setRequestHeader("X-CSRFToken", csrf_token);
                        }
                    },
                    complete: function(){
                        $('.loading').html('<div class="spinner" style="display: none;"></div>');
                    },
                    success: function(data){
                        if (data.time_period){
                        $('input[name="period"]').val(data.time_period);
                        $('#dynamic-period').text(data.time_period.split(':')[1]+' минут');
                        } else {
                        return false;
                        }
                    }
                    })
                }, 2000);
                }
            });
        }
    });
});

1 个答案:

答案 0 :(得分:1)

您对select回调的定义不正确。

你给了:

select: function(mydate, start, end, event, jsEvent, allDay, view, element) {

但是fullCalendar文档(https://fullcalendar.io/docs/selection/select_callback/)显示了fullCalendar在运行它时将为该函数提供的参数。它显示以下内容:

function( start, end, jsEvent, view, [ resource ] )

(根据您是否拥有Scheduler插件,资源是可选的。)

正如您所看到的,文档中有一个示例,其中列表中的第一个参数被称为&#34; start&#34; ,第二个是&#34;结束&#34;。当然,您可以将它们称为您喜欢的,但它旨在表明这些参数包含的内容。

但是,在您的代码中,您已经调用了第一个参数&#34; myDate&#34;,并调用了第二个参数&#34; start&#34;。这并不意味着实际的第二个参数是开始。它只是您决定使用的名称。

此外,您已经定义了太多参数,超过了fullCalendar将为其发送的值。将参数映射到fullCalendar提供给它的值将为您提供:

  • mydate:选择的开始日期/时间
  • 开始:选择的结束日期/时间
  • end:包含鼠标坐标等信息的JavaScript事件
  • 事件:当前视图
  • jsEvent:一个资源(但只有在使用Scheduler时才会使用。否则,没有值)
  • 查看:(无价值)
  • 元素:(无值)

所以当你写

$('#book-calendar').val(moment(start).format('YYYY-MM-DD HH:mm'));

你调用的变量&#34;开始&#34;实际上包含结束时间。广告位的默认持续时间为30分钟,这就是为什么该值在您点击时间后30分钟的原因。

您需要定义&#34;选择&#34;回调匹配文档,否则它没有意义。

澄清这个概念:当您定义这样的回调时,您将为fullCalendar提供一个稍后运行的函数。您可以指定您喜欢的任何参数 names ,但您不能只添加额外的参数 - fullCalendar如何知道您的意图,或者为它提供什么值?在fullCalendar代码中,已经有固定代码调用你给它的函数,并将它发送给它决定的参数。当程序员编写代码时,决定了这些参数的数量以及它们包含的信息类型。仅在运行时决定参数的,而不是数量或类型。你无法控制任何一个。