只需在全日历中单击两次即可打开模式

Question

我正在使用 fullcalendar 创建日历，如下面的代码所示：

document.addEventListener('DOMContentLoaded', function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    initialViews = 'dayGridMonth';
}else{
    initialViews = 'dayGridMonth';
}

var calendarEl = document.getElementById('calmanut');

  var today = moment().day();

  var calendar = new FullCalendar.Calendar(calendarEl, {

    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth'
    },
    locale: "pt-br",
    buttonText:{
      today:    'Hoje',
      month:    'Mês',
    },

    navLinks: true,
      firstDay: today,
      initialView: initialViews,
      editable: true,
      selectable: true, 
      unselectAuto:true,
      eventOverlap: true,
      slotDuration: '00:30',
      allDaySlot : false,
      eventStartEditable: true,
      eventDurationEditable:false,
      longPressDelay: 0,
      nowIndicator: "true",
      expandRows: true,
      slotMinTime: '09:00',
      slotMaxTime: '18:00',
      contentHeight: 'auto',
      businessHours: {

        daysOfWeek: [ 1, 2, 3, 4, 5 ], 
    
      },
      eventDidMount: function (info) {
        $(info.el).popover({
            title: info.event.title,
            placement: 'top',
            trigger: 'hover', 
            content: 'Período: ' + info.event.groupId,
            container: 'body'
        });
      },
      
      events: [
      {
        title: 'All Day Event',
        start: '2023-11-17'
      },
      {
        title: 'Long Event',
        start: '2023-11-17',
        end: '2023-09-10',
        color: 'purple' // override!
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2023-11-17T16:00:00'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2023-11-17T16:00:00'
      }
    ],
     eventClick:  function(info) {
        
        var eventObj = info.event; 
        tarperiod = eventObj.extendedProps.Tarefa;

        $('#ModalAddmanut1').modal("show");
        $('#ModalAddmanut1 #sidtaref').val(eventObj.extendedProps.Id);
        $('#ModalAddmanut1 #titletar1').val(eventObj.extendedProps.Tarefa);  
        $('#ModalAddmanut1 #cortaref1').val(eventObj.extendedProps.cor);
      },
    
  });

  calendar.render();
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.6/umd/popper.min.js"></script>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js"></script>

<div id='calmanut'></div>

<div class="modal fade" tabindex="-1" id="ModalAddmanut1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">ELIMINAR/ALTERAR PLANIFICAÇÃO DE TAREFAS</h5>
                    <button type="button" class="btn-close atualvisita1" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="POST" class="row g-3 instper1">
                        <input type="hidden" class="form-control" id="sidtaref" name="sidtaref">
                        <div class="row">
                            <div class="col-8">
                                <div class="form-group">
                                    <label for="titletar1"> <strong>Tarefa</strong> </label>
                                    <select class="js-states form-control" name="titletar1" id="titletar1">
                                        <option></option>
                                        <option>Teste</option>
                                    </select>
                                </div>
                            </div>
                        </div>    
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="cortaref1"> <strong>Cor</strong> </label>
                                    <select class="js-states form-control" name="cortaref1" id="cortaref1">
                                        <option value=""></option>                            
                                        <option style="color:#000;" value="#F00">&#9724; Vermelho</option>
                                        <option style="color:#000;" value="#FFF">&#9724; Branco</option>
                                    </select>
                                </div>
                            </div>
                           </div> 
                    </form>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                    <button type="button" class="btn btn-danger valtareff1" id="save-event">Eliminar</button>
                    <button type="button" class="btn btn-primary valtareff" id="save-event">Alterar</button>
                </div>
            </div>
        </div>
    </div>

如果在电脑上使用，效果很好。问题是当我在手机上使用它时。我来解释一下：

在计算机上，要查看 eventDidMount，只需将鼠标悬停在该事件上并打开工具提示即可。在手机上，要查看 eventDidMount，我必须单击该事件，当我单击时，它会打开工具提示和模式进行编辑。

编辑模式只需单击两次即可打开。你能帮我解决这个问题吗？

Answer 1

好吧，要明确的是，我不知道完整日历是什么，我只是通过查看您的代码进行粗略的尝试。您发布的代码已经有一行用于特征检测

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  initialViews = "dayGridMonth";
} else {
  initialViews = "dayGridMonth";
}

你可以用它来做这样的事情：

eventDidMount: function (info) {
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    $(info.el).popover({
      title: info.event.title,
      placement: 'top',
      trigger: 'click', 
      content: 'Período: ' + info.event.groupId,
      container: 'body'
  });
  } else {
    $(info.el).popover({
      title: info.event.title,
      placement: 'top',
      trigger: 'hover', 
      content: 'Período: ' + info.event.groupId,
      container: 'body'
  });
  }

},

请注意，在移动设备的 if 语句中的第一个条件中，触发器现在设置为单击而不是悬停。这个想法是正确设置事件触发器。再说一遍，我不知道你正在使用的东西，但总体思路是