How to use the Full Calendar Schedule?

[Philip_J]

Hi All,

Firstly, I need to premise this with the fact that this is the first time i’m needing to do anything with JSON files so my lingo is probably wrong.

I am trying to integrate a 3rd party JS library (FullCalendar Scheduler) and it needs vales as a JSON url.

I have a simple server connect query that returns the necessary result but i can’t figure out how to get this into a usable JSON file/url to use with FullCalendar Scheduler.

From reading this form, my understanding is that all the server connect actions output as a JSON in order to send the data back to the server, and looking at the output of my query does in fact look ALMOST like a usable JSON URL. This is what the output in the browser returns:

{“select”:[{“id”:1,“title”:“John Jones”},{“id”:2,“title”:“Peter Green”},{“id”:3,“title”:“Alan Jones”},{“id”:4,“title”:“Mike Tyson”},{“id”:6,“title”:“Alice Struve”}]}

When i use this URL in the JS file though, it doesn’t work. If i use the above values minus the {“select”:} it does work.

Am I missing something obvious here?

Is there an easy way to ‘convert’ this PHP url into a JSON url?

I have tried to play around with the API action in server connect but can’t get it to make sense.

Help please

Cheers,
Phil

[ben]

Have you had a look at

Getting Started with App Connect Event Calendar

App Connect Event Calendar is a full-sized event calendar with drag & drop support and lots of customization options. It allows you to add static events or use different data sources for dynamic events. Getting Started with the Event Calendar We’ll go through the basics of adding the calendar on the page, customizing it and adding static events. Adding App Connect Event Calendar on Your Page Click the add new element button: [Screenshot_1] Open Components and select Calendar: [Screensh…

[Philip_J]

Yes, unfortunately I am needing to use the resource timeline view from FullCalendar which isn’t integrated into Wappler.

So I’m having to do it manually with with JS script and a JSON feed.

[ben]

Not sure if this will help, but the JSON files created by Server Connect are in the folder: dmxconnect/api

[Philip_J]

Appreciate that. I have managed to find the files, and maybe its just my lack of understanding or perhaps the issue is something o do with FullCalendar or how I’ve put the URL in.

From what can see though, because the JSON file has the query name at the start of it, in the below case {“select”: then FullCalendar doesn’t seem to work.

{“select”:[{“id”:1,“title”:“John Jones”},{“id”:2,“title”:“Peter Green”},{“id”:3,“title”:“Alan Jones”},{“id”:4,“title”:“Mike Tyson”},{“id”:6,“title”:“Alice Struve”}]}

If i put that exact string of data in as an minus the query name, then it works fine.

[{“id”:1,“title”:“John Jones”},{“id”:2,“title”:“Peter Green”},{“id”:3,“title”:“Alan Jones”},{“id”:4,“title”:“Mike Tyson”},{“id”:6,“title”:“Alice Struve”}]

[JonL]

You need to parse the result and access the value of the pair.

So if result contains {“select”:[{“id”:1,“title”:“John Jones”},{“id”:2,“title”:“Peter Green”},{“id”:3,“title”:“Alan Jones”},{“id”:4,“title”:“Mike Tyson”},{“id”:6,“title”:“Alice Struve”}]}

let json = JSON.parse(result)
return json.select

Will return

[{“id”:1,“title”:“John Jones”},{“id”:2,“title”:“Peter Green”},{“id”:3,“title”:“Alan Jones”},{“id”:4,“title”:“Mike Tyson”},{“id”:6,“title”:“Alice Struve”}]

In one sentence: (JSON.parse(result)).select

[Philip_J]

Thanks @JonL.
That is exactly what I need to happen…Ive come to that conclusion myself during the day as I plodded through this…

Now. How do I achieve that?

Is that editing the PHP file? Or is that JavaScript language I need to put in the FullCalendar script to parse the PHP query so that only the JSON array is returned?

[JonL]

In the file where you are invoking the scheduler and where you have the results of the SC available to you.
You need to adapt it and change the result variable with the actual Wappler variable that contains the results of your SC.

There is probably an App Connect method that will provide you directly with the value, but it will be based on what i said above. However, I don’t know it as I haven’t been in the need of it.

[Philip_J]

Ok…I think I can figure that out. Thanks a bunch!

[Philip_J]

@Teodor, @George Is there a way in Wappler (SC or AC) to achieve what Jon has suggested?

I'm looking around now, but really just trial and error seeing if i can get it to work. Essentially returning a JSON file that has just the array of data from a SC query, WITHOUT the query name and {} at the begining of the file.

@JonL

In the file where you are invoking the scheduler and where you have the results of the SC available to you.
You need to adapt it and change the result variable with the actual Wappler variable that contains the results of your SC.

There is probably an App Connect method that will provide you directly with the value, but it will be based on what i said above. However, I don’t know it as I haven’t been in the need of it.

[tesla]

You may be looking for dmx.parse()

I’m pretty certain that if you put a server connect path in the brackets within an apostrophe at either end you will get a JSON output.

[s.alpaslan]

@Philip_J try please
dmx.parse('serverconnect.load({})')

[Philip_J]

Ok I will try that. I did think it was only for parsing an app connect variable but maybe it will work for this too.

Thanks for the suggestions

[Philip_J]

Thanks again @s.alpaslan and @tesla for the suggestions. Unfortunately i have not been able to get this to work. I also went back to some of the old FullCalendar posts BEFORE it was implemented and found similar suggestions on using dmx.parse.

This is what i have got in the JS file (i’ve also tried as a script in the HTML head):

I also tried this:

I’ve tried a number of other combinations, and have also tried this on a vary plain HTML page with no other app connect components loaded except the bare minimum to get the FC Calendar to display.

Does anyone have any other insights as to why this isn’t working?

I have not been able to figure out how to write the JS code that @JonL suggested yet…

Cheers,
Phil

[s.alpaslan]

dmx.parse('serverconnect.load({parametername : value })')

[Philip_J]

wow… you work odd hours over there in Turkey Thanks @s.alpaslan I’ll try and get that working

[tesla]

The only time I used dmx.parse i put the values into a variable, then used that variable in my JS function.
Eg
var eventValues = dmx.parse(‘SC_events.data.query1’)

JonL suggested using .select after the parse of the json values so this is what I would try…

events: eventValues.select

[tesla]

A quick follow up.
Here is Patrick talking about dmx.parse...

Binding server connect variable inside Javascript

Hi everybody, it will be a simple question, but not for a dummy like me. I have a reserved area where people login and in the main page I have a query to have the name and the email of the logged person. Now I would like to put Name and email of the Logged person inside the following javascript: <script type=“text/javascript”> var Tawk_API=Tawk_API||{}; Tawk_API.visitor = { name : ‘visitor name’, email : 'visitor@email.com’ }; var Tawk_LoadStart=new Date(); <!-- rest of the tawk.to wi…

In that thread he mentioned that you have to wait for the server connect to load it’s data first before you can parse it in JS. The way he mentioned (that I followed) was to invoke the JS function with an ondone=“myfunction()” in the server connect action.

[Philip_J]

Thanks @tesla but unfortunately i still can’t get the damn thing to load… Bangin my head against a wall here the last couple of days lol.

I’ve tried the onload command and it works in that I can see that it loads a var from a script (a simple alert with some text) but its still not working in loading the events or resources for Full Calendar.

I think the issue lies deeper.

If i simply try to set a variable in app connect to display the results of the query (before using dmx.parse, so i can see what is happening)

I set the the AC variable to:

And the result is:

So if i use dmx.parse on that same variable in a JS script, using a simple ‘Alert’ function to see the results, that what i see. And if that is what FullCalendar is seeing as the events then no wonder its not working.

If i drill further down the query and select the two fields (id and title) this is what it looks like:

Now firstly, that is only the first result (I figure that is what the [0] is) but that is also not what the JSON array needs to look like:

[
{“id”:1,“title”:
“John Jones”}
]

What am i doing wrong?? Any more help much appreciated…

[JonL]

What do you get if you

console.log(dmx.parse(‘var1.value’)) ?