web-dev-qa-db-fra.com

Calendrier jQuery avec sélection de plages horaires

Je veux créer une fonction de prise de rendez-vous en PHP. Je veux avoir un calendrier dans lequel l'utilisateur peut sélectionner la date et en retour le calendrier montre les créneaux horaires à sélectionner.

Le créneau horaire sera statique, il pourrait être dynamique à l'avenir.

Vous pouvez vérifier l'exemple sur le lien ci-dessous.

https://getbooked.io/

Recherche sur Internet pour ce type de plugins, mais n'a pas pu trouver. (J'ai besoin d'un plugin gratuit).

javascriptphpjquerydatepicker
12
Punit Gajjar

Veuillez vérifier cela http://jsfiddle.net/Xx4GS/258/

L'idée est sur le changement que nous créons le nouvel élément html et l'ajoutons au sélecteur de date. Vous devez modifier la conception en fonction de vos besoins. Appelez la fonction ajax dans l'événement change pour récupérer l'intervalle de temps de la base de données. parce que je peux voir que le lien que vous avez donné fait de même.

Joindre également le code:

var $datePicker = $("div#datepicker");

var $datePicker = $("div");

$datePicker.datepicker({
    changeMonth: true,
    changeYear: true,
    inline: true,
    altField: "#datep",
}).change(function(e){
    setTimeout(function(){   
        $datePicker
            .find('.ui-datepicker-current-day')
            .parent()
            .after('<tr>\n\
                        <td colspan="8">\n\
                            <div> \n\
                                <button>8:00 am – 9:00 am </button>\n\
                            </div>\n\
                            <button>9:00 am – 10:00 am</button>\n\
                            </div>\n\
                            <button>10:00 am – 11:00 am</button>\n\
                            </div>\n\
                        </td>\n\
                   </tr>');

    });
});
<div id="datepicker"></div>
10
Ish
$('.date-picker-2').popover({
        html : true, 
        content: function() {
          return $("#example-popover-2-content").html();
        },
        title: function() {
          return $("#example-popover-2-title").html();
        }
});
$(".date-picker-2").datepicker({
        onSelect: function(dateText) { 
        $('#example-popover-2-title').html('<b>Avialable Appiontments</b>');
        var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
        $('#example-popover-2-content').html('Avialable Appiontments On <strong>'+dateText+'</strong><br>'+html);
        $('.date-picker-2').popover('show');
    }
});
.popover {
        left: 40% !important;
}
.btn {
        margin: 1%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
</head>
<body>
    <div class=" col-md-4">
      <div  class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
      <span class="" id="example-popover-2"></span> </div>
    <div id="example-popover-2-content" class="hidden"> </div>
    <div id="example-popover-2-title" class="hidden"> </div>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<style>
.popover {
    left: 40% !important;
}
.btn {
    margin: 1%;
}
</style>
</head>
<body>
    <div class=" col-md-4">
      <div  class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
      <span class="" id="example-popover-2"></span> </div>
    <div id="example-popover-2-content" class="hidden"> </div>
    <div id="example-popover-2-title" class="hidden"> </div>
<script>
$('.date-picker-2').popover({
    html : true, 
    content: function() {
      return $("#example-popover-2-content").html();
    },
    title: function() {
      return $("#example-popover-2-title").html();
    }
});
$(".date-picker-2").datepicker({
    onSelect: function(dateText) { 
        $('#example-popover-2-title').html('<b>Avialable Appiontments</b>');
        var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
        $('#example-popover-2-content').html('Avialable Appiontments On <strong>'+dateText+'</strong><br>'+html);
        $('.date-picker-2').popover('show');
    }
});
</script> 
</body>
</html>

Il s'agit d'une méthode statique pour afficher les rendez-vous disponibles, vous pouvez utiliser la méthode Ajax dans la fonction onSelect du sélecteur de date pour les rendez-vous dynamiques

6
Vishnu Bhadoriya

Essayez FullCalendar: http://fullcalendar.io/

C'est un plugin de calendrier Javascript complet, gratuit et open source. Il est très flexible et peut faire tout ce que vous avez décrit. L'effort requis de votre part consiste à gérer les événements que vous souhaitez (par exemple, l'utilisateur sélectionnant un créneau horaire) et à le connecter à vos données côté serveur. Vous voudrez peut-être modifier un peu l'apparence et/ou le comportement afin qu'il crée automatiquement des emplacements de la taille dont vous avez besoin. Comme je l'ai dit, il est incroyablement flexible, donc avec un peu de travail, vous devriez pouvoir le faire.

La documentation fournie pour faire tout cela est assez bonne. Si vous êtes coincé, veuillez poster plus de questions ici - je l'ai beaucoup utilisé et je pourrais peut-être vous aider.

Pour être honnête, je suis surpris que cela ne se soit pas déjà produit dans vos recherches sur Internet.

1
ADyson

Vous pouvez combiner jQuery plugin Tooltipster pour le gestionnaire mouseover et click pour créer la ligne. Vérifiez cet exemple de code :)

Vous pouvez soit charger les informations du mois et répéter lorsque le mois change, soit charger à la volée comme je l'ai fait dans mon code.

1
Grégoire Fruleux

Essayez Calendrier jQuery Week

Son plugin open source complet. Il est construit sur jquery et jquery ui et s'inspire d'autres calendriers hebdomadaires en ligne tels que google calendar. Effort de votre côté pour la mise à jour de la base de données côté serveur et quelques changements javascript dans le plugin selon vos besoins décrits. Voici une démo simple Demo . Voici plus de démos qui peuvent vous aider

0
Gopal Joshi