Our blazing fast Grid component built with pure JavaScript


Post by thomaso »

The default calendar is initially set to go from 6 AM to 6AM.

Relevant calendar config:

{
    week: null,
    day: null,
    month: null,
    year: null,
    agenda: null,
    weekResources: {
      type: 'resource',
      title: 'Week',
      view: {
        type: CalendarViewMode.WEEK,
        weekStartDay: null, // dynamically set
        dayStartShift: 6,
        dayStartTime: 6,
        dayEndTime: 6,
        visibleStartTime: 6,
        showAllDayHeader: false,
        eventRenderer: eventRenderer.bind(null, CalendarViewMode.WEEK),
        dayHeaderRenderer
      }
    } as Partial<WeekViewConfig>
    

Screenshot:

calendar-screenshot.png
calendar-screenshot.png (42.92 KiB) Viewed 422 times

That works fine.

However, when I want to change the timerange, it only seems to work partially.
As you can see in the gif, the grid itself seem to adjust tot the correct height, but the timelabels on the vertical axis does NOT update along:

calendar-bug.gif
calendar-bug.gif (297.96 KiB) Viewed 422 times

Am I doing something wrong?

Kind regards,
Thomas Opdebeeck


Post by thomaso »

FYI: the script in the gif is: test.current.instance.modes.weekResources.view.dayStartTime = 0;
'test' is obviously the calendarRef.


Post by alex.l »

I tried here
https://bryntum.com/examples/calendar/basic/
in console

calendar.modes.week.dayStartTime = 1
// alternate way
calendar.activeView.dayStartTime = 1

All works as expected.
We need a test case to reproduce this. Please try to reproduce in our examples or zip and attach your app.

All the best,
Alex


Post by thomaso »

Hey Alex, thanks for the response.

I got it working, but I think I stumbled upon a small bug on your side now.

To reproduce: go https://bryntum.com/examples/calendar/basic/
and replace the code in the code-editor by this setup:

import { Calendar } from '../../build/calendar.module.js?461864';
import shared from '../_shared/shared.module.js?461864';

const calendar = new Calendar({
    // Start life looking at this date
    date : new Date(2020, 9, 12),

// CrudManager arranges loading and syncing of data in JSON form from/to a web service
crudManager : {
    transport : {
        load : {
            url : 'data/data.json'
        }
    },
    autoLoad : true
},

appendTo : 'container',

// Features named by the properties are included.
// An object is used to configure the feature.
features : {
    eventTooltip : {
        // Configuration options are passed on to the tooltip instance
        // We want the tooltip's left edge aligned to the right edge of the event if possible.
        align : 'l-r'
    }
},
modes: {
  week: null,
  day: null,
  month: null,
  year: null,
  agenda: null,
  weekResources: {
    type: 'resource',
    title: 'Week',
    view: {
      type: 'week',
      weekStartDay: null,
      dayStartShift: 0,
      dayStartTime: 6,
      dayEndTime: 6,
      visibleStartTime: 0,
      showAllDayHeader: false,
      //eventRenderer: eventRenderer.bind(null, CalendarViewMode.WEEK),
      //dayHeaderRenderer
    }
  },
  dayResources: {
    type: 'resource',
    title: 'Day',
    view: {
      type: 'day',
      dayStartShift: 6,
      dayStartTime: 6,
      dayEndTime: 6,
      visibleStartTime: 6,
      showAllDayHeader: false,
      //eventRenderer: eventRenderer.bind(null, CalendarViewMode.DAY),
      //dayHeaderRenderer
    } 
  }
}

});

That is how we have set it up: with ResourceView-mode (https://www.bryntum.com/docs/calendar/api/Calendar/widget/ResourceView).

With this set up we can have following scripts working just fine:

calendar.modes.weekResources.view.dayStartTime = '11:00';calendar.modes.weekResources.view.dayEndTime = '19:00';

However, when I try to have some more specific time (with minutes instead of spot on the hour)
EG:

calendar.modes.weekResources.view.dayStartTime = '06:10';calendar.modes.weekResources.view.dayEndTime = null;

It gets a bit buggy.
It seems to be displayed as [05:50,*] instead of [06:10, *].

calendar-minutes-bug.gif
calendar-minutes-bug.gif (1.01 MiB) Viewed 387 times

Thank you for having a look,
Thomas


Post by alex.l »

Hi Thomas,

Thanks for the report. Reproduced and created a ticket. Link to track the status: https://github.com/bryntum/support/issues/5225

All the best,
Alex


Post Reply