完整日历中的可点击日期

Posted 2023-02-19

【中文标题】完整日历中的可点击日期

【英文标题】：Clickable date in full calendar

【发布时间】：2022-01-09 12:43:35

【问题描述】：

我是初学者，我从 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>

【问题讨论】：

您已经得到了下面的答案，但您可以通过阅读完整的日历文档几分钟轻松找到答案。

【参考方案1】：

试试这个

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

文档链接 - https://fullcalendar.io/docs/dateClick

【讨论】：

非常感谢它的工作！ :)

【参考方案2】：

您可以使用dateClick 函数。

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

【讨论】：

非常感谢它的工作！ :)