Bonjour a tous je me dirige vers vous car comme a mon habitude aprés plusieur temp passez sur google a recherche des agenda jen'ai trouver que des agenda html qui ne gere pas du tout les entrées de base de données en effet ayant beaucoup de rendez-vous j'aurais aimer avoir un agenda qui me les place dans les jour correspondant aux dates saisi dans ma bdd en MySql alors j'ai trouver celui ci qui me convient
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/index">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.mobile.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.timezones.min.js"></script>
</head>
<body>
<div id="example">
<div id="team-schedule">
<div id="people">
<input checked type="checkbox" id="alex" value="1">
<input checked type="checkbox" id="bob" value="2">
<input type="checkbox" id="charlie" value="3">
</div>
</div>
<div id="scheduler"></div>
</div>
<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
{ type: "workWeek", selected: true },
"week",
"month",
"agenda",
{ type: "timeline", eventHeight: 50}
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/tasks",
dataType: "jsonp"
},
update: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
dataType: "jsonp"
},
create: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/create",
dataType: "jsonp"
},
destroy: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "TaskID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
}
},
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
});
$("#people :checkbox").change(function(e) {
var checked = $.map($("#people :checked"), function(checkbox) {
return parseInt($(checkbox).val());
});
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter({
operator: function(task) {
return $.inArray(task.ownerId, checked) >= 0;
}
});
});
});
</script>
<style scoped>
.k-nav-current > .k-link span + span {
max-width: 200px;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: top;
}
#team-schedule {
background: url('../content/web/scheduler/team-schedule.png') transparent no-repeat;
height: 115px;
position: relative;
}
#people {
background: url('../content/web/scheduler/scheduler-people.png') no-repeat;
width: 345px;
height: 115px;
position: absolute;
right: 0;
}
#alex {
position: absolute;
left: 4px;
top: 81px;
}
#bob {
position: absolute;
left: 119px;
top: 81px;
}
#charlie {
position: absolute;
left: 234px;
top: 81px;
}
</style>
</body>
</html>
qui donne cela
alors je sais pas ou ni comment je peut integrer mes date de rdv un affichage simple sur une journee me suffirait sans date de fin ni d'heure de fin.
j'ai des dates et des heures de rdv avec plusieur commerciaux donc j'ai bien vu que cette agenda gerer plusieur personne (la team schedule)
si une âme charitable pouvait bien accepter de m'aider merci de votre consideration
Afficher la suite
