Vollkalender Mehrfachzellenauswahl auf mobilem Gerät?

Ich habe mit Phonegap eine Vollkalender-Anwendung für mobile Geräte wie Android und iPhone erstellt. Ich benutze dieJQuery Touch Punch Plugin zusammen mit dem Jquery-Vollkalender-Plugin. Die Auswahlmethode für Vollkalender funktioniert im Web einwandfrei. Ich kann in der Monatsansicht des vollständigen Kalenders im Webbrowser mehrere Zellen auswählen. In der nativen Android- / iPhone-App kann ich jedoch nicht mehrere Zellen (Datumsbereiche) des Kalenders auswählen. Alles, was passiert, ist, wenn ich auf die Zelle klicke, um einen Datumsbereich auszuwählen. Dann wird die Auswahlmethode ausgelöst, bevor ich mehrere Daten auf dem Gerät auswählen kann. Gibt es überhaupt eine Möglichkeit, dieses Problem zu lösen? Danke im Voraus. Hier ist derJsfiddle.

Beispielcode:

// FullCalendar v1.5
// Script modified from the "theme.html" demo file

$(document).ready(function() {    
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

$('#calendar').fullCalendar({
    theme: true,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month'
    },
    editable: true,
    disableDragging: true,
    disableResizing: true,
    droppable: true,
    drop: function( date, allDay, jsEvent, ui ){
       console.log(jsEvent);
       console.log(ui);
    },
    // add event name to title attribute on mouseover
    eventMouseover: function(event, jsEvent, view) {            
        if (view.name == "month") {
            $(jsEvent.target).attr('title', event.title);
        }
        //alert(event.id);
    },
    // For DEMO only
    // *************
    events: [
        {   id: 1,
            title: 'User1',
            start: '2012-09-01',
            end: '2012-09-01',
            color:'#E9B33E',
            className: 'user-class1'},
        {   id: 2,
            title: 'User2',
            start: '2012-09-06',
            end: '2012-09-06',
            color:'#00813E',
            className: 'user-class2'},    
        {   id: 3,
            title: 'User3',
            start: '2012-09-06',
            end: '2012-09-06',
            color:'#E59238',
            className: 'user-class3'},     
        {   id: 4,
            title: 'User4',
            start: '2012-09-06',
            end: '2012-09-06',
            color:'#00813E',
            className: 'user-class4'},            
        {   id: 5,
            title: 'User5',
            start: '2012-09-08',
            end: '2012-09-08',
            color:'#00813E',
            className: 'user-class5'},
        ],
    eventRender: function(event,element,calEvent) {                   
        element.attr('id',this.id);
        if(this.id!=5){                    
            element.find(".fc-event-title").after($("<br/><span class=\"fc-event-icons\"></span>")
            .html("<img src=\"http://png-5.findicons.com/files//icons/2018/business_icons_for/16/passport.png\" onclick=\"javascript:iconsAlert("+this.id+",'passport')\" class=\"icon\"/>"+
                "<img src=\"http://findicons.com/files//icons/1571/chalkwork_payments/16/card_visa.png\" onclick=\"javascript:iconsAlert("+this.id+",'visa')\" class=\"icon\" />"+
                "<img src=\"http://findicons.com/files//icons/894/banking_stuff/16/postage_stamp.png\" onclick=\"javascript:iconsAlert("+this.id+",'traveldoc')\" class=\"icon\" />"+
                "<img src=\"http://findicons.com/files//icons/756/ginux/16/richtext.png\" onclick=\"javascript:iconsAlert("+this.id+",'entrystamp')\" class=\"icon\" />"));
        }
        element.droppable({
                accept: '*',
                tolerance: 'touch',
                //activeClass: 'ui-state-hover',
                //hoverClass: 'ui-state-active',
                drop: function(ev, ui) {                
                    //console.log(ev.id);
                    alert(this.id);
                    //for(param in ui){    console.log(ev.id);}
                }
              });
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
   alert("Cell selected from "+$.fullCalendar.formatDate(start, 'yyyy-MM-dd')+" to "+$.fullCalendar.formatDate(end, 'yyyy-MM-dd'));
},
eventClick: function(calEvent, jsEvent, view) {
    if (!$(jsEvent.target).hasClass("icon")) {
       alert("UserID:"+calEvent.id);
    }                
}

});


$('#external-events div.passport-event,.visa-event,.entrystamp-event,.traveldoc-event').each(function() {

        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()), // use the element's text as the event title
            className: $(this).attr('class')
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);

        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });
});

[Bescheidene Bitte an die Moderatoren: Bitte schließen Sie diese Frage erst, wenn sie gelöst ist. Vielen Dank]

Antworten auf die Frage(6)

Ihre Antwort auf die Frage