как открыть форму при нажатии на календарь в jQuery / javascript?

Question

У меня есть календарь, в котором, когда я нажимаю на день, отображается форма для ввода в порядке ее размещения в календаре. Однако эта форма исходит из структуры, к которой у меня тоже нет доступа. Меня беспокоит, могу ли я создать свою собственную форму, когда нажимаю на день в календаре в jQuery / javascript? пожалуйста посоветуйте / помогите. Спасибо вам большое!

Пример: https://www.calendar.com/wp-content/uploads/2018/04/create-event-website-miniform.png

вот мой jQuery код:

$(function(){
  var PUBLIC_KEY = "AIzaSyBnNAISIUKe6xdhq1_rjor2rxoI3UlMY7k",
      CALENDAR_ID = "f7jnetm22dsjc3npc2lu3buvu4@group.calendar.google.com";

  $("#scheduler").dxScheduler({
    dataSource: new DevExpress.data.DataSource({
        store: new DevExpress.data.CustomStore({
            load: function(options) {
                var result = $.Deferred();
                $.ajax({
                    data: {showDeleted: false},
                    dataType: "json",
                    url: [
                        "https://www.googleapis.com/calendar/v3/calendars/",
                        CALENDAR_ID,
                        "/events?key=",
                        PUBLIC_KEY
                    ].join("")
                }).done(function(response) {
                    result.resolve(response.items);
                });

                return result.promise();
            },
            insert: function(data) {
              console.log(data);
            }
        })
    }),
    startDateExpr: "start.dateTime",
    endDateExpr: "end.dateTime",
    textExpr: "summary",
    startDayHour: 7,
    timeZone: "America/Los_Angeles",
    showAllDayPanel: false,
    editing: true,
    currentDate: new Date($.now()),
    firstDayOfWeek: 0,
    views: ["day", "workWeek", "month"],
    currentView: "workWeek",
    height: 500
  });
});

Answer 1

Да, вы можете определить событие щелчка при нажатии на дни, а затем запретить поведение по умолчанию и делать то, что вы хотите. Найдите querySelector, который можно использовать для выбора дней. Я считаю, что все дни имеют dayClass класс.

$(document).on('click', '.dayClass', function(e) {
    e.preventDefault();
    //show your form for example if you use bootstrap modal
    $('#myModal').modal('show')
})

В вашем конкретном случае c:

$(function(){
        
  var PUBLIC_KEY = "AIzaSyBnNAISIUKe6xdhq1_rjor2rxoI3UlMY7k",
      CALENDAR_ID = "f7jnetm22dsjc3npc2lu3buvu4@group.calendar.google.com";

  $("#scheduler").dxScheduler({
    dataSource: new DevExpress.data.DataSource({
        store: new DevExpress.data.CustomStore({
            load: function(options) {
                var result = $.Deferred();
                $.ajax({
                    data: {showDeleted: false},
                    dataType: "json",
                    url: [
                        "https://www.googleapis.com/calendar/v3/calendars/",
                        CALENDAR_ID,
                        "/events?key=",
                        PUBLIC_KEY
                    ].join("")
                }).done(function(response) {
                    result.resolve(response.items);
                });

                return result.promise();
            },
            insert: function(data) {
              console.log(data);
            }
        })
    }),
    startDateExpr: "start.dateTime",
    endDateExpr: "end.dateTime",
    textExpr: "summary",
    startDayHour: 7,
    timeZone: "America/Los_Angeles",
    showAllDayPanel: false,
    editing: true,
    currentDate: new Date($.now()),
    firstDayOfWeek: 0,
    views: ["day", "workWeek", "month"],
    currentView: "workWeek",
    height: 500
  });
  $(document).on('click', 'td.dx-scheduler-focused-cell', function(e) {
    //show your form 
    $('.modal').modal('show')
  })
});

.dx-overlay-wrapper{
  display: none;
}

<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.2.7/css/dx.common.css">
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.2.7/css/dx.light.css">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id="scheduler"></div>

<!-- Small Bootstrap modal -->
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/19.2.7/js/dx.all.js"></script>

<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>