Welcome, Guest

TOPIC: [FIXED] add fullcalendar in my component

[FIXED] add fullcalendar in my component 03 Oct 2017 11:29 #15335

Nicolas
Offline
Premium Member
Posts: 83
Thank you received: 12
Karma: 6

hello all.
i try to add fullcalendar in my component. Then i try to have a json output to charge my "demandes" table into fullcalendar.
for now i have 3 tables :

typelit : for the building ressources
lits : for the title ressources
demandes : for the events

Can someone hlp me ?

i try to have an output like :

               resources: [
			{ id: '1', building: 'Lit Parapluie', title: 'Lit 1' },
			{ id: '2', building: 'Lit Parapluie', title: 'Lit 2', },
			{ id: '3', building: 'Lit Parapluie', title: 'Lit 3',},
			{ id: '4', building: 'Lit d\'apoint', title: 'Lit 1',},
			{ id: '5', building: 'Lit d\'apoint',  title: 'Lit 2' }
		],
		
		events: [
			{ id: '1', resourceId: '1', start: '2017-09-01', end: '2017-09-02', title: 'event 1' },
			{ id: '2', resourceId: '2', start: '2017-09-02', end: '2017-09-07', title: 'event 2' },
			{ id: '3', resourceId: '3', start: '2017-09-03', end: '2017-09-04', title: 'event 3' },
			{ id: '4', resourceId: '4', start: '2017-09-07', end: '2017-09-07', title: 'event 4' },
			{ id: '5', resourceId: '5', start: '2017-09-07', end: '2017-09-07', title: 'event 5' }
		]

thanks in advance

ps: sorry for my poor english i'm a french guy ^^

Last Edit: 29 Oct 2017 21:38 by Nicolas. Reason: FIXED

The administrator has disabled public write access.

add fullcalendar in my component 03 Oct 2017 12:04 #15336

admin Offline Administrator Chef Posts: 3711 Thank you received: 987 Karma: 140	I don't know full calendar, but if you have your JSON object ready for the JS script, then simply write your JS into a PHP page with someting like : var data = "<?php echo(json_encode($myPhpData)); ?>"; And then pass this 'data' javascript var to your fullcalendar API Hope it helps
	Coding is now a piece of cake The administrator has disabled public write access.

add fullcalendar in my component 03 Oct 2017 21:32 #15337

Nicolas Offline Premium Member Posts: 83 Thank you received: 12 Karma: 6	full calendar is a timeline calendar in jquery. i don"t realy understand how can i select my table to generate json output... var data = "<?php echo(json_encode($myTable)); ?>"; . if it is more easier, it's possible for me to create a php file to make my json output and include this into the fullcalendar
	The administrator has disabled public write access.

add fullcalendar in my component 04 Oct 2017 07:36 #15339

admin
Offline
Administrator
Chef
Posts: 3711
Thank you received: 987
Karma: 140

NO my gosh ! don't write datas in a file. It is a very bad solution. Apart if you want to create a cache file.

Well...
Simply create a PHP object of this structure and pass it to the template file where you have written the code above for converting php object into json javascript string.

Do you have idea on how will you build this php object ?
You may need to play with models (maybe from differrent tables...) All this depends of how and where are your data stored.
I cannot tell you more if I don't see your project database diagram.

Actually, it is quite easy stuff.

Coding is now a piece of cake

The administrator has disabled public write access.

add fullcalendar in my component 04 Oct 2017 07:36 #15340

Romkabouter
Offline
Elite Member
Posts: 310
Thank you received: 131
Karma: 48

Do you already know how to fork you component?
If not, read this: www.j-cook.pro/index.php/f/forks

Basically, there will be a _fork folder in siteroot/components/com_yourcomponent
Create a folder named "fork", under it creates folders views/demandes/tmpl
Assuming you have a collection view for the demandes table, copy default_grid.php from siteroot/components/com_yourcomponent/views/demandes/tmpl into your fork folder.

Now you have forked the default grid of your demandes table and you can start working from there.
J-cook will now use your forked default_grid.php instead of the system version.

In that file, you can use $this->items to create the structure you need. $item->items will hold the rows returned by the database.

The administrator has disabled public write access.

The following user(s) said Thank You: Nicolas

add fullcalendar in my component 04 Oct 2017 20:49 #15344

Nicolas
Offline
Premium Member
Posts: 83
Thank you received: 12
Karma: 6

Romkabouter wrote:

Do you already know how to fork you component?
If not, read this: www.j-cook.pro/index.php/f/forks

Basically, there will be a _fork folder in siteroot/components/com_yourcomponent
Create a folder named "fork", under it creates folders views/demandes/tmpl
Assuming you have a collection view for the demandes table, copy default_grid.php from siteroot/components/com_yourcomponent/views/demandes/tmpl into your fork folder.

Now you have forked the default grid of your demandes table and you can start working from there.
J-cook will now use your forked default_grid.php instead of the system version.

In that file, you can use $this->items to create the structure you need. $item->items will hold the rows returned by the database.

It look like the best idea for me.
I did not know the principle of FORK .. I will read the tutorial and start working on it.
Can I let my topic open a few days time to do it?
then i'll post my work to show it to everyone.

Last Edit: 04 Oct 2017 20:50 by Nicolas.

The administrator has disabled public write access.

add fullcalendar in my component 05 Oct 2017 18:51 #15347

Nicolas
Offline
Premium Member
Posts: 83
Thank you received: 12
Karma: 6

HI everyone !
I have done what you have proposed.
So I added the request file to the fork folder and made the call like this

		<?php
		for ($i=0, $n=count( $this->items ); $i < $n; $i++):
			$row = $this->items[$i];
			echo json_encode($row);
		endfor;
		?>

it gives me this result

{"id":"1","Chambre":"1","_Chambre_numero":"135","end":"2017-09-05","events":null,"nom_client":"Master","resourceId":"1","_resourceId_title":"Lit parapluie 1","start":"2017-09-02","title":"123456","params":{"access-view":true,"access-edit":true,"access-delete":true}}

can you explain to me how to remove everything that is in red please?

The administrator has disabled public write access.

add fullcalendar in my component 05 Oct 2017 20:19 #15348

Romkabouter Offline Elite Member Posts: 310 Thank you received: 131 Karma: 48	You should not have to remove that, is the code giving you an error? Can you post your whole forked file? It is a little hard to see where you have put your for loop
	The administrator has disabled public write access.

add fullcalendar in my component 05 Oct 2017 21:11 #15349

Nicolas
Offline
Premium Member
Posts: 83
Thank you received: 12
Karma: 6

Romkabouter wrote:

You should not have to remove that, is the code giving you an error?
Can you post your whole forked file? It is a little hard to see where you have put your for loop

<?php
/**                               ______________________________________________
*                          o O   |                                              |
*                 (((((  o      <    Generated with Cook Self Service  V3.1.9   |
*                ( o o )         |______________________________________________|
* --------oOOO-----(_)-----OOOo---------------------------------- www.j-cook.pro --- +
* @version		
* @package		Litssupp
* @subpackage	Demandes
* @copyright	
* @author		 -  - 
* @license		
*
*             .oooO  Oooo.
*             (   )  (   )
* -------------\ (----) /----------------------------------------------------------- +
*               \_)  (_/
*/

// no direct access
defined('_JEXEC') or die('Restricted access');


JHtml::addIncludePath(JPATH_ADMIN_LITSUPP.'/helpers/html');
JHtml::_('behavior.tooltip');
//JHtml::_('behavior.multiselect');

$model		= $this->model;
$user		= JFactory::getUser();
$userId		= $user->get('id');
$listOrder	= $this->escape($this->state->get('list.ordering'));
$listDirn	= $this->escape($this->state->get('list.direction'));
$saveOrder	= $listOrder == 'a.ordering' && $listDirn != 'desc';
?>

<div class="clearfix"></div>
<div class="">

					
		<?php
		
		for ($i=0, $n=count( $this->items ); $i < $n; $i++):
			$row = $this->items[$i];
			echo json_encode ($row);

		endfor;
		?>
</div>

I have no error on the page when I put the echo. But the output json is not suitable for the calendar. I should have something like:

[
     { "start":"2017-09-02", "end":"2017-09-05", "title":"123456", "Chambre":"1", "Chambre_numero":"135" , "events":null," nom_client":"Master", "resourceId":"1"},
     { "start":"2017-09-01", "end":"2017-09-08", "title":"654321", "Chambre":"2", "Chambre_numero":"17" , "events":null," nom_client":"nouille", "resourceId":"2"},
]

the error on the calendar is on <<params :{}>> the calendard don't support the Multidimensional Arrays so i need to delete this from my json output (not from the component).

I think my problem is that I don't get the correct variable for the table "demandes"
I also retrieve the display settings of the view

The administrator has disabled public write access.

add fullcalendar in my component 06 Oct 2017 07:37 #15350

Romkabouter
Offline
Elite Member
Posts: 310
Thank you received: 131
Karma: 48

That is not your problem, you don't have to use the json_encode($row)

Try this

<?php
$json = array();
for ($i=0, $n=count( $this->items ); $i < $n; $i++):
	$row = $this->items[$i];
	$obj = new stdClass;
	$obj->id = $row->id;
	$obj->Chambre = $row->Chambre;
	$obj->_Chambre_numero = $row->_Chambre_numero;
	$obj->start = $row->start;
	$obj->end = $row->end;
	$obj->events = $row->events;
	$obj->nom_client = $row->nom_client;
	$obj->resourceId = $row->resourceId;
	$obj->title = $row->title;
	$json[] = $obj;
endfor;
echo "resources: ".json_encode($json);
?>

Also, you paste code is probably not the entire file

The administrator has disabled public write access.

The following user(s) said Thank You: Nicolas

add fullcalendar in my component 10 Oct 2017 03:58 #15355

Nicolas
Offline
Premium Member
Posts: 83
Thank you received: 12
Karma: 6

Hello
I'm sorry for my response time I was not in my office this weekend.
Thank you very much for your code. The output view is as I wished. unfortunately I can not call the view in my calendar.

In fullcalendar I can have a link to the json to feed the calendar

The problem is that joomla only sees restricted access

$urlevents = JHtml::script(Juri::base() . 'components/com_litsupp/fork/views/demandes/tmpl/default.json');
	<script> ...
			resources: { // you can also specify a plain string like 'json/resources.json'
					url: ' <?php echo $urlevents; ?> '
				},
			
			events: { // you can also specify a plain string like 'json/events.json'
					url: ' <?php echo $urlressources; ?> '
				}
...
</script>

in my fork/views/demandes/tmpl/default.php file i have :

<?php
/**                               ______________________________________________
*                          o O   |                                              |
*                 (((((  o      <    Generated with Cook Self Service  V3.1.9   |
*                ( o o )         |______________________________________________|
* --------oOOO-----(_)-----OOOo---------------------------------- www.j-cook.pro --- +
* @version		
* @package		Litssupp
* @subpackage	Demandes
* @copyright	
* @author		 -  - 
* @license		
*
*             .oooO  Oooo.
*             (   )  (   )
* -------------\ (----) /----------------------------------------------------------- +
*               \_)  (_/
*/

// no direct access
defined('_JEXEC') or die('Restricted access');


JHtml::addIncludePath(JPATH_ADMIN_LITSUPP.'/helpers/html');
JHtml::_('behavior.tooltip');
//JHtml::_('behavior.multiselect');

$model		= $this->model;
$user		= JFactory::getUser();
$userId		= $user->get('id');
$listOrder	= $this->escape($this->state->get('list.ordering'));
$listDirn	= $this->escape($this->state->get('list.direction'));
$saveOrder	= $listOrder == 'a.ordering' && $listDirn != 'desc';

$json = array();
for ($i=0, $n=count( $this->items ); $i < $n; $i++):
	$row = $this->items[$i];
	$obj = new stdClass;
	$obj->id = $row->id;
	$obj->start = $row->start;
	$obj->end = $row->end;
	$obj->title = $row->title;
	$obj->nom_client = $row->nom_client;
	$obj->resourceId = $row->resourceId;
	$obj->Chambre = $row->Chambre;
	$obj->Chambre_numero = $row->_Chambre_numero;
	$obj->remarque = $row->remarque;

	$json[] = $obj;
endfor;
JResponse::setHeader('Content-Disposition','attachment;filename="'.$view->getName().'.json"');
echo "resources: ".json_encode($json);
?>

the result of console is :

localhost/:39 GET http://localhost/components/com_litsupp/fork/views/demandes/tmpl/default.json net::ERR_ABORTED

Last Edit: 10 Oct 2017 03:59 by Nicolas.

The administrator has disabled public write access.

add fullcalendar in my component 10 Oct 2017 13:33 #15356

Romkabouter Offline Elite Member Posts: 310 Thank you received: 131 Karma: 48	I don't understand why you can not call the view in the calendar? Are you calling from a different component?
	The administrator has disabled public write access.

add fullcalendar in my component 10 Oct 2017 13:45 #15357

admin
Offline
Administrator
Chef
Posts: 3711
Thank you received: 987
Karma: 140

Ok, I understand...
Your calendar (which I'd like to discover as well), is requesting a file through URL.
Well, it looks a bit like AJAX.

You SHOULD NOT create ANY file on disk.
In JS, just set up an URL such as :

index.php?option=com_mycomponent&view=xxx&layout=xxx&format=json

Try your own URL alone first, to see what happens. When it works, it may display the file or start a download. (depending wich mimes-types are supported by your browser)

Normaly if you define format=json, it will load another view file :

view.json.php

instead of

view.html.php

this URL var "format", is not defining the format alone, it is simply a Joomla convention for separating the JSON outputs from HTML outputs (keep your code organized), then once in this class, you have to prepare the output as you want.

But is works pretty the same, and you are not forced to use format=json convention for your tests.

You must define the file header as you did and the exit at the end. That's correct. Only your URL was wrong.
You have build an "Indirect file access", such as Cook propose you for accessing images with restrictions.
The browser (and your javascript) will interpret as a regular file (depending of the mime header), but you call this virtual file through : index.php

Apart images and assets, you may never call a file directly in its location, (you are revealing the files tree to your users)

Hope it helps.
I didn't verified your code or your file header

Coding is now a piece of cake

Last Edit: 10 Oct 2017 13:55 by admin.

The administrator has disabled public write access.

add fullcalendar in my component 10 Oct 2017 18:53 #15358

Nicolas
Offline
Premium Member
Posts: 83
Thank you received: 12
Karma: 6

Thanks a lot for your help.
So I tried with several link:
I have this one that works and that displays the page when I put it in the JS of the calendar parameters I have no errors:

resources: { // you can also specify a plain string like 'json/resources.json'
					url: 'localhost/index.php?option=com_litsupp&view=lits'
				},
			
			events: { // you can also specify a plain string like 'json/events.json'
					url: 'localhost/index.php?option=com_litsupp&view=demandes'
				}

the link displays the page correctly But it does not show anything in the calendar ...
it should display this page:

<?php
/**                               ______________________________________________
*                          o O   |                                              |
*                 (((((  o      <    Generated with Cook Self Service  V3.1.9   |
*                ( o o )         |______________________________________________|
* --------oOOO-----(_)-----OOOo---------------------------------- www.j-cook.pro --- +
* @version		
* @package		Litssupp
* @subpackage	Demandes
* @copyright	
* @author		 -  - 
* @license		
*
*             .oooO  Oooo.
*             (   )  (   )
* -------------\ (----) /----------------------------------------------------------- +
*               \_)  (_/
*/

// no direct access
defined('_JEXEC') or die('Restricted access');


JHtml::addIncludePath(JPATH_ADMIN_LITSUPP.'/helpers/html');
JHtml::_('behavior.tooltip');
//JHtml::_('behavior.multiselect');

$model		= $this->model;
$user		= JFactory::getUser();
$userId		= $user->get('id');
$listOrder	= $this->escape($this->state->get('list.ordering'));
$listDirn	= $this->escape($this->state->get('list.direction'));
$saveOrder	= $listOrder == 'a.ordering' && $listDirn != 'desc';


$json = array();
for ($i=0, $n=count( $this->items ); $i < $n; $i++):
	$row = $this->items[$i];
	$obj = new stdClass;
	$obj->id = $row->id;
	$obj->start = $row->start;
	$obj->end = $row->end;
	$obj->title = $row->title;
	$obj->nom_client = $row->nom_client;
	$obj->resourceId = $row->resourceId;
	$obj->Chambre = $row->Chambre;
	$obj->Chambre_numero = $row->_Chambre_numero;
	$obj->remarque = $row->remarque;

	$json[] = $obj;
endfor;

echo "resources: ".json_encode($json);
?>

Which give

resources: [{"id":"1","start":"2017-09-01","end":"2017-09-04","title":"123456","nom_client":"Master","resourceId":"1","Chambre":"1","Chambre_numero":"135","remarque":null}]

this is my only record in the table (that normaly)

If you wanna know what is fullcalendar i let you the link here : https://fullcalendar.io/

Last Edit: 10 Oct 2017 18:55 by Nicolas.

The administrator has disabled public write access.

add fullcalendar in my component 10 Oct 2017 19:11 #15359

Romkabouter Offline Elite Member Posts: 310 Thank you received: 131 Karma: 48	Can you tell me why you can not show the fullcalendar in your component? I don't really understand that part. Is it on another website or something? If you want to show a fullcalendar on your site, where the data is filled from the data in your component, then there are MUCH easier ways to achieve that.
	The administrator has disabled public write access.