Question

我不太了解全日历（v4），因为这是我的第一次。我想显示第二个模式中第一个模式的值标题或日期，并将其注册到数据库。我创建了两个模态。第一个模态显示有关事件的一些信息，第二个模态显示（当您单击按钮“ s'inscrire”时），将不同的输入显示在编写信息用户中。这些信息将添加到数据库中。

非常感谢您的帮助。我希望我对我的解释很清楚。

my jsfiddle

my output json

我的代码html

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

<!--modal info-->
<div class="modal fade" id="ModalInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="Title"></h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <p class="text-left"><span id="Description"></span></p>
        <p class="text-left">Du <span id="Start"></span> au <span id="End"></span></p>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary" id="OKInscription">S'inscrire</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!--modal inscription-->
<div class="modal fade" id="modalInscription" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Inscription à cette activité: <span id="Title"></span></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
      </div>
      <div class="modal-body">
        <form class="needs-validation" novalidate>
          <div class="form-row">
            <div class="col-12 mb-3">
              <label for="validationCustom01">Prénom</label>
              <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
              <div class="valid-feedback">
                Looks good!
              </div>
            </div>
            <div class="col-12 mb-3">
              <label for="validationCustom02">Nom</label>
              <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
              <div class="valid-feedback">
                Looks good!
              </div>
            </div>
            <div class="col-12 mb-3">
              <label for="validationCustomUsername">Mail</label>
              <div class="input-group">
                <input type="text" class="form-control" id="validationCustomUsername" value="mark.otto@gmail.com" aria-describedby="inputGroupPrepend" required>
                <div class="invalid-feedback">
                  Please choose a username.
                </div>
              </div>
            </div>
            <div class="col-12 mb-3">
              <label for="validationCustomUsername">SMS</label>
              <div class="input-group">
                <input type="text" class="form-control" id="validationCustomUsername" value="06 12 34 56 78" aria-describedby="inputGroupPrepend" required>
                <div class="invalid-feedback">
                  Please choose a username.
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

我的代码脚本

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');

    const calendar = new FullCalendar.Calendar(calendarEl, {
      defaultDate: "2019-07-04T10:00:00",
      businessHours: {
        daysOfWeek: [4, 5, 6, 7],
        startTime: '10:00',
        endTime: '19:00',
      },
      slotEventOverlap: false,
      minTime: "09:30:00",
      maxTime: "20:00:00",
      height: 'auto',
      locale: 'fr',
      timeZone: 'Europe/Paris',
      plugins: ['timeGrid'],
      defaultView: 'timeGridFourDay',
      header: {
        left: '',
        center: 'title',
        right: 'timeGridDay,timeGridFourDay'
      },
      views: {
        timeGridFourDay: {
          type: 'timeGrid',
          duration: {
            days: 4
          },
          buttonText: '4 day'
        },
      },
      navLinks: true,
      selectable: true,
      selectHelper: true,
      select: function(start, end, allDay) {

      },
      eventClick: function(info) {
        let start = moment(info.event.start).format('DD-MM-YYYY à HH:mm');
        let end = moment(info.event.end).format('DD-MM-YYYY à HH:mm');

        $('#ModalInfo').modal('show');
        $('#Title').html(info.event.title);
        $('#Id').html(info.event.id);
        $('#Start').html(start);
       $('#Description').html(info.event.extendedProps.description);
        $('#End').html(end);
        $("#OKInscription").on("click", function() {
          $('#modalInscription').modal('show');
          $('#ModalInfo').modal('hide');
        });
      },
      // events: 'json/events.json',
      events: 'https://api.myjson.com/bins/1ekxgi',
      eventRender: function(info) {}
    });
    calendar.render();
  });

</script>

如何在第二个模式中显示值ID？

0 个答案: