Agenda d'evenement a partir de MySql

guedo Messages postés 83 Statut Membre -
guedo Messages postés 83 Statut Membre - 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

Afficher la suite

A voir également:

Agenda d'evenement a partir de MySql
Creer un groupe whatsapp a partir d'un autre groupe - Guide
Ajouter agenda outlook dans google agenda - Guide
Google agenda pc - Télécharger - Agendas & Calendriers
Comment faire une recherche à partir d'une photo - Guide
Comment ajouter un agenda sur google agenda sur téléphone - Guide

1 réponse

Réponse 1 / 1

Xavierdu34 Messages postés 223 Statut Membre 21

Pourquoi ne pas utiliser Google Calendar ?
https://developers.google.com/calendar/

guedo Messages postés 83 Statut Membre 1

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 :)

Discussions similaires

Annuaire portable gratuit à partir d'un nom

Chemin Logo du site de la Cité de l'espace

problème de pixel

AGENDA DIRECT suppression compte

Votre réponse

Discussions similaires