Full Calendar com opção de LISTA (agenda)

Full Calendar com opção de LISTA (agenda) Caros, Atualmente esta ferramenta maravilhosa que é o Adianti nos proporciona diversas atividades no campo da Web. Um recurso muito legal do Adianti é o Full Calendar. Porém um dos meus clientes sentiu a necessidade de ver mais organizada a lista de agendamento dele: com isso fui verificar os tipos de Views que o Adianti nos liberou e são estas: Mês, Semana, e Dia. Porém em todas ela...

IM

Full Calendar com opção de LISTA (agenda)

Ico Menezes 09/08/2019 (há 4 anos)

Caros,

Atualmente esta ferramenta maravilhosa que é o Adianti nos proporciona diversas atividades no campo da Web.
Um recurso muito legal do Adianti é o Full Calendar.
Porém um dos meus clientes sentiu a necessidade de ver mais organizada a lista de agendamento dele: com isso fui verificar os tipos de Views que o Adianti nos liberou e são estas:
Mês, Semana, e Dia.
Porém em todas elas se houver muito registros, a visão fica um pouco gastante!
Com isso, existe um recurso interessante do componente Calendar que é a LISTA, uma especie de listagem de tudo que foi agendando .. facilitando a visualização.
Fui até a documentação oficial do Full Calendar : https://fullcalendar.io
E numa leitura breve, pude adicionar ao Adianti este tipo de visualização;
Porém tive de mudar algumas coisas no fonte do Adianti e sobre isto que peço a colaboração dos desenvolvedores deste framework, para que isso possa ser disponibilizado nas próximas versões:

ALTERAÇÕES : components.min.js
>>> right:"month,agendaWeek,agendaDay,listWeek"} <<<< acrescentei listWeek para que o button apareça no DOM;

>>> tive que desabilitar popover e colocar um title qualquer para funcionar <<<<< não sei como resolver isso.

Vou colocar duas imagens para visualização do feito final.
Grato

Curso completo Meu Negócio Pronto

Use para si, ou transforme em um negócio: Inclui aulas e códigos-fontes
Gestor de conteúdo (SITE) + Loja Virtual (E-Commerce) + Emissor de Notas para infoprodutos

Meu negócio pronto Quero me inscrever agora!

Comentários (20)

ER

EquipSystem Carlos Roberto 09/08/2019 (há 4 anos)

Muito Bom Menezes, parabéns!

Super interessante isso, uma outra coisa que meus clientes reclamam muito é sobre as horas, que apresenta somente em hora em hora, tem cliente que queria que mostrasse de 50, 45 minutos, então seria muito bom também se agente pudesse programar a apresentação do horário no calendário!

ER

EquipSystem Carlos Roberto 09/08/2019 (há 4 anos)

Muito Bom Menezes, parabéns!

Super interessante isso, uma outra coisa que meus clientes reclamam muito é sobre as horas, que apresenta somente em hora em hora, tem cliente que queria que mostrasse de 50, 45 minutos, então seria muito bom também se agente pudesse programar a apresentação do horário no calendário!

IM

Ico Menezes - AUTOR DO POST 09/08/2019 (há 4 anos)

Eu implementei uma tabela que da opção de escolher quanto minutos o cliente quer ! Atualmente eles usam de 15 minutos ! Entoa o agendamento ficou a cada 15 minutos

ER

EquipSystem Carlos Roberto 09/08/2019 (há 4 anos)

Foi ai que me chamou a atenção,

Pois foi isso que vi, estou sendo pressionado e sem saber como resolver, o pessoal do adianti até falou em um post meu que iria incluir esse recurso no Adianti Builder em versões futuras, mas até hoje nada, uma solução que fiz foi criar uma tabela de horarios para um funcionário, que quando por exemplo clicar em 8:00 no calendário, o sistema faz um leitura na tabela do funcionário para pegar o horário mais próximo e jogar no formulário de edição, mas isso não fica elegante e também visualmente para identificar seria melhor mostrando dinamicamente direto no calendário!

Se puder compartilhar essa mudança de horários, agradecemos muito meu irmão!

FT

Felipe Teixeira 26/09/2019 (há 4 anos)

Nossa que legal que ficou! com ctz deveria ser adicionado às próximas versões. Obg por compartilhar!

CJ

Carlos Alberto Junior 13/03/2020 (há 4 anos)

Bom dia,

Como desabilitar o popover nesse caso?

IM

Ico Menezes - AUTOR DO POST 17/03/2020 (há 4 anos)

Não entendi a pergunta

IM

Ico Menezes - AUTOR DO POST 17/03/2020 (há 4 anos)

Não entendi a pergunta

BA

Bruno Augusto 31/03/2020 (há 4 anos)

Olá!!
Conseguiu resolver a questão do Popover?
Habilitei o listweek como você e estou com o mesmo problema, que quando não faço a alteração, ao carregar a list ele traz toda sintaxe html...

Estou quebrando a cabeça tentando achar uma solução, para que em uma visualização fique a popover, mas na lista traga uma informação diferente.

BA

Bruno Augusto 01/04/2020 (há 4 anos)

Consegui resolver o meu problema, não sei se mais alguém vai ter ele... mas era o seguinte:

Quando habilitei a ListWeek, o popover funcionava na tela Dia/Semana/Mês, porém quando eu entrava na list, aparecia o texto com as tags html, porque estavam usando html escape.
Eu procurei de onde vinha o parâmetro que importava aquela linha, e encontrei ele no arquivo independent-plugins.min.js (A partir da linha 506, coluna 74), alterei a seguinte sintaxe:

<td class="fc-list-item-title '+view.widgetContentClass+'">'+"<a"+seg.event.title+"</a>"+"</td> <<<<<<<<<<<< Deixei ela assim

a partir daí passou a funcionar corretamente, apresentando os dados como eu queria que eles fossem apresentados.
Desculpe se alguém achar isso inutil ou muito simples, mas me tomou dois dias por eu não estar familiarizado ao framework, e ter começado a aprender desenvolvimento web há pouco tempo...

IM

Ico Menezes - AUTOR DO POST 01/04/2020 (há 4 anos)

Top !
Depois posto outra modificação que fiz

CR

Carlos Alberto Perez Rabelo 15/07/2020 (há 3 anos)

Pessoal, bom dia.

Queria definir o calendário de 4 slots de 15 minutos.

Verifiquei nas opções do fullcalendar e existe a opção, mas não encontrei no framework.

Para dividir o período de uma hora em 4 slots de 15 minutos, utilize a propriedade slotDuration.

Exemplo: slotDuration: '00:15:00',

ER

EquipSystem Carlos Roberto 15/07/2020 (há 3 anos)

Olá Ico Menezes e Carlos Alberto, Alguma Novidade sobre mudar os horários do calendário!?

IM

Ico Menezes - AUTOR DO POST 15/07/2020 (há 3 anos)

Vou verificar isso amanhã !

IM

Ico Menezes - AUTOR DO POST 16/07/2020 (há 3 anos)

Segue foto com slots de 15 minutos ...

IM

Ico Menezes - AUTOR DO POST 16/07/2020 (há 3 anos)

https://ibb.co/X70sDxT

CR

Carlos Alberto Perez Rabelo 17/07/2020 (há 3 anos)

Ico Menezes, boa tarde.

Como você configurou slot de 15 minutos?

Estou precisando muito desta configuração para ajustar no meu projeto.

Att.

IM

Ico Menezes - AUTOR DO POST 20/07/2020 (há 3 anos)

entra no grupo do zap ...
https://chat.whatsapp.com/2xVOhQC0GebCJKBGw4qi3z

RI

Rogerio Ingoh 24/04/2021 (há 3 anos)

Existe opção para imprimir no fullcalendar a lista de agendamento?

RI

Rogerio Ingoh 24/04/2021 (há 3 anos)

Problema (2) Usando o Fullcalendar, estou chamando a classe abaixo (form cortina) para cadastrar o agendamento.
Acrescentei campos a mais, tb_medicos_id, tb_convenios_id, tb_procedimentos_id.
Esta gravando certo no DB os código selecionados, mas depois que salvo

Não fica no formulário os valores que busquei nas tabelas primárias; (nome do médico, nome do convenio, e procedimento).

Ao tentar editar também não mostra os valores dos campos relacionados...

Segue Código abaixo, quem puder ajudar... pois já consultei o fórum, livro e exemplos do Tutor e não consegui identificar onde estou falhando.

<?php
/**
* calendarEventForm
*/
class CalendarEventFormAM extends TPage
{
protected $form_cad;
protected $loaded;
public function __construct()
{
parent::__construct();
parent::setTargetContainer('adianti_right_panel');
//parent::setSize(640, null);
//parent::setTitle('Procedimentos Agendados');
//parent::removePadding();
//parent::setProperty('class', 'window_modal');
// creates the form
$this->form_cad = new BootstrapFormBuilder('form_event');
$this->form_cad->setFormTitle('Agendamento');
$this->form_cad->setProperty('style', 'margin-bottom:0;box-shadow:none;');
$this->form_cad->setClientValidation(true);
$hours = array();
$minutes = array();
for ($n=0; $n<24; $n++) {
$hours[$n] = str_pad($n, 2, '0', STR_PAD_LEFT);
}
for ($n=0; $n<=55; $n+=5) {
$minutes[$n] = str_pad($n, 2, '0', STR_PAD_LEFT);
}
// create the form fields
$view = new THidden('view');
$id = new TEntry('id');
$color = new TColor('color');
$start_date = new TDate('start_date');
$start_hour = new TCombo('start_hour');
$start_minute = new TCombo('start_minute');
$end_date = new TDate('end_date');
$end_hour = new TCombo('end_hour');
$end_minute = new TCombo('end_minute');
$title = new TEntry('title');
$tb_medicos_id = new TDBCombo('tb_medicos_id', 'cedipi', 'TbMedicos', 'id', 'nome');
//$tb_medicos_id = new TDBUniqueSearch('tb_medicos_id', 'cedipi', 'TbMedicos', 'id', 'nome');
//$tb_medicos_id->setMask('({id}) <b>{nome}</b>');
$tb_procedimentos_id = new TDBCombo('tb_procedimentos_id', 'cedipi', 'TbProcedimento', 'id', 'descricao');
$tb_convenios_id = new TDBCombo('tb_convenios_id', 'cedipi', 'TbConvenio', 'id', 'descricao');
$description = new TText('description');
$color->setValue('#3a87ad');
// define the sizes
$id->setSize(40);
$color->setSize(100);
$start_date->setSize(120);
$end_date->setSize(120);
$start_hour->setSize(70);
$end_hour->setSize(70);
$start_minute->setSize(70);
$end_minute->setSize(70);
$title->setSize(400);
$tb_medicos_id->setSize('100%');
$tb_procedimentos_id->setSize('100%');
$tb_convenios_id->setSize('100%');
$description->setSize(400, 50);
// custom
$id->setEditable(FALSE);
$start_date->setMask('dd/mm/yyyy');
$start_date->setDatabaseMask('yyyy-mm-dd');
$end_date->setMask('dd/mm/yyyy');
$end_date->setDatabaseMask('yyyy-mm-dd');
$title->addValidation('Titulo', new TRequiredValidator );
$start_hour->addItems($hours);
$start_minute->addItems($minutes);
$end_hour->addItems($hours);
$end_minute->addItems($minutes);
$start_hour->setChangeAction(new TAction(array($this, 'onChangeStartHour')));
$end_hour->setChangeAction(new TAction(array($this, 'onChangeEndHour')));
$start_date->setExitAction(new TAction(array($this, 'onChangeStartDate')));
$end_date->setExitAction(new TAction(array($this, 'onChangeEndDate')));
$tb_medicos_id->addValidation('medicos_id', new TRequiredValidator);
$tb_procedimentos_id->addValidation('procedimentos_id', new TRequiredValidator);
$tb_convenios_id->addValidation('convenios_id', new TRequiredValidator);
// add one row for each form field
$this->form_cad->addFields( [$view] );
$this->form_cad->addFields( [new TLabel('ID:')], [$id] );
$this->form_cad->addFields( [new TLabel('Cor')], [$color] );
$this->form_cad->addFields( [new TLabel('Hr início')], [$start_date, $start_hour, ':', $start_minute] );
$this->form_cad->addFields( [new TLabel('Hr término')], [$end_date, $end_hour, ':', $end_minute] );
$this->form_cad->addFields( [new TLabel('Título')], [$title] );
$this->form_cad->addFields( [new TLabel('Médico')], [$tb_medicos_id]);
$this->form_cad->addFields( [new TLabel('Procedimento')], [$tb_procedimentos_id]);
$this->form_cad->addFields( [new TLabel('Convênio')], [$tb_convenios_id]);
$this->form_cad->addFields( [new TLabel('Descrição')], [$description] );
//botoes
$this->form_cad->addAction( _t('Save'), new TAction(array($this, 'onSave')), 'fa:save green');
$this->form_cad->addAction( _t('Clear'), new TAction(array($this, 'onEdit')), 'fa:eraser orange');
$this->form_cad->addAction( _t('Delete'), new TAction(array($this, 'onDelete')), 'fa:trash-o red');
$this->form_cad->addHeaderActionLink( _t('Close'), new TAction(array($this, 'onClose')), 'fa:times red');
parent::add($this->form_cad);
}
public static function onClose($param)
{
TScript::create("Template.closeRightPanel()");
}
/**
* Executed when user leaves start hour field
*/
public static function onChangeStartHour($param=NULL)
{
$obj = new stdClass;
if (empty($param['start_minute']))
{
$obj->start_minute = '0';
TForm::sendData('form_event', $obj);
}
if (empty($param['end_hour']) AND empty($param['end_minute']))
{
$obj->end_hour = $param['start_hour'] +1;
$obj->end_minute = '0';
TForm::sendData('form_event', $obj);
}
}
/**
* Executed when user leaves end hour field
*/
public static function onChangeEndHour($param=NULL)
{
if (empty($param['end_minute']))
{
$obj = new stdClass;
$obj->end_minute = '0';
TForm::sendData('form_event', $obj);
}
}
/**
* Executed when user leaves start date field
*/
public static function onChangeStartDate($param=NULL)
{
if (empty($param['end_date']) AND !empty($param['start_date']))
{
$obj = new stdClass;
$obj->end_date = $param['start_date'];
TForm::sendData('form_event', $obj);
}
}
/**
* Executed when user leaves end date field
*/
public static function onChangeEndDate($param=NULL)
{
if (empty($param['end_hour']) AND empty($param['end_minute']) AND !empty($param['start_hour']))
{
$obj = new stdClass;
$obj->end_hour = min($param['start_hour'],22) +1;
$obj->end_minute = '0';
TForm::sendData('form_event', $obj);
}
}
/**
* method onSave()
* Executed whenever the user clicks at the save button
*/
public function onSave()
{
try
{
TTransaction::open('cedipi');
$this->form_cad->validate();
$data = $this->form_cad->getData();
$object = new TbMedAgenda;
$object->color = $data->color;
$object->id = $data->id;
$object->title = $data->title;
$object->description = $data->description;
$object->start_time = $data->start_date . ' ' . str_pad($data->start_hour, 2, '0', STR_PAD_LEFT) . ':' . str_pad($data->start_minute, 2, '0', STR_PAD_LEFT) . ':00';
$object->end_time = $data->end_date . ' ' . str_pad($data->end_hour, 2, '0', STR_PAD_LEFT) . ':' . str_pad($data->end_minute, 2, '0', STR_PAD_LEFT) . ':00';
$object->user_id = TSession::getValue('userid');
$object->profile_id = TSession::getValue('profileid');
$object->tb_medicos_id = $data->tb_medicos_id;
$object->tb_procedimentos_id = $data->tb_procedimentos_id;
$object->tb_convenios_id = $data->tb_convenios_id;
$object->store();
$data->id = $object->id;
$this->form_cad->setData($data);
TTransaction::close();
$posAction = new TAction(array('FullCalendarAgMed', 'onReload'));
$posAction->setParameter('view', $data->view);
$posAction->setParameter('date', $data->start_date);
// shows the success message
new TMessage('info', TAdiantiCoreTranslator::translate('Record saved'), $posAction);
//TScript::create("Template.closeRightPanel()");
}
catch (Exception $e)
{
new TMessage('error', $e->getMessage());
$this->form_cad->setData( $this->form_cad->getData() );
TTransaction::rollback();
}
}
/**
* method onEdit()
* Executed whenever the user clicks at the edit button da datagrid
*/
public function onEdit($param)
{
try
{
if (isset($param['key']))
{
// get the parameter $key
$key=$param['key'];
// open a transaction with database _DATABASE_
TTransaction::open('cedipi');
// instantiates object TbMedAgenda
$object = new TbMedAgenda($key);
$data = new stdClass;
$data->id = $object->id;
$data->color = $object->color;
$data->title = $object->title;
$data->description = $object->description;
$data->start_date = substr($object->start_time,0,10);
$data->start_hour = substr($object->start_time,11,2);
$data->start_minute = substr($object->start_time,14,2);
$data->end_date = substr($object->end_time,0,10);
$data->end_hour = substr($object->end_time,11,2);
$data->end_minute = substr($object->end_time,14,2);
$data->view = $param['view'];
// fill the form with the active record data
$this->form_cad->setData($data);
// close the transaction
TTransaction::close();
}
else
{
$this->form_cad->clear();
}
}
catch (Exception $e) // in case of exception
{
// shows the exception error message
new TMessage('error', $e->getMessage());
// undo all pending operations
TTransaction::rollback();
}
}
/**
* Delete event
*/
public static function onDelete($param)
{
// define the delete action
$action = new TAction(array('CalendarEventFormAM', 'Delete'));
$action->setParameters($param); // pass the key parameter ahead
TSession::setValue('dt_posicionada', $param['start_date']);
// shows a dialog to the user
new TQuestion(AdiantiCoreTranslator::translate('Do you really want to delete ?'), $action);
}
/**
* Delete a record
*/
public static function Delete($param)
{
try
{
// get the parameter $key
$key = $param['id'];
// open a transaction with database
TTransaction::open('cedipi');
// instantiates object
$object = new TbMedAgenda($key, FALSE);
// deletes the object from the database
$object->delete();
// close the transaction
TTransaction::close();
$posAction = new TAction(['FullCalendarAgMed', 'onReload']);
$posAction->setParameter('view', $param['view']);
//$posAction->setParameter('date', substr($param['start_date'],0,10));
$posAction->setParameter('date', $param['start_date']);
// shows the success message
new TMessage('info', AdiantiCoreTranslator::translate('Record deleted'), $posAction);
}
catch (Exception $e) // in case of exception
{
// shows the exception error message
new TMessage('error', $e->getMessage());
// undo all pending operations
TTransaction::rollback();
}
}
/**
* Fill form from the user selected time
*/
public function onStartEdit($param)
{
$this->form_cad->clear();
$data = new stdClass;
$data->view = $param['view']; // calendar view
$data->color = '#3a87ad';
if ($param['date'])
{
if (strlen($param['date']) == 10)
{
$data->start_date = $param['date'];
$data->end_date = $param['date'];
}
if (strlen($param['date']) == 19)
{
$data->start_date = substr($param['date'],0,10);
$data->start_hour = substr($param['date'],11,2);
$data->start_minute = substr($param['date'],14,2);
$data->end_date = substr($param['date'],0,10);
$data->end_hour = substr($param['date'],11,2); //+ 1 padrao
$data->end_minute = substr($param['date'],14,2);
}
$this->form_cad->setData( $data );
}
}
/**
* Update event. Result of the drag and drop or resize.
*/
public static function onUpdateEvent($param)
{
try
{
if (isset($param['id']))
{
$key=$param['id'];
TTransaction::open('cedipi');
$object = new TbMedAgenda($key);
$object->start_time = str_replace('T', ' ', $param['start_time']);
$object->end_time = str_replace('T', ' ', $param['end_time']);
$object->store();
TTransaction::close();
}
}
catch (Exception $e)
{
new TMessage('error', $e->getMessage());
TTransaction::rollback();
}
}
}

Novo Comentário