Как получить дату, когда дважды щелкнули фоновое событие в Fullcalendar v4?

У меня есть фоновые события в моем Fullcalendar, я использую представление временной шкалы. Я добавил триггер двойного щелчка для обработки этого действия, но мне нужно получить дату, когда был выполнен двойной щелчок.

Например, если пользователь нажимает на выделенный квадрат, он должен срабатывать 6 ноября при двойном щелчке. (зеленая линия — фоновое событие).

введите здесь описание изображения

eventRender: function(info) {
  $(info.el).on('dblclick', function() {
    // I need to somehow get clicked date here
    alert('XYZ was double clicked!');
  });
});

Есть ли способ получить день клика?


fullcalendar double-click fullcalendar-4
person sylar32    schedule 27.07.2020    source источник
comment
Документы показывают, что info включает event. Итак, info.event.start даст вам дату начала.   -  person Don't Panic    schedule 28.07.2020
comment
Это дает мне начало фонового события, а не дату щелчка, которая мне нужна.   -  person sylar32    schedule 28.07.2020
comment
О, я вижу, если у вас многодневные мероприятия, они будут другими.   -  person Don't Panic    schedule 28.07.2020
comment
Это невозможно. почему ты хочешь сделать это? Что вы планируете делать с этой датой?   -  person ADyson    schedule 28.07.2020
comment
Мой вариант использования заключается в том, что пользователь dblclick в поле и появится всплывающее окно с двумя датами (от - до). Первая дата заполняется датой щелчка, и пользователь может выбрать вторую дату из календаря. После отправки создается новое событие на основе заполненных дат. Это для более длинных событий, например, если они достигают другого месяца (месяцев). Любая другая идея, как это возможно?   -  person sylar32    schedule 28.07.2020
comment
Для этого вы можете использовать fullcalendar.io/docs/v4/select-callback — это позволит пользователю перетащить всю область, которую он хочет выбрать, и даст вам дату начала и окончания без необходимости вводить какие-либо даты вручную. Но его нужно использовать в пустой области календаря, где нет других событий. В вашей версии прямо сейчас вы пытаетесь создать событие поверх другого существующего события, которое не поддерживается (и на самом деле не имеет большого смысла для меня).   -  person ADyson    schedule 28.07.2020
comment
Создание событий таким образом я уже реализовал, но когда пользователь хочет создать событие из одного месяца в другой (у меня видимый диапазон 30 дней), он должен фактически создать два события. Именно так я хотел решение dblclick. Что касается вашего последнего предложения, я использую фоновые события (я упоминал об этом в своем вопросе выше), это разрешено и имеет смысл. В моем случае фоновые события выделяют нужные мне области, и в них пользователи могут создавать стандартные события. Я просто хочу дать пользователю возможность делать события из одного месяца в другой.   -  person sylar32    schedule 28.07.2020
comment
когда пользователь хочет создать событие из одного месяца в другой (у меня видимый диапазон составляет 30 дней), он должен фактически создать два события... хм, это звучит немного сложно. Почему бы не сделать так, чтобы пользователь просто щелкал, чтобы выбрать дату начала (или перетаскивал, чтобы выбрать область, если они хотят, чтобы все это было в видимом представлении), а затем вы открываете модальное диалоговое окно с выбором даты, предварительно заполняя даты начала/окончания, выбранные в календаре, но разрешить пользователю изменять их, если они хотят дату в будущем. Для меня это звучит более удобно, чем весь этот двойной выбор и т. Д. Просто мое мнение, хотя   -  person ADyson    schedule 29.07.2020

Ответы (1)


arrow_upward
0
arrow_downward

Я придумал решение. Он немного грязный, но работает.

  1. Я вычисляю координаты щелчка мыши
  2. получить ширину столбца дня
  3. вычислить порядок щелкнутого столбца
  4. по порядку нажатого столбца я получаю тот же столбец в заголовке
  5. Я получаю дату из атрибута data-date из столбца в заголовке

.

$(info.el).on('dblclick', function(event) {
    // get the element of the whole row
    var element = $(this).parent().offset();

    // get the x position of cursor
    var x = event.pageX - element.left;

    // get the width of column, dynamically calculated because width of viewport can be changed
    var width = $('.fc-head .fc-time-area th.fc-widget-header').outerWidth() - 1;

    // order number of clicked column
    var number = Math.ceil(x / width);

    // now we have a date of clicked date (despite we clicked background event)
    alert($('.fc-head .fc-time-area th.fc-widget-header:nth-of-type(' + number + ')').data('date'));
});

Может быть, это помогает кому-то. Просто обратите внимание, что это решение учитывает фоновые события — эти события нажимаются.

person sylar32    schedule 28.07.2020