<!DOCTYPE html>
<html>
<head>
<title>Calendrier et formulaire de congés</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: [
{
title: 'Congé',
start: '2023-06-01',
end: '2026-06-05'
},
{
title: 'Congé',
start: '2022-06-15',
end: '2022-06-19'
}
]
});
});
</script>
</head>
<body>
<header style='height:100px ; background-color:blue'>
</header>
<h1>Calendrier et formulaire de congés</h1>
<hr>
<form>
<label for="start-date">Date de début :</label>
<input type="date" id="start-date" name="start-date">
<label for="end-date">Date de fin :</label>
<input type="date" id="end-date" name="end-date">
<input type="submit" value="Soumettre">
</form>
<hr>
<div id="calendar"></div>
</body>
</html>
