Question

如何实现触摸设备fullcalendar滑动功能，允许我来回更改月份，但也可以在日记中使用dayClick或任何其他Click事件？

Answer 1

我尝试了许多不同的解决方案，Android类，全日历修复，js库（锤子接近）除了下面的声音之外没有什么能完美地完成这个技巧。

假设您在WebView中拥有完整日历并且没有问题地运行：

在您的Activity中，您需要为webView设置触控侦听器：

myWebView.setOnTouchListener(
                new View.OnTouchListener() {
                    @Override
                    public boolean onTouch(View v, MotionEvent event) {
                        // TODO Auto-generated method stub
                        switch (event.getAction()) {
                            case MotionEvent.ACTION_DOWN:
                                x1 = event.getX();
                                break;
                            case MotionEvent.ACTION_UP:
                                x2 = event.getX();
                                float deltaX = x2 - x1;
                                //check if the user's funger has moved significantly. Tiny bit of movement is very usual and common during touch, so >0 and <0 won't work.
                                if (deltaX < -210) {
                                    Toast.makeText(MainActivity.this, String.valueOf(deltaX), Toast.LENGTH_SHORT).show();
                                    //Swipes RtoL move to the next month
                                    myWebView.loadUrl("javascript: $('#calendar').fullCalendar('next');");
                                } else if (deltaX > 210) {
                                    //Swipes LtoR move to the previous month
                                    Toast.makeText(MainActivity.this, String.valueOf(deltaX), Toast.LENGTH_SHORT).show();
                                    myWebView.loadUrl("javascript: $('#calendar').fullCalendar('prev');");
                                } else if (deltaX > -210 && deltaX < 210) { //Adjust those numbers for your needs
                                    //itsa touch
                                    myWebView.loadUrl("javascript: goToDateClicked();");


                                }
                                break;
                        }

                        return false;
                    }
                });

此代码的作用是检查webView上的手指移动。如果手指移动足够重要，则将其归类为滑动，并将javascript命令发送到日历以翻转月份。

如果手指移动不够显着，则很可能是触摸，并且向JS发送不同的命令，获取点击日期的日期，转到该日期，然后更改查看日视图。

在您的HTML中，您将拥有

<script type="text/javascript">
//Declare a global date variable to set the callendar date to, when a day is clicked
var globalDate;

function goToDateClicked()
{
    //Change the view to a desired view and clicked date
    $('#calendar').fullCalendar('changeView', 'agendaDay');
    $('#calendar').fullCalendar('gotoDate', globalDate );
}
jQuery(document).ready(function () {
    $('#calendar').fullCalendar({

    //OPTIONS
         dayClick: function(date, jsEvent, view) {
         //On day click only set the date clicked. If it's a swipe then you don't have to worry about going back and forth into views and some weird logic to prevent swipe to date changes.
         //If it's a click then the Android code behind takes care of the date/view change, all it needs is the bellow date.
            globalDate = date.format();
        }
    });

    //DIARY RELATED BUTTONS CLICKS
    $(".fc-today-button").click(function() {
        $('#calendar').fullCalendar('changeView', 'month');
    });

});
</script>
<div id='calendar'></div>

Fullcalendar滑动左右功能，也适用于dayClick

1 个答案: