javascript - JS FullCalendar V4 右键菜单-选定日期

Question

(V4)我正在尝试向我的日历添加右键单击菜单，这将允许用户对事件执行其他操作。

我需要弄清楚如何获取 alert() 中显示的所选日期值，以便可以为这些日期分配变量并创建事件。

首先，我禁用了默认菜单:

$("#calendar").on("contextmenu",function (event) {event.preventDefault();});

接下来我为右键单击创建了一个事件:

jQuery(document.body).on("mousedown", function(event){
    if(event.button==2){
        alert();
    }
});

我的日历中的selectable值设置为true。

如何在 alert() 中获取选定的日期值

编辑我尝试过alert(calendar.selectionInfo)，但它是未定义

编辑 2 我的日历 html

<link href='vendor/fullcalendar/core/main.css' rel='stylesheet' />
<link href='vendor/fullcalendar/daygrid/main.css' rel='stylesheet' />
<link href='vendor/fullcalendar/timegrid/main.css' rel='stylesheet' />
<div id="calendar"></div>
<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/fullcalendar/core/main.min.js"></script>
<script src="./vendor/fullcalendar/daygrid/main.min.js"></script>
<script src="./vendor/fullcalendar/timegrid/main.min.js"></script>
<script src="./vendor/fullcalendar/interaction/main.min.js"></script>

编辑3对我的代码进行一些更改

$("#calendar").on("mousedown", function(event){
    if(event.button==2){
        alert(calendar.selectionInfo);
    }
});

Answer 1

看来你想要的并不容易......

FullCalendar API 提供了一些接近的东西: https://fullcalendar.io/docs/dateClick

使用创建日历时传递的这个选项，您可以决定用户单击日期时会发生什么，但我假设它只是左键单击

例如在警报中显示日期:

let calendar = new Calendar(calendarEl, {
  plugins: [ interactionPlugin ],
  dateClick: function(info) {
    alert('Clicked on: ' + info.dateStr);
  }
});

如果您确实想要右键单击，我正在尝试另一个解决方案，但它不会是干净的代码......很快更新

<小时/>

编辑

我发现了一些有用的东西，但它不干净，你很快就会受到限制......

document.querySelectorAll(".fc-day").forEach(
  element => element.addEventListener(
    "contextmenu",
     event => { 
        event.preventDefault(); 
        event.stopPropagation();
        alert(event.target.dataset.date); //here you have the date of the cell
     }
  )
);