FullCalendar

[CharlesParker]

Having a super hard time trying to get this JS calendar implemented correctly - If I hard code the events its fine. If I use a variable that holds the correct JSON data I get no errors and no events either, If I use a string that looks like json data (LOL) then I get {object} {object} - hahahaa, so yeah been down that road.
Finally If I have a list control I can get individual events using variables for each to show up in the calendar.

Overall this has been a real pain in the butt. Does anyone have any snippets to share of a correctly implemented calendar pulling data from a DB?
Apparently I need more to go on than their documentation! Would really like to see what I am doing wrong, and maybe learn a thing or two.

I am still running that discord server at https://discord.gg/yfsc9RTm if anyone is interested in hanging out (screen sharing) and working on it with me...

Thanks in advance for any help anyone can provide!

[madtowng]

Hi Charles,
I have no idea what calendar you're working with, but I'm getting better at working with JSON and javascript.
Care to share ?

[Lance Gurd]

Hi Charles,

I looked at fullcalendar a few years ago and found it hard work. Have you applied for a feature key for the list control calendar layout as in the nightly release notes, it takes a bit of work to understand but is pretty good, I have been using it for a few years now.

[CharlesParker]

fullcalendar.io also YES I have teh feature key for the list control view as a calendar - equally if not harder to understand as it is not fully developed imo

[CharlesParker]

wouldn't mind seeing a working example of a list control layout working (beyond static data) with a DB - how to implement db fields into the json calendar settings - when customizing a typical list control layout you can edit it, apply a template etc fairly easily whereas the calendar control you can only use the calendar settings which can be confusing to someone like me who is new to working with json data and forms. the static data implementation - simple but I am not going to work out "duration" for an event. and all layouts use "duration" as far as I can tell instead of a start date and an end date then there's AA displaying a friendly date when it needs mm/dd/yyy hm...etc - quite frustrating to have to figure out what you need in the DB and then what you need in the properties on your own. So i guess ti could be much better documented and more videos made would be a huge help. Would be great to see a much better visual builder when it comes to the calendar - so if your watching...folks at AA !!!

[Russell Craycraft]

Can you share the JSON data?

[CharlesParker]

Yes indeed. This DB is for testing and has 3 records I created for testing purposes. The Xbasic to retrieve the json is as follows:

to be posted...had to remove it as it was wrong, lol

[CharlesParker]

maybe my function isn't right somehow?

[CharlesParker]

well of course - I am still working through this and immediately see some errors left over from implementation of the both the list view calendar AND the full calendar io so I am going to delete/edit what I posted earlier in favor of what would be more correct...sorry for any confusion. will repost what I beleive is correct and what I would need help with at that time.

[CharlesParker]

Ok, so let me restart this conversation with what I do have working and what I would like to do as I think this will help you help me if you're willing.

So I have a list control with 3 records in it from a MySQL DB
table is called "calendar"

Table is basically this:

id | pk/auto inc
title | varchar
date | date
description | varchar


I have the following javascript in the onrender complete client side:

and the list control is set to select the first record so one is selected when the list loads, probably wouldn't be a bad idea to have a settimeout on the whole thing later on...but that can come later.

so onRenderComplete:

//draws draggable list calendar
{dialog.object}.buttonClick('BUTTON_1');

//draws calendar
var date = "2024-01-05";  
var calendarEl = document.getElementById('calendar');
var myid = {dialog.Object}.getValue('id');
var mytitle = {dialog.object}.getValue('title');
var mydate = {dialog.object}.getValue('date');
var mydes = {dialog.object}.getValue('description');
    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, // can click day/week names to navigate views
      editable: true,
      height: "auto",
      droppable: true, // this allows things to be dropped onto the calendar
      drop: function(arg) {
        // is the "remove after drop" checkbox checked?
        if (document.getElementById('drop-remove').checked) {
          // if so, remove the element from the "Draggable Events" list
          arg.draggedEl.parentNode.removeChild(arg.draggedEl);
        }
      },
      dayMaxEvents: true,
       // allow "more" link when too many events

      events: [
      {
      id: myid,
      title: mytitle,
      date: mydate,
      extendedProps: {
          description: mydes
      }
      }],
          eventDidMount: function(info) {
      var tooltip = new Tooltip(info.el, {
        title: info.event.extendedProps.description,
        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();

​

This loads the calendar with the single selected record, I would like to load all of the records in the list so I am guessing I would need a for each loop going on - not sure how or where exactly.
When I tried to get some json data to replace the events: section I would either get nothing added to the calendar (no errors in dev tools) OR I would get {object}{object} as stated earlier.

Whats in question here is the events section - you'll notice I am using a var to get the data for each event name|value pair by explicitly naming the name and a variable for the value - this works and so does hard coding it as follows :
So if the events section looked like this:

events: [
{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"}
]​

This would also work to load all 3 events into the calendar however if I had a field on my UX called eventdata (or an ajax callback returning the same value) with a value of (exactly that)
meaning:

 [ {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"} ]

and in my javascript I used var getdata = {dialog.object}.getValue('eventdata')
something like this:

     events: function(){
       var mydata = {dialog.object}.getValue('eventdata');
        {dialog.object}.setValue('returneddata',mydata);
        return mydata;
        },​

this fails. this gives me either nothing wihtout error or {object}{object}{object} should I manually edit the value to drop the [ ]
at each end etc.

I did confirm with alert(getdata) to see what exactly is in that variable. so it's like I can use a variable for the quoted named value in the javascript but not for the unquoted label - looks more like an array than it does json but either way I thought the variable would just replace the code with the string of text and then run - nope.


In summary, I would like to load the calendar with a loop to place all events in the list not just one at a time - which I can do if I place the onrender code in the list event onclick but that's not sensible.
Hope that makes sense. I can send the component but for it to work you'll also have to load some other scripts in the head section of either page or linked files
and install fullcalendar which is really just placing a folder in your project which is actually the easy part, lol.

Sometimes it's just easier to see it - LOL
I'll see if I can produce a video to show what I got going on here.

[Lance Gurd]

Hi Charles,

I think you are overthinking this a little. The list will give you all your data from your table in your database, this can be filtered in a usual manner. I use start time and end time in my database rather t5han duration and this is taken care of by the mapping in each calendars settings.

My table script is

CREATE TABLE `newcal` (
  `id` int(12) NOT NULL AUTO_INCREMENT,
  `grouped` char(12) CHARACTER SET latin1 DEFAULT NULL,
  `startd` datetime DEFAULT NULL,
  `endd` datetime DEFAULT NULL,
  `title` char(255) CHARACTER SET latin1 DEFAULT NULL,
  `item` char(255) CHARACTER SET latin1 DEFAULT NULL,
  `description` char(255) DEFAULT NULL,
  `isAllDay` char(5) CHARACTER SET latin1 DEFAULT NULL,
  `estno` int(5) DEFAULT NULL,
  `refno` int(5) DEFAULT NULL,
  `duration` time DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1023 DEFAULT CHARSET=utf8;
​

estno and refno are not required, but I do use them for filtering certain calendars. I did put duration in there for some experimentation but have not used it in my live calendars.

My list is based on an SQL datasource and the select statement is

SELECT
    *
FROM newcal
WHERE grouped <> 'Jobs'  
ORDER BY id DESC​

I filter out anything that is in the group (grouped) Jobs because that is a totally separate calendar which is based on a timeline view.

I then, as my main calendar view have a work-week layout which shows Monday - Friday 7am to 6pm for office operations and the settings are

{

    "settings": {

        "type": "day",
        "range": "work-week",
        "time": {
            "size": 70,
            "range": {
                "start": "7:00",
                "end": "18:00"
            },
            "header": {
                "size": 60
            }
        },
        "input": {
            "map": {
                "allDay":"isAllDay",
                "start": "startd",
                "end": "endd",
            "group": {
                    "by": "grouped"
                },  

                "stack": {
                    "create": true,
                    "on": "date"
                }
            }
        }
    }
}​

There are no client or server side events to get this working and apart from events in the calendar layout to get click or drag operations is all you need to get your calendar showing your records.

Lee Vasic has done some great work with the calendar and sent me a copy of his, which has given me some ideas for further developing mine, but that is for when I finish re-hashing my UX's to use JSONForms which are great and make for a much smaller UX, therefore loading faster.

[CharlesParker]

no this is TWO different things we are talking about, my code (what I have working) is in relation to the integration of fullCalendar which is a 3rd party JS calendar. Their documentation is here: https://fullcalendar.io/docs
What you are referring to is the AA list control view - which I am happy to discuss as well but it should probably be in a different thread to keep people from getting confused. What you posted is helpful in that regard though!

[Lance Gurd]

Sorry for the confusion, but I thought you had said you were interested in seeing a working version of the list view calendar, the code I sent above is how to implement one. Sorry for troubling you and hijacking this thread

[CharlesParker]

no. no worries! I am interested, in fact I created another thread for this exact purpose immediately after you posted! thanks for sharing!

[Russell Craycraft]

A video would help tremendously.

but try this (In a button):

debugger;

//If this works, put your getValue in place of the static 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"} ]

//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.extendedProps.description,
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');
if (!isNaN(date.valueOf())) {
calendar.addEvent({
title: 'dynamic event',
start: date,
allDay: true
});
alert('Great. Now, update your database...');
} else {
alert('Invalid date.');
}
}
}
}
});

calendar.render();