Полный календарный выбор ячейки на мобильном устройстве?

Ответ 1

Как насчет добавления прослушивателей событий в ячейки уже инициализированного календаря и применения некоторой магии, например:

$('#calendar table.fc-border-separate td.ui-widget-content').on('touchstart', function (event) {
    /* touch start processing, probably cancelling like*/ 
    event.preventDefault();
    event.stopImmediatePropagation();

    function mouseMoveHandler (event) {
         /* processing actual drag */
         /* possible also cancelling default behavior and instead calling Calendar API */
    }

    function mouseUpHandler (event) {
        /* processing mouse up */

        /* some clean up */         
        $(document).off('touchmove', mouseMoveHandler)
        .off('touchend touchleave touchcancel', mouseUpHandler);
    }

    $(document).on('touchmove', mouseMoveHandler)
        .on('touchend touchleave touchcancel', mouseUpHandler);
});

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

Ответ 2

Этот ответ был найден в другом сообщении StackOverflow: Как мы можем указать пользовательский диапазон дат с полным календарем?

Вы можете вызвать эту функцию, чтобы получать события из диапазона дат. Однако это приведет к 30-дневным событиям.

function GetAgendaEvents(datefrom, dateTo) {
    var fromDate = new Date($("#from").val());
    var toDate = new Date($("#to").val());

    if (fromDate.getTime() <= toDate.getTime()) {
        $('#fullcal').fullCalendar('removeEvents').fullCalendar('addEventSource', events);
        $('#fullcal').fullCalendar('refetchEvents');

        var filteredEvent = $('#fullcal').fullCalendar('clientEvents', function (event) {
            return event.start >= fromDate && event.start <= toDate;
        });

        $('#fullcal').fullCalendar('gotoDate', fromDate.getFullYear(), fromDate.getMonth(), fromDate.getDate());
        $('#fullcal').fullCalendar('changeView', 'agenda'/* or 'basicDay' */);

        $('#fullcal').fullCalendar('removeEvents').fullCalendar('addEventSource', filteredEvent);
        $('#fullcal').fullCalendar('refetchEvents');
    }
}

Ответ 3

другое решение - Datebox. Я реализовал его в своем мобильном приложении jQuery, его простой в использовании. и очень хорош как для компьютера, мобильного телефона, так и для http://dev.jtsage.com/jQM-DateBox2/

Ответ 4

Просто добавьте этот старый вопрос...

Решение без касания:

Я лично внедрил fullcalendar для мобили, и у меня возникли проблемы с обработкой мультиплекса touchmove, поэтому я решил сделать все это только на основе самих объектов html day.

Я просто получаю высоту/ширину того, что было сначала выбрано, и подсчитайте расстояние, перемещенное относительно этой высоты/ширины. Для этого требуется функция SelectDates (date1, date2), чтобы обрабатывать все, что вы хотите сделать, с помощью daterange вашего выбора.

Вот мой код:

        $(document).on('touchmove', '.fc-day', function (e) {
            var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];

            var $startElement = $(this);
            var moveStartDate = new Date($startElement.data('date'));
            var timezoneOffset = moveStartDate.getTimezoneOffset() * 60000;
            moveStartDate.setTime(moveStartDate.getTime() + timezoneOffset);

            var rect = $startElement[0].getBoundingClientRect();

            var DayHeight = $startElement[0].clientHeight;
            var DayWidth = $startElement[0].clientWidth;

            var xdif = 0;
            if (touch.pageX < rect.left) {
                xdif = touch.pageX - rect.left;
            }
            if (touch.pageX > rect.right) {
                xdif = touch.pageX - rect.right;
            }
            var xDaysAwayDecimal = xdif == 0 ? 0 : (xdif / DayWidth);
            var xDaysAway = xdif >= 0 ? Math.ceil(xDaysAwayDecimal) : Math.floor(xDaysAwayDecimal);

            var ydif = 0;
            if (touch.pageY < rect.top) {
                ydif = touch.pageY - rect.top;
            }
            if (touch.pageY > rect.bottom) {
                ydif = touch.pageY - rect.bottom;
            }
            var yDaysAwayDecimal = ydif == 0 ? 0 : (ydif / DayHeight);
            var yDaysAway = ydif >= 0 ? Math.ceil(yDaysAwayDecimal) : Math.floor(yDaysAwayDecimal);

            var dayModifier = (yDaysAway * 7) + xDaysAway;

            var moveEndDate = new Date(moveStartDate);
            moveEndDate.setDate(moveEndDate.getDate() + dayModifier);
            if (moveStartDate > moveEndDate) {
                SelectDates(moveEndDate, moveStartDate);
            }
            else {
                SelectDates(moveStartDate, moveEndDate);
            }
        })

Также.. если ваш SelectDates() делает тяжелый подъем, вы можете захотеть, чтобы он срабатывал только при каждом количестве перемещенных пикселов или х миллисекундах... либо это, либо просто сэкономить значения, а затем выполнить обработку когда вы остановитесь. Мой SelectDates() добавил css в календарь, поэтому я хотел, чтобы он срабатывал непрерывно с движением касания.

Ответ 5

После многих поисков я не нашел простого и ясного ответа. Итак, я сделал это сам, и вот он:

var calendar = $('#calendar').fullCalendar({
     .. 
    ....
     ..
    dayRender: function( date, cell) {
        $(cell).on("touchend",function(event){
            var startDate = date;
            var x= event.originalEvent.changedTouches[0].clientX;
            var y = event.originalEvent.changedTouches[0].clientY
            var endDate = moment($(document.elementFromPoint(x, y)).attr("data-date"),"YYYY-MM-DD");
            if(endDate>startDate){
                calendar.fullCalendar( 'select', startDate, endDate.add('days', 1));
            }else{
                calendar.fullCalendar( 'select', endDate, startDate.add('days', 1));
            }
        });
    },
    select: function(start, end, allDay, jsEvent, view) {
         .. 
        ....
         .. 
        calendar.fullCalendar('unselect');
    }
});

Ответ 6

По моему опыту, я никогда не нашел каландр как хороший вариант для таких задач. Попробуйте использовать datepicker вместо этого - http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/