Page 1 of 1

[ANGULAR] The text "L{EventDrag.noDropOutsideTimeline}" appears when dragging

Posted: Fri Dec 02, 2022 9:16 am
by jmeire

Hi

I'm currently running into the following issue after upgrading to v5:
When having an event that has a startDate before the startDate of the scheduler, I get the following error:

nodrop.PNG
nodrop.PNG (5.67 KiB) Viewed 637 times

I know this is an untranslated Bryntum validation but I don't understand what validation this is. Before the upgrade to v5, this action was just working without any errors. In what cases does this error occur now and how can I bypass it?
When letting go while this error shows, the drag action gets reverted.
I also noticed that in the same tooltip, the dates are shown twice.

See this gif as an example:

nodrop.PNG
nodrop.PNG (5.67 KiB) Viewed 637 times

Kind regards
jmeire


Re: [ANGULAR] The text "L{EventDrag.noDropOutsideTimeline}" appears when dragging

Posted: Fri Dec 02, 2022 11:05 am
by jmeire

After some further investigation I found out that it has to do with the applying of the LocaleManger.
In attachment you can find an example project.

If you remove the following line, the validation error won't be visible anymore.
void LocaleManager.applyLocale('current');

But I still need to apply the locale..

Hopefully this example can help with the investigation.

nodropoutsidetimeline.rar
(119.01 KiB) Downloaded 53 times

Re: [ANGULAR] The text "L{EventDrag.noDropOutsideTimeline}" appears when dragging

Posted: Mon Dec 05, 2022 4:09 am
by alex.l

Hi jmeire,

Yes, that's because your locale miss a lot of required lines.
If you do not plan to localize all Scheduler, use our localization as a base, in that case you won't have such errors.
Here is the code that I applied to your demo to make it working

import { LocaleManager, LocaleHelper, ResourceModel, ResourceStore, Scheduler } from '@bryntum/scheduler';
import EnLocale from '@bryntum/scheduler/locales/scheduler.locale.En.js';

// ....


const currentLocale = {
  localeName: 'current',
  localeDesc: 'Current',
  DateHelper: {
    locale: 'nl-BE',
    nonWorkingDays: {
      0: true, // Sunday
      6: true, // Saturday
    },
  },
};

// use EN locale as a base and apply required customization
const locale = LocaleHelper.mergeLocales(EnLocale, currentLocale);

LocaleManager.registerLocale('current', { locale : locale });

// Set the current Bryntum locale
void LocaleManager.applyLocale('current');

The line you see might be localized like this. Example from our De localization

    EventDrag : {
        noDropOutsideTimeline : 'Event wird möglicherweise nicht vollständig außerhalb der Timeline gelöscht'
    },

Full localization guide: https://bryntum.com/products/scheduler/docs/guide/Scheduler/customization/localization

You can enable https://bryntum.com/products/scheduler/docs/api/Core/localization/LocaleManager#property-throwOnMissingLocale to see exception when not localized lines detected.

// Enable missing localization Error throwing here to show how it can be used in end-user apps
// All non-localized strings which are in `L{foo}` format will throw runtime error
LocaleManager.throwOnMissingLocale = true;

Re: [ANGULAR] The text "L{EventDrag.noDropOutsideTimeline}" appears when dragging

Posted: Wed Dec 07, 2022 10:48 am
by jmeire

Okay, thank you!