Получите первую и последнюю видимую дату полного календаря без использования средства выбора даты

Я использую fullcalendar в своем коде, реализовал и добавил в него события, но моя цель состояла в том, чтобы получить первую видимую и последнюю видимую дату календаря.

Что мы хотели сделать, так это получить видимые первую и последнюю даты, чтобы мы могли добавить извлеченные даты в базу данных и получить все события в этом диапазоне дат.

Я пробовал это Get start и даты окончания отображаются в представлении дней в средстве выбора даты? но я хочу использовать только jQuery и fullCalendar. Есть ли другой способ извлечь даты без использования средства выбора даты?

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


person Jane    schedule 24.03.2021    source источник
comment
В соответствии с тегом SO [fullcalendar] версии сильно различаются, поэтому вам необходимо включить версию fullcalendar.   -  person freedomn-m    schedule 24.03.2021
comment
привет @freedomn-m, спасибо за ответ. Итак, что мы хотели сделать, так это получить видимые первую и последнюю даты, чтобы мы могли добавить извлеченные даты в базу данных и получить все события в этом диапазоне дат.   -  person Jane    schedule 24.03.2021
comment
Можно ли получить первую дату первой недели и последнюю дату последней недели полного календаря? потому что я не уверен, возможно ли это, потому что я исследовал со своей стороны, но могу получить только первую и последнюю даты текущей недели.   -  person Jane    schedule 24.03.2021
comment
Похоже, это всегда 6 недель с понедельника или до первого числа месяца. Таким образом, вы можете получить даты как: [первая дата] = [первая дата месяца] - [день недели первого месяца] и [последняя дата] = [первая дата] + (6 * 7) дней   -  person freedomn-m    schedule 24.03.2021
comment
Спасибо @freedomn-m, кажется, я почти у цели. Это большая помощь~   -  person Jane    schedule 24.03.2021


Ответы (2)


Используя версию 5.5.1, вы можете проверять рендеринг HTML. Дневные ячейки имеют класс fc-daygrid-day и data-date="{date}"

Учитывая, что исходный идентификатор div - это календарь, который вы можете использовать:

var cells = $("#calendar td.fc-daygrid-day");
console.log(cells.length, cells.first().data("date"), cells.last().data("date"))

Пример фрагмента:

$(function() { 
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth'
  });
  calendar.render();
  
  var cells = $("#calendar td.fc-daygrid-day");
  console.log(cells.length, cells.first().data("date"), cells.last().data("date"))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.css">

<div id='calendar'></div>

person freedomn-m    schedule 24.03.2021
comment
Верно, но это ненужный обходной путь. fullcalendar.io/docs/view-object - person ADyson; 24.03.2021
comment
@ADyson да, это был обходной путь для ОП, не знающего, как использовать API. - person freedomn-m; 24.03.2021
comment
Конечно, но тогда, может быть, лучше рассказать им об API? Смотрите мой ответ. - person ADyson; 24.03.2021
comment
@freedomn-m, у меня это хорошо работает, даже если я не использую полный календарь v5. - person Jane; 25.03.2021
comment
Я рад, что это помогло, но не могли бы вы сообщить нам, какую версию/параметры вы используете? В идеале с небольшим фрагментом в вопросе. Затем мы (вероятно, @ADyson ...) сможем предоставить вам обновленную информацию о правильном пути. Это должен быть только временный взлом. :) - person freedomn-m; 25.03.2021
comment
@freedomn-m, поэтому я просто добавил это в свой код var Cells = $(#calendar td.fc-daygrid-day); console.log(cells.length, cell.first().data(date), Cells.last().data(date)) и дает мне даты, которые я искал. В настоящее время используется v2 - person Jane; 26.03.2021

Можно ли получить первую дату первой недели и последнюю дату последней недели полного календаря

... да легко - в последней версии (v5 на момент написания) вы можете просто запросить текущее представление, и оно имеет свойства, содержащие эти даты.

Тем не менее, вы также сказали, что это

чтобы мы могли добавить извлеченные даты в базу данных и получить все события в этом диапазоне дат.

У вас нет причин делать это вручную, если это ваша цель. FullCalendar уже предоставляет способы указания источника ваших событий — вы можете просто указать его по URL-адресу, который возвращает JSON в формате событий fullCalendar, или, если вам нужна большая гибкость, вы можете определить обратный вызов function, где вы можете использовать собственный код для получения событий из их источника.

Ключевым моментом в обоих этих подходах является то, что fullcalendar автоматически

  • вызывает URL/запускает функцию каждый раз, когда диапазон дат изменяется в календаре, и

  • предоставляет вам даты начала и окончания нового диапазона дат, чтобы ваш сервер мог фильтровать возвращаемые им события, чтобы они попадали только в этот диапазон.

Вам не нужно тратить время на попытки вручную извлечь диапазоны дат из календаря или передать события другими способами.

person ADyson    schedule 24.03.2021
comment
Спасибо @ADyson также за объяснение, это поможет мне в будущем!! - person Jane; 25.03.2021
comment
@Jane Есть ли какая-то особая причина, по которой это не помогает тебе и сейчас? - person ADyson; 25.03.2021
comment
некоторые из них действительно помогают, так как v5 почти такая же, как и v2. В настоящее время я использую fullcalendar v2. - person Jane; 26.03.2021
comment
О, это очень старая версия. Есть ли причина, по которой вы все еще используете это? v5 имеет гораздо больше функций, исправлений ошибок и т. д. P.S. Вы можете пометить свой вопрос версией, потому что версии часто имеют разные функции. - person ADyson; 26.03.2021
comment
В любом случае да события в формате JSON и (события как функция)[fullcalendar.io/docs/v3/events-function], о которых я упоминал выше, оба существуют в v2, хотя синтаксис, который вы используете, немного отличается, но идея и основное поведение одинаковы. И чтобы использовать более простой подход к получению представления, вы должны использовать getView. (обратите внимание, что ссылка говорит v3, но, как говорится в документации, v3 и v2 имеют одинаковый внешний API, поэтому документация идентична.) - person ADyson; 26.03.2021
comment
На самом деле, я не первый, кто запустил программу, так что мне предстоит много работы, когда мне придется снова пересматривать ее до v5. Вот почему я адаптировал то, что сделал предыдущий человек. И это правда, синтаксис немного другой, то есть, возможно, я не нашел правильный ответ, но сейчас. В ближайшем будущем, если мне придется создать еще один календарь для другой программы, я обязательно применю то, что вы ответили в этом вопросе. В любом случае, большое спасибо, я действительно получил знания. Это большая помощь! Слава! :) - person Jane; 27.03.2021