Our pure JavaScript Scheduler component


Post by coderboy@12 »

Hello,

I've used some custom presets and when I use zoomLevel slider in timeAxisHeadermenu than it's not maintaining view's startDate and endDate.

As an example I've registered 2 presets and my start date is 17 june 2024 to 15 july 2024 when I change view using zoomlevel than it's showing some different start date.

import { DateHelper, EventModel, Scheduler, PresetManager } from '../../build/scheduler.module.js?477293';
import shared from '../_shared/shared.module.js?477293';

//region Presets & Widgets

PresetManager.registerPreset("dayAndWeek", {
  name: "dayAndWeek",
  displayDateFormat: 'DD/MM/YYYY HH:mm',
  timeResolution: {
    unit: "hour",
    increment: 24,
  },
  columnLinesFor: 1,
  headers: [
    {
      unit: "week",
      increment: 1,
      renderer: (startDate) => `W. ${DateHelper.format(startDate, 'WW MMM YYYY')}`


},
{
  dateFormat: "dd DD",
  increment: 1,
  unit: "day",
},
  ],
});

PresetManager.registerPreset("twelveHoursPreset", {
  name: "twelveHoursPreset", // A human-readable name provided to be used in GUI, e.i. preset picker, etc.
  tickWidth: 60, // Time column width in horizontal mode
  tickHeight: 50, // Time column height in vertical mode
  displayDateFormat: 'DD/MM/YYYY HH:mm',// Controls how dates will be displayed in tooltips etc

  shiftIncrement: 1, // Controls how much time to skip when calling shiftNext and shiftPrevious.
  shiftUnit: "day", // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
  defaultSpan: 12, // By default, if no end date is supplied to a view it will show 12 hours
  columnLinesFor: 1,
  timeResolution: {
    // Dates will be snapped to this resolution
    unit: "hour", // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
    increment: 12,
  },

  headers: [
    // This defines your header rows from top to bottom
    {
      // For each row you can define 'unit', 'increment', 'dateFormat', 'renderer', 'align', and 'thisObj'
      unit: "day",
      dateFormat: "ddd DD/MM",
    },
    {
      unit: "hour",
      dateFormat: "HH:mm",
      increment: 12,
    },
  ],


});


const
    requiredPresetIds = {
     dayAndWeek:1,
twelveHoursPreset:1
    },
    // The set of available Presets is what provides the zoom levels.
    presets = PresetManager.records.filter(p => requiredPresetIds[p.id]);

//endregion

//region Data

const
    resources = [
        { id : 1, name : 'Arcady', role : 'Core developer', eventColor : 'purple' },
        { id : 2, name : 'Dave', role : 'Tech Sales', eventColor : 'indigo' },
        { id : 3, name : 'Henrik', role : 'Sales', eventColor : 'blue' },
        { id : 4, name : 'Linda', role : 'Core developer', eventColor : 'cyan' },
        { id : 5, name : 'Maxim', role : 'Developer & UX', eventColor : 'green' },
        { id : 6, name : 'Mike', role : 'CEO', eventColor : 'lime' },
        { id : 7, name : 'Lee', role : 'CTO', eventColor : 'orange' }
    ],
    events    = [];

//endregion

class EventModelWithPercent extends EventModel {
    static get fields() {
        return [
            { name : 'percentDone', type : 'number', defaultValue : 0 }
        ];
    }
}

const scheduler = new Scheduler({
    appendTo          : 'container',
    resourceImagePath : '../_shared/images/users/',

features : {
    stripe : true,
    sort   : 'name'
},

columns : [
    {
        type  : 'resourceInfo',
        text  : 'Staff',
        width : '10em'
    }
],

resources,
eventStore : {
    modelClass : EventModelWithPercent,
    data       : events
},

startDate : new Date(2024, 6, 17),
endDate   : new Date(2024, 7, 15),

// Use our custom list of just the ones we plucked out of the PresetManager
presets,

viewPreset : 'dayAndWeek',

eventRenderer : ({ eventRecord, renderData }) => {
    const value = eventRecord.percentDone || 0;
    // Add a child to the event element (b-sch-event)
    renderData.children.push({
        className : 'value',
        style     : {
            width : `${value}%`
        },
        html : value
    });
},

listeners : {
    presetChange({ from, to }) {
        const
            me = this,
            { presetCombo, zoomInButton, zoomOutButton } = me.widgetMap;

        // To disable buttons based on zoom levels use this code:
        // zoomOutButton.disabled = level <= 0;
        // zoomInButton.disabled = level >= this.presets.length - 1;

        // To disable buttons based on presets in combo use this code:
        const index = this.presets.indexOf(to);
        zoomOutButton.disabled = index === 0;
        zoomInButton.disabled = index === presetCombo.store.count - 1;
    }
},

tbar : [
    {
        type    : 'viewpresetcombo',
        width   : '16em',
        ref     : 'presetCombo',
        presets : presets.map(p => p.id),
        picker  : {
            maxHeight : 500
        }
    },
    {
        type : 'button',
        ref  : 'zoomInButton',
        icon : 'b-icon-search-plus',
        text : 'Zoom in',
        onClick() {
            scheduler.zoomIn();
        }
    },
    {
        type : 'button',
        ref  : 'zoomOutButton',
        icon : 'b-icon-search-minus',
        text : 'Zoom out',
        onClick() {
            scheduler.zoomOut();
        }
    }
]
});

Please find below video as well.

Thanks

Attachments
6707BC31-3228-40C4-863C-2C499BC724F2.MP4
(602.09 KiB) Downloaded 1 time

Post by alex.l »

Hi,

This is that you need I guess https://bryntum.com/products/scheduler/docs/api/Scheduler/view/mixin/TimelineZoomable#config-zoomKeepsOriginalTimespan

Whether the originally rendered timespan should be preserved while zooming. By default, it is set to false, meaning the timeline panel will adjust the currently rendered timespan to limit the amount of HTML content to render. When setting this option to true, be careful not to allow to zoom a big timespan in seconds resolution for example. That will cause a lot of HTML content to be rendered and affect performance. You can use minZoomLevel and maxZoomLevel config options for that.

All the best,
Alex


Post by coderboy@12 »

That works thanks mate :)


Post by alex.l »

Glad to hear! Good luck!

All the best,
Alex


Post Reply