完整日历中的可点击日期

Question

我是初学者，我从 fullcalendar.io 下载了完整的日历 5.10.1。这就是我想要做的。如果我点击任何日期，它将转到我的 registration.html.

这是日历脚本：

   <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

    </script>

这是注册表：

<form action="" method="POST">

        <fieldset>
          <legend>For person</legend>
          <label>
            Name
            <input type="text" name="name" required>
          </label>
          <div class="two-cols">
            <label>
              Email address
              <input type="email" name="email" required>
            </label>
            <label>
              Phone number
              <input type="tel" name="phone">
            </label>
          </div>
        </fieldset>

        <fieldset>
          <legend>Appointment request</legend>
          <div class="two-cols">
            <label>
              Datum
              <input type="date" name="Appointment request" required>
            </label>
            <div class="inline">
              <label>
                <input type="hidden" name="Morning desired" value="no">
                <input type="checkbox" name="Morning desired" value="yes">
                Morning
              </label>
              <label>
                <input type="hidden" name="Afternoon desired" value="no">
                <input type="checkbox" name="Afternoon desired" value="yes">
                Afternoon
              </label>
            </div>
          </div>
          <p>Confirmation requested by</p>
          <div class="inline">
            <label>
              <input type="radio" name="Confirmation requested by" value="email" checked>
              Email
            </label>
            <label>
              <input type="radio" name="Confirmation requested by" value="phone">
              Phone call
            </label>
          </div>
        </fieldset>
        
        <div class="btns">
          <input type="text" name="_gotcha" value="" style="display:none;">
          <input type="submit" value="Submit request">
        </div>

      </form>

Answer 1

您可以使用dateClick函数。

new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridMonth'
  dateClick: function() {
     window.location.href = "YOUR URL TO OTHER PAGE";
  },
});

Answer 2

试试这个

var calendar = new FullCalendar.Calendar(calendarEl, {
  dateClick: function(info) {
    window.location.href = "YOUR URL";
  }
});

文档 link - https://fullcalendar.io/docs/dateClick

完整日历中的可点击日期

Clickable date in full calendar

javascript

html

fullcalendar

fullcalendar-5