jquery.schedule

jq.Calendrier

calendrier jquery et html

• Prise en charge du glisser-déposer
• Redimensionner le calendrier
• Ajax obtenir des données

installer

emballer

 npm i jq.schedule --save

Démo

Essayez la démo

Comment utiliser

ajouter la tête CSS

 <link rel="stylesheet" type="text/css" href="./jquery.schedule/dist/css/style.min.css" />

insérer le corps

 <div id="schedule"></div>
<script type="text/javascript" src="./jquery.schedule/dist/js/jq.schedule.min.js"></script>
<script type="text/javascript">
    $(function(){
        var $sc = $("#schedule").timeSchedule({
            startTime: "07:00", // schedule start time(HH:ii)
            endTime: "21:00",   // schedule end time(HH:ii)
            widthTime:60 * 10,  // cell timestamp example 10 minutes
            timeLineY:60,       // height(px)
            verticalScrollbar:20,   // scrollbar (px)
            timeLineBorder:2,   // border(top and bottom)
            bundleMoveWidth:6,  // width to move all schedules to the right of the clicked time line cell
            rows : {
                '0' : {
                    title : 'Title Area',
                    subtitle : 'Description',
                    schedule:[
                        {
                            start:'09:00',
                            end:'12:00',
                            text:'Text Area',
                            data:{
                            }
                        },
                        {
                            start:'11:00',
                            end:'14:00',
                            text:'Text Area',
                            data:{
                            }
                        }
                    ]
                },
                '1' : {
                    title : 'Title Area',
                    schedule:[
                        {
                            start:'16:00',
                            end:'17:00',
                            text:'Text Area',
                            data:{
                            }
                        }
                    ]
                }
            },
            onChange: function(node, data){
                addLog('onChange', data);
            },
            onInitRow: function(node, data){
                addLog('onInitRow', data);
            },
            onClick: function(node, data){
                addLog('onClick', data);
            },
            onAppendRow: function(node, data){
                addLog('onAppendRow', data);
            },
            onAppendSchedule: function(node, data){
                addLog('onAppendSchedule', data);
            },
            onScheduleClick: function(node, time, timeline){
                addLog('onScheduleClick', time + ' ' + timeline);
            }
        });
    });
</script>

Possibilités

Paramètres

Clé	Valeur	Description
Nom de classe	jq-horaire	ajouter une classe elemnt (jq.schedule par défaut)
heure de début	07h00	heure de début du programme (HH : ii)
heure de fin	21h00	heure de fin du planning (HH:ii)
largeurTemps	600	exemple d'horodatage de cellule 10 minutes
ChronologieY	60	hauteur (px)
barre de défilement verticale	20	barre de défilement (px)
timeLineBorder	2	bordure (haut et bas)
bundleMoveWidth	6	largeur pour déplacer tous les plannings à droite de la cellule de la ligne temporelle cliquée
lignes	{objet}	données de planification
déplaçable	{booléen}	activer le déplaçable (true par défaut)
redimensionnable	{booléen}	activer le redimensionnement (true par défaut)
redimensionnableGauche	{booléen}	activer la poignée gauche redimensionnable (false par défaut)

Données de planification

Clé	Taper	Description
titre	chaîne	Titre de la ligne de planification
sous-titre	chaîne	Description de la ligne de planification
calendrier	objet[]	planifier une ligne de tableau

Planifier les données dans l'objet

Clé	Taper	Description
commencer	chaîne	HH :ii
fin	chaîne	HH :ii
texte	chaîne	Titre de la barre
données	objet	lier des données

Méthodes de rappel

onChange (nœud : élément, données : objet)

en cas de changement, rappel de la barre d'horaire

onInitRow (nœud : élément, données : objet)

initialiser les données

onClick (nœud : élément, données : objet)

lors du rappel de la barre de clic

onAppendRow (nœud : élément, données : objet)

lors de l'ajout d'un rappel de ligne de planification

onSppendSchedule (nœud : élément, données : objet)

lors de l'ajout d'un rappel dans la barre de planification

onScheduleClick (nœud : élément, heure : chaîne, données : objet)

au clic, planifier le rappel de la ligne

Méthodes

obtenir des données de ligne

 var data = $("#schedule").timeSchedule('timelineData');

obtenir des données de planification

 var data = $("#schedule").timeSchedule('scheduleData');

effacer toutes les données

 $("#schedule").timeSchedule('resetData');

effacer toutes les données et toutes les lignes

 $("#schedule").timeSchedule('resetRowData');

ajouter une ligne

 $("#schedule").timeSchedule('addRow', timeline, {
    title : 'Title Area',
    schedule:[
        {
            start:'09:00',
            end:'12:00',
            text:'Text Area',
            data:{
            }
        }
    ]
});

ajouter des données

 $("#schedule").timeSchedule('addSchedule', timeline, {
    start: start,
    end: end,
    text:'Insert Schedule',
    data:{}
});

réglage du commutateur

 $("#schedule").timeSchedule('setDraggable', true or false);

 $("#schedule").timeSchedule('setResizable', true or false);

Pour le développement

exécuter la synchronisation du navigateur du serveur

 npm run serve