简体   繁体   中英

How to handle a long press event with yii2fullcalendar

I use yii2fullcalendar for my website.

On mobile device, a "dayClick" event is fired although we just want to scroll down the screen.

How to change "dayClick" to a day double click event ?

UPDATE: Actually, I want to avoid an inconvenient usage on mobile device. So, it's better if we can set a "long press" parameter instead of finding the way to change "dayClick" to a day double click event.

This is my view.php

<?= \yii2fullcalendar\yii2fullcalendar::widget(array(
        'options' => [
        ],
        'clientOptions' => [
            'allDaySlot' => false,
            'selectHelper' => true,
            'eventClick' => new JsExpression($JSEventClick),
            'dayClick' => new JsExpression($JSDayClick),
            'eventMouseover' =>new JsExpression($JSDayMouseover),
            'eventMouseout' =>new JsExpression($JSDayMouseout),
            'defaultView' => 'agendaWeek',
            'firstDay' => date('w'),  // Sunday=0, Monday=1, Tuesday=2, etc.
            'header' => [
                'center'=>'prev,next today',
                'left'=>'',
                'right'=>'agendaDay,agendaWeek,month',
            ],
        ],
        'ajaxEvents' => Url::to(......)
    ));
    ?>

Thank you.

You should be able to modify your dayClick function to handle a double click using the following algorithm:

  • Set variable clicked_once to false.
  • On click:
    • If !clicked_once
      • Set clicked_once to true.
      • Start a timeout function to occur after xx seconds.
        • On timeout, set clicked_once to false.
    • If clicked_once
      • Perform event
      • set clicked_once to false.

Sorry to provide an algorithm rather than code, don't have any reference material in front of me at them moment.

I got a better solution for my issue.

That is set a parameter to:

longPressDelay

within the client options as below

<?= \yii2fullcalendar\yii2fullcalendar::widget(array(
        'options' => [
        ],
        'clientOptions' => [
            'allDaySlot' => false,
            'selectHelper' => true,
            'eventClick' => new JsExpression($JSEventClick),
            'dayClick' => new JsExpression($JSDayClick),
            'eventMouseover' =>new JsExpression($JSDayMouseover),
            'eventMouseout' =>new JsExpression($JSDayMouseout),
            'defaultView' => 'agendaWeek',

            'longPressDelay' => 1500, // -> Add here

            'firstDay' => date('w'),  // Sunday=0, Monday=1, Tuesday=2, etc.
            'header' => [
                'center'=>'prev,next today',
                'left'=>'',
                'right'=>'agendaDay,agendaWeek,month',
            ],
        ],
        'ajaxEvents' => Url::to(......)
    ));
    ?>

Refer to: https://github.com/philippfrenzel/yii2fullcalendar/issues/72#issuecomment-268556312

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM