Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: [FIXED] add fullcalendar in my component

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

  • Nicolas
  • Nicolas's Avatar
  • Offline
  • Senior Member
  • Posts: 72
  • Thank you received: 11
  • Karma: 5
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
  • admin's Avatar
  • Offline
  • Administrator
  • Chef
  • Posts: 3702
  • Thank you received: 975
  • Karma: 141
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
  • Nicolas's Avatar
  • Offline
  • Senior Member
  • Posts: 72
  • Thank you received: 11
  • Karma: 5
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
  • admin's Avatar
  • Offline
  • Administrator
  • Chef
  • Posts: 3702
  • Thank you received: 975
  • Karma: 141
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
  • Romkabouter's Avatar
  • Offline
  • Elite Member
  • Posts: 290
  • Thank you received: 125
  • 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
  • Nicolas's Avatar
  • Offline
  • Senior Member
  • Posts: 72
  • Thank you received: 11
  • Karma: 5
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
  • Nicolas's Avatar
  • Offline
  • Senior Member
  • Posts: 72
  • Thank you received: 11
  • Karma: 5
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
  • Romkabouter's Avatar
  • Offline
  • Elite Member
  • Posts: 290
  • Thank you received: 125
  • 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
  • Nicolas's Avatar
  • Offline
  • Senior Member
  • Posts: 72
  • Thank you received: 11
  • Karma: 5
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
  • Romkabouter's Avatar
  • Offline
  • Elite Member
  • Posts: 290
  • Thank you received: 125
  • 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
  • Nicolas's Avatar
  • Offline
  • Senior Member
  • Posts: 72
  • Thank you received: 11
  • Karma: 5
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
  • Romkabouter's Avatar
  • Offline
  • Elite Member
  • Posts: 290
  • Thank you received: 125
  • 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
  • admin's Avatar
  • Offline
  • Administrator
  • Chef
  • Posts: 3702
  • Thank you received: 975
  • Karma: 141
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
  • Nicolas's Avatar
  • Offline
  • Senior Member
  • Posts: 72
  • Thank you received: 11
  • Karma: 5
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
  • Romkabouter's Avatar
  • Offline
  • Elite Member
  • Posts: 290
  • Thank you received: 125
  • 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.
  • Page:
  • 1
  • 2
Time to create page: 0.121 seconds

Get Started