Clickable date in full calendar-CodePudding

I am a beginner I downloaded full calendar 5.10.1 from fullcalendar.io. Here's what I want to do. If I click on any date, it will go to my registration.html.

Here is calendar script:

   <script>

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

    </script>

Here is registration form:

<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>

CodePudding user response：

You can use the dayClick function.

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

CodePudding user response：

Try this

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

documentation link - https://fullcalendar.io/docs/dateClick