FullCalendar

Dilidim Messages postés 114 Statut Membre -  
Dilidim Messages postés 114 Statut Membre -
Bonjour bonjour,

Je suis actuellement en train de faire un intranet (html/php/mysql), mon patron me demande d'intégrer un agenda pour que les 4 techniciens organisent leurs interventions.
N'ayant que très peu de connaissance en java, j'ai effectué des recherches afin d'en trouver un déjà fait (escroc que je suis ^^). J'ai alors trouvé Fullcalendar, j'ai alors suivi ce tuto https://jamelbaz.com/tutos/integration-de-fullcalendar-avec-php-mysql pour l'intégrer mais j'aimerai ajouter des fonctionnalités :
- Ajouté un RDV avec ceci
https://fullcalendar.io/js/fullcalendar-2.3.2/demos/external-dragging.html
- Attribuer une couleur pour chaque technicien, soit 4.
- Mettre en français (normalement c'est bon ^^)
- Modifier/supprimer un rdv
- Arriver directement sur la date du jour lors de l'ouverture de l'agendas

Merci d'avance !

1 réponse

  1.
    Dilidim Messages postés 114 Statut Membre
     
    J'obtiens ça : 

    <!DOCTYPE html>
<html>
<head>
<nav>
	<ul id="menu_horizontal">
		<li><a href="index.php">Accueil</a></li>
		<li><a href="listeclient.php">Liste des clients</a></li>
		<li><a href="agenda.php">Agenda</a></li>
	</ul>
</nav>
<meta charset='utf-8' />
<link rel='stylesheet' href='css/jquery-ui.min.css' />
<link href='css/fullcalendar.css' rel='stylesheet' />
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='js/moment.min.js'></script>
<script src='js/jquery.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/jquery-ui.custom.min.js'></script>
<script src='js/lang-all.js'></script>
<script>

	$(document).ready(function() {
		var currentLangCode = 'fr';

		$('#external-events .fc-event').each(function() {

			// store data so the calendar knows to render an event upon drop
			$(this).data('event', {
				title: $.trim($(this).text()), // use the element's text as the event title
				stick: true // maintain when user navigates (see docs on the renderEvent method)
			});

			// make the event draggable using jQuery UI
			$(this).draggable({
				zIndex: 999,
				revert: true,      // will cause the event to go back to its
				revertDuration: 0  //  original position after the drag
			});

		});
		
		function renderCalendar() {
			$('#calendar').fullCalendar({
				droppable: true,
				drop: function() {
				// is the "remove after drop" checkbox checked?
				if ($('#drop-remove').is(':checked')) {
					// if so, remove the element from the "Draggable Events" list
					$(this).remove();
				}
			},
				header: {
					left: 'prev,next today',
					center: 'title',
					right: 'month,agendaWeek,agendaDay'
				},
				defaultDate: '2015-06-26',
				lang: currentLangCode,
				buttonIcons: false, // show the prev/next text
				weekNumbers: true,
				editable: true,
				eventLimit: true, // allow "more" link when too many events
				events: "http://localhost/calendar/events.php"
			});
		}
		renderCalendar();
	});


</script>
<style>
	nav {
		text-align : left;
	}

	body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	}
		
	#wrap {
		width: 1100px;
		margin: 0 auto;
	}
		
	#external-events {
		float: left;
		width: 150px;
		padding: 0 10px;
		border: 1px solid #ccc;
		background: #eee;
		text-align: left;
	}
		
	#external-events h4 {
		font-size: 16px;
		margin-top: 0;
		padding-top: 1em;
	}
		
	#external-events .fc-event {
		margin: 10px 0;
		cursor: pointer;
	}
		
	#external-events p {
		margin: 1.5em 0;
		font-size: 11px;
		color: #666;
	}
		
	#external-events p input {
		margin: 0;
		vertical-align: middle;
	}

	#calendar {
		float: right;
		width: 900px;
	}

</style>
</head>
<body>
<div id='wrap'>
	<div id='external-events'>
		<h4>RDV</h4>
		<div class='fc-event' style="background:#0E6D26;">Tech1</div>
		<div class='fc-event' style="background:#BF1CB7;">Tech2</div>
		<div class='fc-event' style="background:#C91625;">Tech3</div>
		<div class='fc-event' style="background:#173FA5;">Tech4</div>
	</div>
	<div id='calendar'></div>
	<div style='clear:both'></div>
</div>
	
</body>
</html>
    0