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>

Answer 2

使用http://www.daterangepicker.com/

您应该像这样向控制器添加一个函数以获取所有日期

private function getDatesBetween(\DateTime $start, \DateTime $end)
{
    $array = array();

    $interval = new \DateInterval('P1D');
    $daterange = new \DatePeriod($start, $interval, $end);

    foreach($daterange as $date) {
        $array[] = $date->format('Y-m-d');
    }

    $array[] = $end->format('Y-m-d');

    return $array;
}

并修改您的new操作以迭代保存的事件

    // this is the end of the `new` action
    $disabledDates = array();
    $em = $this->getDoctrine()->getManager();

    $bookings = $em->getRepository(Booking::class)->findAll();

    foreach ($bookings as $key => $booking) {
        $booking_period = $this->getDatesBetween(
            $booking->getBeginAt(),
            $booking->getEndAt()
        );

        $disabledDates = array_merge($disabledDates, $booking_period);
    }

    return $this->render('booking/new.html.twig', [
        'booking' => $booking,
        'form' => $form->createView(),
        'disabledDates' => json_encode($disabledDates),
    ]);

最后以new模板形式将配置添加到daterangepicker

{# templates/booking/new.html.twig #}
<script type="text/javascript">
    $(function() {
        var disabledDates = {{ disabledDates|raw }};

        $('input[name="daterange"]').daterangepicker({
            isInvalidDate: function (date) {
                var formatted = date.format('YYYY-MM-DD');

                return disabledDates.indexOf(formatted) > -1;
            }
        }, function(start, end, label) {
            console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
        });
    });
</script>

如何检索在日期选择器的全日历上创建的事件以管理Symfony中的约会？

2 个答案: