jquery.schedule

jq.Programación

calendario de programación jquery y html

• Soporte para arrastrar y soltar
• Cambiar el tamaño del programa
• Ajax Obtener datos

instalar

paquete

 npm i jq.schedule --save

Manifestación

Pruebe la demostración

como usar

agregar cabeza css

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

insertar el cuerpo

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

Opciones

Parámetros

Llave	Valor	Descripción
nombre de clase	calendario jq	agregar clase de elemento (jq.schedule predeterminado)
hora de inicio	07:00	hora de inicio del programa (HH:ii)
hora de finalización	21:00	hora de finalización del programa (HH:ii)
anchoTiempo	600	ejemplo de marca de tiempo de celda 10 minutos
línea de tiempoY	60	altura(px)
barra de desplazamiento vertical	20	barra de desplazamiento (px)
tiempoLíneaBorde	2	borde (superior e inferior)
paqueteMoveWidth	6	ancho para mover todos los horarios a la derecha de la celda de la línea de tiempo en la que se hizo clic
filas	{objeto}	programar datos
arrastrable	{booleano}	habilitar arrastrable (por defecto verdadero)
redimensionable	{booleano}	habilitar redimensionable (por defecto verdadero)
redimensionableIzquierda	{booleano}	habilitar el tamaño del controlador izquierdo (falso predeterminado)

Programar datos

Llave	Tipo	Descripción
título	cadena	Título de la fila del programa
subtitular	cadena	Descripción de la fila del programa
cronograma	objeto[]	programar fila de matriz

Programar datos en objeto

Llave	Tipo	Descripción
comenzar	cadena	HH:ii
fin	cadena	HH:ii
texto	cadena	Título de la barra
datos	objeto	enlazar datos

Métodos de devolución de llamada

onChange (nodo: Elemento, datos: Objeto)

en cambio de devolución de llamada de la barra de programación

onInitRow (nodo: Elemento, datos: Objeto)

inicializar datos

onClick (nodo: Elemento, datos: Objeto)

al hacer clic en la devolución de llamada de la barra

onAppendRow(nodo: Elemento, datos: Objeto)

al agregar devolución de llamada de fila programada

onSppendSchedule(nodo: Elemento, datos: Objeto)

al agregar devolución de llamada a la barra de programación

onScheduleClick (nodo: Elemento, tiempo: cadena, datos: Objeto)

al hacer clic en programar devolución de llamada de fila

Métodos

obtener datos de fila

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

obtener datos de programación

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

borrar todos los datos

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

borrar todos los datos y fila

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

agregar fila

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

agregar datos

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

ajuste del interruptor

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

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

Para el desarrollo

ejecutar la sincronización del navegador del servidor

 npm run serve