FullCalendar
Fermé
Dilidim
Messages postés
106
Date d'inscription
jeudi 22 avril 2010
Statut
Membre
Dernière intervention
25 janvier 2017
-
26 juin 2015 à 15:27
Dilidim Messages postés 106 Date d'inscription jeudi 22 avril 2010 Statut Membre Dernière intervention 25 janvier 2017 - 26 juin 2015 à 17:17
Dilidim Messages postés 106 Date d'inscription jeudi 22 avril 2010 Statut Membre Dernière intervention 25 janvier 2017 - 26 juin 2015 à 17:17
1 réponse
Dilidim
Messages postés
106
Date d'inscription
jeudi 22 avril 2010
Statut
Membre
Dernière intervention
25 janvier 2017
26 juin 2015 à 17:17
26 juin 2015 à 17:17
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>
