Como faço para quando cadastrar um evento no full calendar ao clicar sobre o evento criado ele abra um modal com as informações que cadastrei e que eu possa editar ?
Como faço para quando cadastrar um evento no full calendar ao clicar sobre o evento criado ele abra um modal com as informações que cadastrei e que eu possa editar ?
Olá ton,
Vou postar abaixo um modelo de como fazer.
Primeiro você precisa criar o banco de dados.
CREATE TABLE `event` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
`id_user` int(11) NOT NULL COMMENT 'User',
`title` varchar(180) NOT NULL COMMENT 'Title',
`text` text COMMENT 'Text',
`start` datetime NOT NULL COMMENT 'Start Date',
`end` datetime NOT NULL COMMENT 'End Date',
`all_day` enum('0','1') NOT NULL DEFAULT '1' COMMENT 'All day',
`color_background` varchar(7) NOT NULL COMMENT 'Background color',
`color_text` varchar(7) NOT NULL COMMENT 'Text color',
`status` enum('0','1') NOT NULL DEFAULT '1' COMMENT 'Status',
PRIMARY KEY (`id`),
KEY `FK_id_user` (`id_user`),
CONSTRAINT `FK_id_user` FOREIGN KEY (`id_user`) REFERENCES `user` (`id`)
) ENGINE=InnoDB;
O ‘id_user’, é um relacionamento com qualquer tabela de usuário que deseja registrar.
Use o Gii, para criar o Model e CRUD.
Antes de alterar o FullCalendar JS, você precisa criar a Action, que vai abrir no Modal.
class EventController extends Controller
{
public function actionCreateAjax()
{
$model = new Event;
$model->loadDefaultValues();
$model->id_user = Yii::$app->user->getId();
if (Yii::$app->request->isAjax) {
if ($model->load(Yii::$app->request->post()) && $model->save()) {
echo Json::encode([
'status' => 'success',
'content' => 'Adicionado com sucesso'
]);
Yii::$app->end();
}
echo Json::encode([
'status' => 'fail',
'content' => $this->renderAjax('_form_lite', [
'model' => $model
]),
]);
Yii::$app->end();
}
}
public function actionUpdateAjax($id)
{
$model = $this->findModel($id);
if ($model->load(Yii::$app->request->post()) && $model->save()) {
if (Yii::$app->request->get('ajax')) {
echo Json::encode([
'status' => 'success',
'content' => 'Adicionado com sucesso',
]);
Yii::$app->end();
} else {
return json_encode($json);
}
} else {
echo Json::encode([
'status' => 'fail',
'content' => $this->renderAjax('_form_lite', [
'model' => $model
]),
]);
Yii::$app->end();
}
}
public function actionListEvents($start, $end)
{
$events = Event::find()
->andWhere('id_user = :id_user AND DATE(start) >= :start AND DATE(end) <= :end', [
':id_user' => Yii::$app->user->getId(),
':start' => $start,
':end' => $end
])
->all();
$row = [];
foreach ($events as $event) {
$row['id'] = $event->primaryKey;
$row['title'] = $event->title;
$row['text'] = $event->text;
$row['start'] = date("Y-d-mTG:i:sz", strtotime($event->start));
if ($event->start < $event->end) {
$row['end'] = date("Y-d-mTG:i:sz", strtotime($event->end));
}
$row['allDay'] = (bool) $event->all_day;
$row['color'] = $event->color_background;
$row['textColor'] = $event->color_text;
$data[] = $row;
}
echo Json::encode($data);
}
protected function findModel($id)
{
if (($model = Event::findOne($id)) !== null) {
return $model;
} else {
throw new NotFoundHttpException('The requested page does not exist.');
}
}
}
E por final o código js, que vai abrir um modal, no momento que você clicar na tag de horas.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: true,
eventLimit: true,
events: {
url: '<?= Url::to('event/list-events'); ?>',
},
eventRender: function (event, element) {
if(event.end == null){
var tooltip = '<b>'+event.title+'</b><br/>De: ' + moment(event.start).format('ll') + '<br /><br />' + event.text;
} else if(event.allDay === true)
var tooltip = '<b>'+event.title+'</b><br/>De: ' + moment(event.start).format('ll') + '<br />Até: ' + moment(event.end).format('ll') + '<br /><br />' + event.text;
else if(event.allDay === true)
var tooltip = '<b>'+event.title+'</b><br/>De: ' + moment(event.start).format('lll') + '<br />Até: ' + moment(event.end).format('lll') + '<br /><br />' + event.text;
$(element).attr('data-original-title', tooltip);
$(element).tooltip({container: 'body',html: true});
},
eventClick: function(event, jsEvent, view) {
$('#modal').modal('show');
$('#modal .modal-title').html('Editar Agenda');
eventDialog('<?= Url::to('event/update-ajax'); ?>?id=' + event.id +'&ajax=event');
}
});
Este eventDialog(), é a função em JS que você vai usar para abrir o Modal.
Coloca ele no topo do site.
function eventDialog(url,act){
var action = '';
var form = $('#modal .modal-body form');
if(url == false){
action = '&action=' + act;
url = form.attr('action');
}
jQuery.ajax({
type:'POST',
url: url,
data: form.serialize() + action,
cache: false,
dataType: 'json',
success:function(data){
if(data.status == 'fail'){
$('#modal .modal-body').html(data.content);
$('#modal .modal-footer #save').off().on('click', function(event){
event.preventDefault();
eventDialog(false,$(this).attr('name'));
});
} else {
$('#modal .modal-body').html(data.content);
if(data.status == 'success'){
$('#calendar').fullCalendar('refetchEvents');
$('#modal').modal('hide');
$('#modal .modal-body').html('<div class=\"progress progress-striped active m-n text-center\"><div class=\"progress-bar progress-bar-success\" style=\"width:100%;\"></div></div>');
}
}
}
});
}
Se precisar de um botão para adicionar, pode usar este código.
$('#btn-add-event').on('click', function(event){
$('#modal').modal('show');
$('#modal .modal-title').html('Adicionar na Agenda');
eventDialog('<?= Url::to(['event/create-ajax']); ?>');
return false;
});
O código HTML é com você agora, você só precisa da <div> com o id="calendar", e um botão com id="btn-add-event".
E também vai precisar o código HTML do Modal (https://getbootstrap.com/docs/3.3/javascript/#modals-examples).
Obrigado vou ver se consigo fazer, qualquer coisa peço sua ajuda novamente 