Agenda d'evenement a partir de MySql

Fermé
guedo Messages postés 77 Date d'inscription mercredi 26 novembre 2014 Statut Membre Dernière intervention 10 avril 2019 - 2 mars 2015 à 14:43
guedo Messages postés 77 Date d'inscription mercredi 26 novembre 2014 Statut Membre Dernière intervention 10 avril 2019 - 5 mars 2015 à 11:14
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
A voir également:

1 réponse

Xavierdu34 Messages postés 216 Date d'inscription lundi 2 décembre 2013 Statut Membre Dernière intervention 10 octobre 2016 21
5 mars 2015 à 10:34
Pourquoi ne pas utiliser Google Calendar ?
https://developers.google.com/calendar/
0
guedo Messages postés 77 Date d'inscription mercredi 26 novembre 2014 Statut Membre Dernière intervention 10 avril 2019 1
5 mars 2015 à 11:14
par ce que j'ai lu dans plusieurs forum que c'était pas le meilleur après j'avoue que je n'ai pas regarder en profondeur ses possibilité mais si tu me dit que c'est possible de l'alimenter depuis ma bdd j'accepte toute information qui me viendrait en aide :)
0