jquery.schedule

jq.Schedule

calendário de agendamento jquery e html

• Suporte para arrastar e soltar
• Redimensionar cronograma
• Ajax obtém dados

instalar

pacote

 npm i jq.schedule --save

Demonstração

Experimente a demonstração

Como usar

anexar cabeçalho css

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

inserir corpo

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

Opções

Parâmetros

Chave	Valor	Descrição
nomedaclasse	agendamento jq	adicionar classe elemento (padrão jq.schedule)
hora de início	07:00	agendar horário de início (HH:ii)
hora final	21:00	agendar horário de término (HH:ii)
larguraTempo	600	exemplo de carimbo de data/hora da célula 10 minutos
linha do tempoY	60	altura (px)
barra de rolagem vertical	20	barra de rolagem (px)
timeLineBorder	2	borda (superior e inferior)
pacoteMoveWidth	6	largura para mover todas as programações para a direita da célula da linha do tempo clicada
linhas	{objeto}	dados de agendamento
arrastável	{booleano}	ativar arrastável (padrão verdadeiro)
redimensionável	{booleano}	ativar redimensionável (padrão verdadeiro)
redimensionável à esquerda	{booleano}	habilitar alça esquerda redimensionável (padrão falso)

Agendar dados

Chave	Tipo	Descrição
título	corda	Título da linha da programação
legenda	corda	Descrição da linha do cronograma
agendar	objeto[]	agendar linha da matriz

Agendar dados no objeto

Chave	Tipo	Descrição
começar	corda	HH:ii
fim	corda	HH:ii
texto	corda	Título da barra
dados	objeto	vincular dados

Métodos de retorno de chamada

onChange(nó: Elemento, dados: Objeto)

no retorno de chamada da barra de agendamento de alteração

onInitRow(nó: Elemento, dados: Objeto)

inicializar dados

onClick(nó: Elemento, dados: Objeto)

no retorno de chamada da barra de cliques

onAppendRow(nó: Elemento, dados: Objeto)

ao adicionar retorno de chamada de linha de agendamento

onSppendSchedule(nó: Elemento, dados: Objeto)

ao adicionar retorno de chamada da barra de agendamento

onScheduleClick(nó: Elemento, hora: string, dados: Objeto)

ao clicar, agendar retorno de chamada de linha

Métodos

obter dados de linha

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

obter dados de agendamento

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

limpar todos os dados

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

limpar todos os dados e linhas

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

adicionar linha

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

adicionar dados

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

configuração do interruptor

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

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

Para Desenvolvimento

execute a sincronização do navegador do servidor

 npm run serve