Our pure JavaScript Scheduler component


Post by SIM-LTD »

Hi

We trying to place the component on the side of each of them, but the render has always placed the component beneath.

What are we missing or doing wrong for being not able to place the component next to each of them

items   : [
    {
       type  : 'container',                                                                    
        layoutStyle : {
                     flexDirection : 'row',
                     alignItems  : 'stretch',
                     alignContent: 'stretch',
       },
         items   : [
                          {
                               type  : 'datefield',
                            },
                             {
                                 type  : 'timefield',
                              }                                                                            
                         ]
   },
]
Attachments
Capture d’écran 2019-06-23 à 12.02.10 copie.png
Capture d’écran 2019-06-23 à 12.02.10 copie.png (11.42 KiB) Viewed 1639 times
Capture d’écran 2019-06-23 à 12.02.10.png
Capture d’écran 2019-06-23 à 12.02.10.png (8.98 KiB) Viewed 1639 times

Post by mats »

Need to use valid CSS, please see: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

items   : [
    {
       type  : 'container',                                                                    
        layoutStyle : {
                    'flex-direction' : 'row',
                     'align-items'  : 'stretch',
                     'align-content' : 'stretch',
       },
         items   : [
                          {
                               type  : 'datefield',
                            },
                             {
                                 type  : 'timefield',
                              }                                                                            
                         ]
   },
]

Post by SIM-LTD »

Hi,

We have been trying your way and it still does not work, meaning the components are laid out under each other.

To show you that the property 'layoutStyle' does not make the layout as we wanted, please look at the code below and the screenshot.
items   : [
    {
       type  : 'container',                                                                    
        layoutStyle : {
                    'border': '1px solid #c3c3c3',
                    'flex-direction' : 'row',
                     'align-items'  : 'stretch',
                     'align-content' : 'stretch',
       },
         items   : [
                          {
                               type  : 'datefield',
                            },
                             {
                                 type  : 'timefield',
                              }                                                                            
                         ]
   },
]
Even if we try to use valid css like this :
items   : [
    {
       type  : 'container',                                                                    
       cls     : 'myContainer',
         items   : [
                          {
                               type  : 'datefield',
                            },
                             {
                                 type  : 'timefield',
                              }                                                                            
                         ]
   },
]
and in the css file we added :
.myContainer {
  border: 1px solid #c3c3c3;
  display: flex;
  flex-direction:row;
}
Not matter if we use 'layoutStyle' or 'cls' property, we still have the same layout, as shown on the screenshot.

To be more precise, we try to implement ' editorConfig ' and the code above is placed into.
Your colleague PAVEL, has mentioned some issue
#8673: Should be possible to replace default editor fields using editorconfig
using the ' editorConfig'.

Do you think the issue he raised got anything to do with the fact that we cannot make the layout as wanted?
Attachments
Capture d’écran 2019-06-23 à 19.08.45.png
Capture d’écran 2019-06-23 à 19.08.45.png (7.2 KiB) Viewed 1635 times

Post by mats »

Sorry, my answer was wrong. Use your original code and put sizing CSS for your fields:
.yourTimeField, .yourDateField { flex : 1; }

Post by pmiklashevich »

If you're trying to add date and time fields similar to start and end date/time fields we have by default, you can try this approach: viewtopic.php?f=51&t=11333#p60990

Pavlo Miklashevych
Sr. Frontend Developer


Post by SIM-LTD »

Hi,

the link you posted leads to nowhere. Can you try again. Thank you
Attachments
Capture d’écran 2019-06-24 à 14.29.22.png
Capture d’écran 2019-06-24 à 14.29.22.png (13.26 KiB) Viewed 1623 times

Post by pmiklashevich »

Sorry, that's premium forum. Not available for all. Anyway here is the message:
Basically you can check out our lib/Scheduler/feature/EventEdit.js class and see our date/time field configuration.
What's missing is actually 'b-inline' css class on the datefield and 'b-match-label' css class on the timefield. Please try out this config:
features : {
    eventEdit : {
        // Add extra widgets to the event editor
        extraWidgets : [
            {
                type  : 'textarea',
                name  : 'desc',
                label : 'Note',
                index : 1
            },
            {
                type  : 'date',
                label : 'Requested On Site Date Time',
                name  : 'requestedOnSiteDate',
                ref   : 'requestedOnSiteDateField',
                index : 3,
                cls   : 'b-inline',
                flex  : '1 0 60%'
            },
            {
                type  : 'time',
                name  : 'requestedOnSiteTime',
                ref   : 'requestedOnSiteTimeField',
                index : 4,
                cls   : 'b-match-label',
                flex  : '1 0 40%'
            }
        ]
    }
}

Pavlo Miklashevych
Sr. Frontend Developer


Post by SIM-LTD »

Hi,

Thank you both of you. Nonetheless, as your advice was pretty close to the final result.
We had to adjust a little bit to make it perfect.

Just have a glance you'll understand. :D

Such of small stuff took us quite along... anyway. thank you

By the way. what does it take to be in Premium forum? And what is the difference with the one we are?
Attachments
Capture d’écran 2019-06-24 à 14.50.48.png
Capture d’écran 2019-06-24 à 14.50.48.png (36.32 KiB) Viewed 1619 times
Capture d’écran 2019-06-24 à 14.50.11.png
Capture d’écran 2019-06-24 à 14.50.11.png (38.43 KiB) Viewed 1619 times

Post by pmiklashevich »

What does it take to be in Premium forum? And what is the difference with the one we are?
Please see our support policy here: https://www.bryntum.com/support/support-policy/
Basically it gives you a priority over non-premium users questions, so you can get faster support.
To become a premium user need to buy a license for 5x and more devs or OEM license. Please see comparison table on store pages:
https://www.bryntum.com/store/scheduler/
https://www.bryntum.com/store/gantt/
Also there is an option to buy premium support separately. Please contact us here for a quote: https://www.bryntum.com/contact/

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply