Clash Royale CLAN TAG#URR8PPP

How to retrieve events created on fullcalendar on a datepicker to manage an appointment in symfony?

Here I realize a medical appointment site, and the two actors, who intervene are the doctor and the patient. So I set up the full calendar on the doctor's side, to be able to manage his schedules (add, modify, and delete his events) and save them in a database.And on the side of the patient, when he chooses the doctor , a date picker, with hours will appear on the appointment page and its general info. What I would like is that the patient sees on the date picker the available days of the doctor he has chosen.
The problem is that I have no idea how to match these two things (fullcalendar and datepicker), so if someone could give me a hint, or a starting point or a tutorial, I will be really grateful .
Thank you
Here is the image of the datepicker where will be made the making of an appointment:

This my jquery script:

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

2 Answers
2

Below is the working example you were looking for. Click on the button to change disabled dates dynamically. 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>

setDatesDisabled

getDisabledDates

With http://www.daterangepicker.com/

You should add a function to your controller like this one to get all the dates

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;



And also modify your new action to iterate on your saved events

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),
]);


and finally add the config to the daterangepicker in the new template form

new

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

$('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>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.