dumas_gestion/mondumas/templates/agenda/agenda.pt

<metal:block use-macro="main_template">
<div metal:fill-slot="content">
<div class="container">

	<div class="alert alert-warning" tal:condition="message" tal:content="message" />

	<div class="row">
		<form method="POST" id="frm" class="form-horizontal">
			<div class="form-group">
				<div class="col-xs-4">
					<select class="form-control" id="agenda" name="agenda" onChange="$('#frm').submit()" tal:condition="isCommercial==False">
						<div tal:repeat="item agendas">
							<option value="${item.CD_UTI}" tal:attributes="selected agenda==item.CD_UTI and 'selected' or None">${item.NOM}</option>
						</div>
					</select>
				</div>
			</div>
		</form>
	</div>
	<br />
	<div class="container">
		<div id="calendar"></div>
	</div>
	<br />
	<p align="center">
		<span class="label bg-PE">RDV Peinture</span>&nbsp;
		<span class="label bg-ME">RDV Menuiserie</span>&nbsp;
		<span class="label bg-PL">RDV Plomberie</span>&nbsp;
		<span class="label bg-PO">RDV Polynet</span>&nbsp;
		<span class="label bg-CD">RDV Couleurs & Déco</span>&nbsp;
	</p>
	<br />
	<!-- Modal : Confirmation CREATION  -->
	<div class="modal fade" id="confirmCreate" role="dialog" aria-labelledby="confirmCreateLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title">Créer un rendez-vous pour ${agenda}</h4>
			</div>
			<div class="modal-body">
				<!-- The form is placed inside the body of modal -->
				<form id="create_rdv-form" class="form-horizontal" action="${url}" method="post"
					data-fv-framework="bootstrap"
					data-fv-icon-valid="glyphicon glyphicon-ok"
					data-fv-icon-invalid="glyphicon glyphicon-remove"
					data-fv-icon-validating="glyphicon glyphicon-refresh">
			
					<p>
						Voulez-vous créer un rendez-vous : <br />
					</p>
								<div class="col-xs-offset-3 col-xs-9">
						<b>le <span id=dateheureRDV>date</span></b><br />
					</div>
					<div class="form-group">
						<label class="col-xs-3 control-label">Société</label>
						<div class="col-xs-8">
							<label class="radio-inline"><input type="radio" name="societe" value="PE" checked>PE</label>
							<label class="radio-inline"><input type="radio" name="societe" value="ME">ME</label>
							<label class="radio-inline"><input type="radio" name="societe" value="PL">PL</label>
							<label class="radio-inline"><input type="radio" name="societe" value="PO">PO</label>
							<label class="radio-inline"><input type="radio" name="societe" value="CD">CD</label>
						</div>
					</div>
					<div class="form-group">
						<label class="col-xs-3 control-label">Nom ou numéro</label>
						<div class="col-xs-8">
							<input type="text" class="form-control" id="name" name="name" placeholder="3 caractères minimum" />
						</div>
					</div>
					<div class="form-group">
						<label class="col-xs-3 control-label">Motif</label>
						<div class="col-xs-8">
							<select class="form-control" id="type_rdv" name="type_rdv">
								<div tal:repeat="item types_rdv">
									<option value="${item.LIB}" tal:attributes="selected type_rdv==item.LIB and 'selected' or None">${item.LIB}</option>
								</div>
							</select>
						</div>
					</div>
					<input type="hidden" name="dateRDV" id=dateRDV value="date">
					<input type="hidden" name="heureRDV" id=heureRDV value="heure">

					<div class="form-group">
						<div class="col-xs-5 col-xs-offset-4">
							<button type="submit" class="btn btn-danger" name="form.submitted">Créer</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
						</div>
					</div>
				</form>
			</div>
			</div>
		</div>
	</div>

</div>	
<br />
<br />
</div><!-- content -->
<div metal:fill-slot="additional_scripts">
	<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/locale/fr.js"></script>
	<!--  autocomplete plugin  -->
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script>
	$(document).ready(function() {
		var datePlan = '${datePlan}';
	
		$('#calendar').fullCalendar({
			schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
			locale: 'fr',
			header: {
				left: 'agendaDay agendaWeek month listMonth',
				center: 'prev title next',
				right: 'today'
			},
			allDaySlot: false,
			defaultView: 'agendaWeek',
			defaultDate: moment(datePlan),
			weekends: false,
			height: 'auto',
			minTime: "07:00:00",
			maxTime: "20:00:00",
			events:${calendar_events},
			eventRender: function(event, element){ 
				element.find('.fc-title').append("<br/>" + event.description); 
			},
			dayClick: function(date, jsEvent, view) {
				inputDate = moment(date).format('YYYY-MM-DD');
				var today = new Date();
				// disable dayClick for past dates
				if (date < today) 
				{
				return false;
				}
				$('#dateheureRDV').html(moment(date).format('dddd DD MMMM à HH:mm'));
				$('#dateRDV').attr('value', moment(date).format('YYYY-MM-DD'));
				$('#heureRDV').attr('value', moment(date).format('HH:mm'));
				$("#confirmCreate").modal("show");
				}
		});
		$('#create_rdv-form').formValidation({
			framework: 'bootstrap',
			excluded: ':disabled',
			icon: {
				valid: 'glyphicon glyphicon-ok',
				invalid: 'glyphicon glyphicon-remove',
				validating: 'glyphicon glyphicon-refresh'
			},
		});
		$('#name').autocomplete({
			source: function (request, response) {
				$.ajax({
					url:'/ajax_lookup',
					dataType: 'json',
					data: {
						recherche: $("input[name='societe']:checked").val() + request.term,
					},
					success: function (data) {
						response( data );
					},
				});
			},
			minLength: 4,
			appendTo: "#confirmCreate"
		});
	});
	</script>
</div>
</metal:block>