Bryntum Support Forums

I am just going round and round and circles from thread, trying this, trying that, run into this issue, nope this doesn't work.... its crazy sigh.

So backing up and lets just take one issue. If I create a simple json file with data like

{"id": "12239302","f0": 12239302,"sequence": 1,"fld0": "!nice","name": "sweet","startdate": "2021-01-09T14:15:00","enddate": "2021-01-12T08:00:00","duration": 9,"fld1": "Pharmnet","fld2": "Cerner/McLaren/Atos","note": "","durationunit":"day","f1": ""}

My start date/time is 2:15pm on 01-Jan-2021

I have a column (had to give up trying combinations of D,M,Y,H etc and went with LLL)

{ field: 'startdate', format:'LLL', editor : 'datetimefield' , type: 'startdate' },

I need a date and time format, because the default will only show you the date so https://www.bryntum.com/docs/gantt/#Core/helper/DateHelper#function-format-static one way is just LLL

This does display my date and time

but

a) My date/time is supposed to be UTC in JSON right? If so it is supposed to show the local time in the column, of EST not the raw value.

b) Edit task is unable to populate the date/time into the task information

To view this example:

I figured out why it is not converting to local time, the examples like https://www.bryntum.com/examples/gantt/_datasets/launch-saas.json do not have a trailing Z to firmly indicate it is a UTC date/time. You need it in order to properly display the local time on the grid.

Updated

However this does not fix the Task Information popup, it is still a blank start date/end time when you Edit Task

But with that fix so it displays the correct timezone time, now you can't edit the field

DateHelper.js:1787 Uncaught TypeError: first.getTime is not a function

These circular issues make me think it might be easier to abandon the built in fields and have two seperate fields, one for date, one for time and have them update the records startdate together. At least then I can enter one task with a date and a time.

You're right about 'Z' in the dates. If you want to keep dates in UTC format you need to add Z to the end. Then the date will be automatically converted to a local time.

Regarding "blank start date/end time". Gantt by default operates with dates only. DateField is used as an editor for both StartDateColumn (and other columns which handle dates) and TaskEditor. To be able to edit date and time you need to change default editor for every date column you use and TaskEditor to DateTimeField.

Please modify Gantt/examples/advanced/app.js demo locally:

    columns                 : [
        { type : 'wbs' },
        { type : 'name', width : 250 },
        // Define "datetimefield" editor for "startdate" and "enddate" columns.
        // "field" is omitted since it's specified in the columns,
        // but if you read data from a custom data field, you should set your own fields.
        // Default fields are "startDate" and "endDate" (case sensitive)
        { type : 'startdate', format : 'LLL', editor : 'datetimefield', width : 300 },
        { type : 'enddate', format : 'LLL', editor : 'datetimefield', width : 300 },
        ....

    features : {
    // Define TaskEdit feature
        taskEdit : {
            items : {
            // Specify General Tab config
                generalTab : {
                    items : {
                        // Specify Start Date config
                        startDate : {
                            type : 'datetimefield',
                            // also adjust layout a bit
                            flex : '1 0 100%',
                            cls  : ''
                        },
                        // Specify End Date config
                        endDate   : {
                            type : 'datetimefield',
                             // also adjust layout a bit
                            flex : '1 0 100%',
                            cls  : ''
                        }
                    }
                }
            }
        },

Now you can open the Advanced demo locally and see how it works. I see no errors.

Please do the following steps and let me know if it works for you. If something doesn't work for you please modify one of our examples and attach a zip with the sources. We will replace the demo locally and with the help of git we will see what exactly you've changed. And also we will be able to debug your code locally.

Here is the zip with the changes I've made to the Advanced demo:

Best regards,
Pavel

We will add it as a new demo. Ticket here: https://github.com/bryntum/support/issues/2417

Thanks, that does work, its quite different to how I've been created the js, but let me play around with it.
I really appreciate it.

(If anyone else is curious, I changed the (first) install apache task to have a time component in UTC (and manually scheduled) and edited a few minor things and you can see the start column displays the time and also populates the Task Info here:

Yay, it works end to end now, UTC date/time back and forth with the server, edit in column or task information.
sweet. Did need the manuallyScheduled indicator for my workflow

{"id": "12237715","manuallyScheduled":"true","f0": 12237715,"wbs": 2,"fld0": "Pre Cutover","name": "Complete Conversion Readiness Assessment","startDate": "2021-01-04T05:00:00Z","endDate": "2021-01-11T05:00:00Z","duration": 2,"fld1": "Pharmnet","fld2": "Cerner/McLaren/Atos","note": "","durationunit":"day","f1": ""},