fullcalendar позволяет пользователю добавлять конечное время при создании события

-1 Steve Mason [2014-10-07 17:09:00]

Возможно ли разрешить пользователю вводить или выбирать время начала и окончания события. На данный момент кажется, что он по умолчанию составляет 1 час, но я хотел бы, чтобы пользователь мог определять события на 10 минут или более?

ура

Стив

jquery ajax datepicker fullcalendar

Оригинал вопроса (на английском)

1 Luís Cruz [2014-10-09 14:52:00]

Есть как минимум два варианта, в зависимости от того, как вы хотите, чтобы ваши пользователи создавали события.

Пользователи создают события с помощью простого перетаскивания

Используйте snapDuration, чтобы пользователи могли выбирать 10-минутные временные интервалы. Проверьте эту скрипку.

Пользователи создают события на основе формы (либо форма всегда присутствует, либо отображается после перетаскивания)

Мое решение использует форму внутри модального диалога, которая отображается после того, как пользователь выбрал временной интервал. Однако вы можете просто удалить модальный диалог и всегда отображать форму.

Основной процесс:

Покажите модальность после того, как пользователь выбрал временной интервал. Используйте этот select чтобы выполнить это.
Перед тем, как мы покажем диалог, задайте начальные и конечные значения события, исходя из того, что выбрал пользователь.
Показать модальный диалог.
Привяжите событие submit формы, чтобы выполнить вызов ajax при отправке формы. Этот вызов ajax сохранит событие в базе данных и, когда он будет сохранен успешно, закроет диалог и обновит календарь.

Вы будете работать примерно так:

select: function( start, end, jsEvent, view ) {
    $('#event-modal').find('input[name=evtStart]').val(
        start.format('YYYY-MM-DD HH:mm:ss')
    );
    $('#event-modal').find('input[name=evtEnd]').val(
        end.format('YYYY-MM-DD HH:mm:ss')
    );

    $('#event-modal').modal('show');

    $("#event-modal").find('form').on('submit', function() {
        $.ajax({
            url: 'events/save',
            data: $("#event-modal").serialize(),
            type: 'post',
            dataType: 'json',
            success: function(response) {
                // if saved, close modal
                $("#event-modal").modal('hide');

                // refetch event source, so event will be showen in calendar
                $("#calendar").fullCalendar( 'refetchEvents' );
            }
        });
    });
},

Вы можете увидеть полный пример в этом JsFiddle. Вы должны отметить:

Вы могли бы применить плагин DateTimePicker в начальных и конечных входах (например, это или это или любых других, который вы можете найти на Google)
Вам необходимо настроить вызов $.ajax чтобы $.ajax правильный URL-адрес и сохранить события в базе данных.
Я не тестировал этот 100%, это предназначено для того, чтобы вы на правильном пути. Это означает, что вам, вероятно, придется настроить код в соответствии с вашими потребностями.

Оригинал ответа (на английском)

fullcalendar позволяет пользователю добавлять конечное время при создании события

1 ответ