Change timeline format and width

[ccopleston]

Hi, I am using hourAndDay and want to change the time format to: "HH a" and reduce the time slot column widths so I can get more time on the screen horizontally.

I am using Vue + Webpack.

What is the correct / best way to do this with Vue + Webpack?

[mats]

For date formats, please see localization guide: https://www.bryntum.com/docs/scheduler/ ... ization.md

For time axis `tick width`, just set `tickWidth` on your viewPreset definition

viewPreset : {
        name      : 'hourAndDay',
        tickWidth : 100
    },

[ccopleston]

Thanks mats, but I'm not sure how to apply any of this within Vue + Webpack.

I've tried importing build/locales/scheduler.locale.En.js then setting the locale in the Vue wrapper, but it doesn't work....

<script>
import En from "@/assets/scheduler.locale.En";
...
  mounted: function() {
...
    this.schedulerEngine = new bryntum.scheduler.Scheduler(config);
    this.schedulerEngine.localeManager.locale = En

I've tried creating my own locale then setting the locale in the Vue wrapper, but it doesn't work either.

The Vue wrapper doesn't have a way to adjust the view present other than defining which one you want, it is just a string...

  props: {
    ....
        viewPreset: {
                default: "hourAndDay",
                type: String
        },

I'm at a loss how to do any of this with Vue + Webpack. I would really appreciate your help.

[mats]

This has nothing to do with WebPack, it's just our JavaScript API isn't yet 100% exposed as Vue properties. Please have a look at this guide https://www.bryntum.com/blog/integratin ... ith-vuejs/

And if you inspect the sources of the demo, you'll see how properties are exposed and you can modify as it you want. We'll continuously try to improve the Vue wrapper, so thanks for the feedback.

[ccopleston]

Thanks, I've read all the guides. I was hoping for a little more help.

You ship a Vue component but only provide specific help on how to localise React projects, not Vue.

When you create a new project, the Vue CLI scaffolds Webpack, so making the Vue examples use Vue + Webpack would be far more useful / practical for Vue developers. I'm not the only one trying to use Scheduler with Vue + Webpack: viewtopic.php?f=44&t=9695

In that thread you can see I got Scheduler working in a modular way and explain how to create a new Vue project and use Scheduler within it. The days have gone where we should be placing scripts in index.html if we hope to develop in a modular way and bundle an optimum runtime.

I understand it's early days, but the Vue wrapper is flawed. Properties collide so it is impossible to access / configure the basics (see viewtopic.php?f=44&t=9989).

Now it seems I can't configure the viewPreset because the property is a string (the viewPresent name) rather than an object.

Without your help localising Scheduler in a Vue + Webpack project, or fixes to the Scheduler Vue wrapper, I'm stuck trying to do the most basic of things: Change the time format of the timeline heading and the tick width.

[johan.isaksson]

Hi,

As you write it is early days, and we welcome any feedback on what should be available through the wrapper.

I have adjusted the type of the viewPreset prop to be [String, Object]. The change will be available in nightlies, but feel free to change it yourself locally and see if it fixes your problem.

Have created a ticket on making a Vue CLI based demo, you can track it here:

https://app.assembla.com/spaces/bryntum ... mo/details (update: resolved)

About the request regarding colliding names, that ticket is still open and targeted at next patch release:

https://app.assembla.com/spaces/bryntum/tickets/7003 (update: resolved)

[ccopleston]

Many thanks Johan,

Changing the prop type for viewPreset has enabled me to adjust not only the tickWidth, but also the headerConfig where I can set the time format.

[johan.isaksson]

The ticket mentioned above about a Vue CLI demo has been resolved. The new demo will be part of the next release (1.2) and should appear in nightlies tomorrow.