Yii Framework Forum

full calendar


(Kt23lc91) #1

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 ?


(Newerton Araujo) #2

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


(Kt23lc91) #3

Obrigado vou ver se consigo fazer, qualquer coisa peço sua ajuda novamente :D