FullCalendar

[madtowng]

Hey Charles,
I'm swinging at the low-hanging fruit right now.

replace flag = cn.execute(sql,args) with timeJSON = cn.ToJSON(sql,args).
This should put the returned data into a JSON object.
I also don't see where you're returning any javascript.
I would remove the e._set.eventdata.value = json and add in the following code.

It's not as bad as it sounds.
I should have time for a screen sharing session if you want.

dim js as C
js = <<%txt%
{dialog.object}.setValue('eventdata',<jsondata>);
%txt%
'the code below should be after the sql query is performed.
strtran(js,"<jsondata>",timeJSON)
return js

[CharlesParker]

I feel like I am missing something on that last advice, never heard of timeJSON

[madtowng]

timeJSON is a user defined variable.
You can replace it with any variable name you want .
I think I snuck it in the plain text on the line with cn.ToJSON, sorry for the confusion.

[CharlesParker]

Does this make sense to you guys? I am still getting "undefined" returned from the javascript.

function getdata as c (e as p)
    debug(1)
    dim getdata as c
'DIM a SQL arguments object
dim args as sql::arguments


'DIM an Xbasic AlphaDAO connection object
dim cn as sql::connection
dim flag as l
''open the connection object to connect to the Database
flag = cn_open(cn,"::Name::nwcopro")
dim sql as c
sql = "SELECT id, title, date, description FROM calendar"
'turn portable SQL on. (for more information on portable sql search in help (https://www.alphasoftware.com/documentation)
'execute the SQL - pass in the sql::arguments object
flag = cn.execute(sql,args)
if flag = .f. then
    'an error occurred - get the error message from cn.callresult.text
    'report the error, close the database and then end the script
    dim errortext as c
    errortext = cn.callresult.text
    cn.close()
end if
'DIM a SQL::Resultset object
dim rs as sql::resultset
rs = cn.resultset
'get the JSON from the query
dim json as c
dim js as c

json = rs.ToJSON(-1,-1,.f.,.t.,"yyyy-MM-dd","yyyy-MM-dd")

strtran(json,"<json>",json)
return json
'Clean up by freeing the resultset and then closing the database
cn.freeresult()
cn.close()
end function​

I added in a localstorage item to catch it as well in my JS

//works ya - and the alert shows {object}{object} like it is truly JSON

//var returneddata =[{"id" : "1", "title" : "Sample Title", "date" : "2024-01-06"}, {"id" : "2", "title" : "Owner Title 1", "date" : "2024-01-07"}, {"id" : "3", "title" : "Title 2 Event", "date" : "2024-01-07"}];


//as a value from a field it doesnt work...
//probably prefer to get the JSON from an xbasic callback
//which I did but got the same result where the alert shows teh actual text
//var returneddata = {dialog.object}.getValue('eventdata');


//data from the xbasic function
//when this runs I get "undefined" in the alert...so doesn't work
var returneddata = {dialog.object}.ajaxCallback('','','getdata','','',{chunkedResponses: {allow: false},deviceOfflineFunction: function() { alert('Internet connection not available');  },checkifserveravailable: true,serveravailabletimeout: 2000,onServerNotAvailable: function() { alert('The server is not available');}});

localStorage.setItem("data_returned",returneddata);



//draws calendar
var date = "2024-01-05";
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay addEventButton'
},
initialDate: '2024-01-12',
navLinks: true,
editable: true,
height: "auto",
droppable: true,
drop: function (arg) {
if (document.getElementById('drop-remove').checked) {
arg.draggedEl.parentNode.removeChild(arg.draggedEl);
}
},
dayMaxEvents: true,
events: returneddata, // Assign the events array here


          eventDidMount: function(info) {
      var tooltip = new Tooltip(info.el, {
        title: info.event.title,
        placement: 'top',
        trigger: 'hover',
        container: 'body'
      });
    },
        customButtons: {
      addEventButton: {
        text: 'add event...',
        click: function() {
          var dateStr = prompt('Enter a date in YYYY-MM-DD format');
          var date = new Date(dateStr + 'T00:00:00'); // will be in local time

          if (!isNaN(date.valueOf())) { // valid?
            calendar.addEvent({
              title: 'dynamic event',
              start: date,
              allDay: true
            });
            alert('Great. Now, update your database...');
          } else {
            alert('Invalid date.');
          }
        }
      }
    }

    });

    calendar.render();​

Watching the xbasic run in the debugger I do see json as a json object. so again I am at a dead end. Jeez.

[madtowng]

I did the strtran(js) thing because for some reason a JSON object passed to javascript using e._set will change it from an object to a string.
If that method is used, then you would need to use JSON.parse() to convert the string back to an object.

I just found the state variable line I've been looking for during the past 4 hours, which means I'll be able to pay closer attention
to how I say and do things.

[CharlesParker]

ok, so I think we can agree that e._set was giving me a string literal and not a json object. It seems like "return" from the callback is returning a string as well.
I did try json.parse for the var in the javascript but that didnt seem to work either...I know there has to be a way to do this and we are close!

[madtowng]

I reworked the xbasic to work (I didn't get to test it yet because I haven't built the mysql table),
and I declared all the variables at the beginning of the function (my standard).
I tried to make notes where I changed or commented out other code, but might have missed some minor changes due to impending dinner time.
Let us know how things work.

function getdata as c (e as p)
    debug(1)
dim getdata as c
dim cn as sql::connection
dim args as sql::arguments
dim rs as sql::resultset

dim flag as l
dim sql as c
dim errortext as c
dim json as c
dim js as c

js = <<%txt%
{dialog.object}.setValue('eventdata',<jsondata>);
%txt%

flag = cn_open(cn,"::Name::nwcopro")

sql = "SELECT id, title, date, description FROM calendar"
'turn portable SQL on. (for more information on portable sql search in help (https://www.alphasoftware.com/documentation)
'execute the SQL - pass in the sql::arguments object
'flag = cn.execute(sql,args)
json = cn.ToJSON(sql,args)

'if flag = .f. then
if len(json) = 0 then
    'an error occurred - get the error message from cn.callresult.text
    'report the error, close the database and then end the script

    errortext = cn.callresult.text
    cn.close()
end if
'DIM a SQL::Resultset object

' rs = cn.resultset Not needed due to line 20
'get the JSON from the query

'json = rs.ToJSON(-1,-1,.f.,.t.,"yyyy-MM-dd","yyyy-MM-dd")

' strtran(json,"<json>",json)
js = strtran(js,"<jsondata>",JSON)
return js
'Clean up by freeing the resultset and then closing the database
cn.freeresult()
cn.close()
end function?​

[CharlesParker]

I love the question mark at the end,

[CharlesParker]

I am getting the same exact result as my function the javascript that writes the value of the variable comes back undefined...

[CharlesParker]

https://drive.google.com/file/d/15oO...ew?usp=sharing

the video shows the json coming back as undefined vs hardcoded - and what gets written to local storage as a test

[CharlesParker]

doesnt it seem odd that I cant get a json object back from an ajax callback for use in a JS event? Seems like this should be fairly simple.

[CharlesParker]

I got it...will post here in a few

[CharlesParker]

Whew...it's finally working with 2 of the 3 methods.
First method is to hard code the data - great for testing but not really relevant for those of us actually using a DB.
Second method is to do an xbasic callback and return a json string to a field value, in this case I called it 'eventdata' - this required the string to be parsed again once it gets into the javascript, you'll see it as JSON.parse in the javascript.
The 3rd method is to simply return the json to the variable by running the xnasic callback in the javascript - I couldn't get this working so Method 2 will suffice.

What I did was make button 2 draw the calendar and run the javascript code
button 1 does the ajax callback to run the xbasic and after it completes, it simply does a button click for button 1 thereby drawing the calendar

SO to make it run auto-magically, I simply have {Dialog.object}.buttonClick('BUTTON_1'); in onrendercomplete - this does my ajaxcallback then draws the calendar!


xbasic is this:

function getdata as c (e as p)
'debug(1)
    dim getdata as c
'dim a SQL arguments object
dim args as sql::arguments
'dim an Xbasic AlphaDAO connection object
dim cn as sql::connection
dim flag as l
'open the connection object to connect to the Database
flag = cn_open(cn,"::Name::nwcopro")
dim sql as c
sql = "SELECT id, title, date, description FROM calendar"
'turn portable SQL on. (for more information on portable sql search in help (https://www.alphasoftware.com/documentation)
'execute the SQL - pass in the sql::arguments object
flag = cn.execute(sql,args)
if flag = .f. then
    'an error occurred - get the error message from cn.callresult.text
    'report the error, close the database and then end the script
    dim errortext as c
    errortext = cn.callresult.text
    cn.close()
end if
'DIM a SQL::Resultset object
dim rs as sql::resultset
rs = cn.resultset
'get the JSON from the query
dim json as c
dim js as c
'important to return the date in the proper order for FullCalendar
json = rs.ToJSON(-1,-1,.f.,.t.,"yyyy-MM-dd","yyyy-MM-dd")

json_reformat_safe(json)
e._set.eventdata.value = json
return json


'Clean up by freeing the resultset and then closing the database
cn.freeresult()
cn.close()
end function​

Javascript on button 2

//works ya - and the alert shows {object}{object} like it is truly JSON
//Method 1 hard coded data
//var returneddata =[{"id" : "1", "title" : "Sample Title", "date" : "2024-01-06"}, {"id" : "2", "title" : "Owner Title 1", "date" : "2024-01-07"}, {"id" : "3", "title" : "Title 2 Event", "date" : "2024-01-07"}];

//Method 2 data from a field in the UX - value is retrieved by an ajax callback
var returneddata = {dialog.object}.getValue('eventdata');

//Method 3 data is returned directly from an ajaxcallback that was converted into an action - this method still returns undefined for some reason
//var returneddata = {dialog.object}.ajaxCallback('','','getdata','','',{chunkedResponses: {allow: false},deviceOfflineFunction: function() { alert('Internet connection not available');  },checkifserveravailable: true,serveravailabletimeout: 2000,onServerNotAvailable: function() { alert('The server is not available');}});


var parsed = JSON.parse(returneddata);

//setup local storage item so I could watch what was in the variable in the debugger once returned from xbasic debugger - this can be commented out
localStorage.setItem("parsed",parsed);

//draws calendar
     var containerEl = document.getElementById('external-events-list');
     var eventEls = Array.prototype.slice.call(
       containerEl.querySelectorAll('.fc-event')
     );
     eventEls.forEach(function(eventEl) {
       new FullCalendar.Draggable(eventEl, {
         eventData: {
           title: eventEl.innerText.trim(),
         }
       });
     });
var date = "2024-01-05";
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay addEventButton'
},
initialDate: '2024-01-12',
navLinks: true,
editable: true,
height: "auto",
droppable: true,
drop: function (arg) {
if (document.getElementById('drop-remove').checked) {
arg.draggedEl.parentNode.removeChild(arg.draggedEl);
}
},
dayMaxEvents: true,
events: parsed, // Assign the events array here


          eventDidMount: function(info) {
      var tooltip = new Tooltip(info.el, {
        title: info.event.title,
        placement: 'top',
        trigger: 'hover',
        container: 'body'
      });
    },
        customButtons: {
      addEventButton: {
        text: 'add event...',
        click: function() {
          var dateStr = prompt('Enter a date in YYYY-MM-DD format');
          var date = new Date(dateStr + 'T00:00:00'); // will be in local time

          if (!isNaN(date.valueOf())) { // valid?
            calendar.addEvent({
              title: 'dynamic event',
              start: date,
              allDay: true
            });
            alert('Great. Now, update your database...');
          } else {
            alert('Invalid date.');
          }
        }
      }
    }

    });

    calendar.render();​

If you wanna make your own table its very simple at this point - 4 fields

ID - auto increment pk
title - varchar
date - date
description - varchar

last but not least you'll want those script files I mentioned earlier in this thread as I referenced them in the components javascript linked files - the calendar and the hover effects will not work without them but as I said before that's the easy part!
I will upload the component here in a few for you to look at too - thanks for your help today! Also if you make improvements or more progress PLEASE let me know!

[CharlesParker]

working component attached

[madtowng]

When in doubt, I go back to basics.
The attached component has one control (eventdata) which is populated with a single JSON object that has been stringify'd.

If anyone wants to test the sql data, feel free to check one compiler at 3zz493ypd - MySQL - OneCompiler;
I'm taking a break for now, but should be back to it later today.

function onDialogInitialize as v (e as p)
dim calCN as sql::connection
dim calARGS as sql::arguments
dim namedConnection as C
dim errortext as C
dim itsOpen as L
dim itWorked as L
dim sqlCode as P
dim queryJSON as C
dim js as C

'debug(1)
namedConnection = "::Name::fullCal"
itsOpen = calCN.Open()
sqlCode.loadCalendarData = <<%txt%
SELECT id, title, caldate, caldesc FROM calendar
%txt%
js = <<%txt%
debugger;
{dialog.object}.stateInfo['eventdata'] =<queryJSON>;
{dialog.object}.setValue('eventdata',JSON.stringify({dialog.object}.stateInfo['eventdata']) );
%txt%
queryJSON = calCN.ToJSON(sqlCode.loadCalendarData)
if len(queryJSON) = 0 then
    'an error occurred - get the error message from cn.callresult.text
    'report the error, close the database and then end the script

    errortext = cn.callresult.text
    cn.close()
    js = "alert('"+errortext+"');"
else
    js = strtran(js,"<queryJSON>",queryJSON)
end if
calCN.close()
e.javascript = js​
end function

Capture.png