jquery - 如何检索在日期选择器上在 fullcalendar 上创建的事件以管理 symfony 中的约会？

Question

在这里，我实现了一个医疗预约网站，介入的两个参与者是医生和患者。因此，我在医生方面设置了完整的日历，以便能够管理他的日程安排(添加、修改和删除他的事件)并将其保存在数据库中。而在患者方面，当他选择医生时，约会页面及其一般信息上将显示带有时间的日期选择器。我希望患者在日期选择器上看到他选择的医生的可用日期。 问题是我不知道如何匹配这两个东西(fullcalendar 和 datepicker)，所以如果有人能给我一个提示，或者一个起点或一个教程，我将非常感激。 谢谢 这是日期选择器的图像，将在其中进行预约:

这是我的 jquery 脚本:

 <script src="{{ asset('public/js/jquery-2.2.4.min.js') }}"></script>
 <script src="{{ asset('public/js/moment.js') }}"></script>
 
 <script src="{{ asset('public/js/bootstrap-datepicker.js') }}"></script>
  
   <script>
              
  $('#calendar').datepicker({
                todayHighlight: true,
                daysOfWeekDisabled: [0,6],
                weekStart: 1,
                format: 'dd-mm-yyyy',
                language: 'fr',
            setDatesDisabled: [moment("12-25-2018", "MM-DD-YYYY"), 
                                  moment("12-25-2018", "MM-DD-YYYY")]

                
            });
    </script>

Answer 1

下面是您正在寻找的工作示例。单击该按钮可动态更改禁用日期。 Avec plaisir:-)

$(function() {
  $('.date-range').datepicker({
    todayHighlight: true,
    daysOfWeekDisabled: [0, 6],
    weekStart: 1,
    format: 'dd-mm-yyyy',
    language: 'fr',
    inputs: $('.range-start'),
    datesDisabled: ['27-08-2018', '28-08-2018', '29-08-2018']
  });
  $('#button').click(function() {
    $('.range-start').datepicker('setDatesDisabled', ['30-08-2018', '31-08-2018']);
    //This is where you get your DB date array using an AJAX call
  });
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.css');
.datepicker table tr td {
  color: green;
  font-weight: 700;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

<div id="container">
  <div class="date-range">
    <div class="range-start"></div>
  </div>
  <button id="button" class="btn btn-warning">Now, disable 30 & 31</button>
</div>