Our pure JavaScript Scheduler component


Post by juris »

Hello together,

currently we have following problem:

for the scheduler we have buttons to switch between following views:

  • week: current week from Monday to Sunday

  • month: current month seeing all days of the month

  • year: current year seeing all months

If we now switch from week to year and then back to week again the month view is visible.

Any ideas why this happens?

Here our ViewPresets for week, month and year:

export const week = new ViewPreset({
  id: 'week',
  name: 'Week',

  displayDateFormat: 'll',

  timeResolution: {
    unit: 'day'
  },

  headers: [
    {
      unit: 'day',
      dateFormat: 'DD MMM'
    }
  ]
});

export const month = new ViewPreset({
  id: 'month', // Unique id value provided to recognize your view preset. Not required, but having it you can simply set new view preset by id: scheduler.viewPreset = 'myPreset'

  name: 'Month', // A human-readable name provided to be used in GUI, e.i. preset picker, etc.

  timeResolution: {
    unit: 'day'
  },

  headers: [
    {
      unit: 'day',
      dateFormat: 'DD MMM'
    }
  ]
});

export const year = new ViewPreset({
  id: 'year', // Unique id value provided to recognize your view preset. Not required, but having it you can simply set new view preset by id: scheduler.viewPreset = 'myPreset'

  name: 'Year', // A human-readable name provided to be used in GUI, e.i. preset picker, etc.

  timeResolution: {
    unit: 'day'
  },

  headers: [
    {
      unit: 'day',
      dateFormat: 'MMMM YY'
    }
  ]
});

Here is the function for switching between modes:

  ngOnInit(): void {
    PresetManager.add([week, month, year]);
  }

  // schedulerMode is either 'week', 'month' or 'year'
  onChangeSchedulerMode(schedulerMode: SchedulerMode) {
    switch (schedulerMode) {
      case SchedulerMode.week:
        this.scheduler.setTimeSpan(
          moment().startOf('isoWeek').toDate(),
          moment().endOf('isoWeek').toDate()
        );
        break;
      case SchedulerMode.month:
        this.scheduler.setTimeSpan(
          moment().startOf('month').toDate(),
          moment().endOf('month').toDate()
        );
        break;
      case SchedulerMode.year:
        this.scheduler.setTimeSpan(
          moment().startOf('year').toDate(),
          moment().endOf('year').toDate()
        );
        break;
    }
    this.scheduler.viewPreset = schedulerMode.toString();
  }

Thank you in advance and best regards!


Post by marcio »

Hey juris,

This happens because you set the timespan before setting the viewPreset, if you change your code to this will work correctly.

// schedulerMode is either 'week', 'month' or 'year'
  onChangeSchedulerMode(schedulerMode: SchedulerMode) {
    this.scheduler.viewPreset = schedulerMode.toString();
    switch (schedulerMode) {
      case SchedulerMode.week:
        this.scheduler.setTimeSpan(
          moment().startOf('isoWeek').toDate(),
          moment().endOf('isoWeek').toDate()
        );
        break;
      case SchedulerMode.month:
        this.scheduler.setTimeSpan(
          moment().startOf('month').toDate(),
          moment().endOf('month').toDate()
        );
        break;
      case SchedulerMode.year:
        this.scheduler.setTimeSpan(
          moment().startOf('year').toDate(),
          moment().endOf('year').toDate()
        );
        break;
    }
  }

Best regards,
Márcio


Post by juris »

Hey Márcio,

thank you very much for your response, works like a charm!

I would have questions regarding the day mode:

  • We have also a day mode, where you can scroll through the days of the current month. But after switching to the day mode via button instead of the current day, a day in the past is visible at the beginning. So to see the current day you would need to scroll to it.
    The question would be if its possible to define the displayed day when selecting the day mode? Switching to the daymode is done as in the example above with the following ViewPreset:

    export const day = new ViewPreset({
      id: 'day',
      name: 'Day',
    
      defaultSpan: 23,
    
      timeResolution: {
        unit: 'day'
      },
    
      headers: [
        {
          unit: 'day',
          renderer: (date: Date) => {
            // @ts-ignore
            return moment(date, '', LocaleManager.locale.localeName.toLowerCase()).format(
              'dddd, DD.MM.YYYY'
            );
          }
        },
        {
          unit: 'hour',
          dateFormat: 'HH:mm'
        }
      ]
    });
    
  • Is it possible to have a specific time span for each day visible. Currently each day show the time from 00:00 to 23:00 but is it possible to have the time span for example from 08:00 to 18:00?

Thank you very much and best regards!


Post by marcio »

Hi juris,

Glad that worked correctly. Regarding your questions

Best regards,
Márcio


Post by juris »

Hey Márcio,

thank you for your quick response.

The working-time property is working like a charm, thank you!

Unfortunately, the startDate doesn't work for us and I cannot find the property startDate in the ViewPreset which also shows me the IDEA and marks it as an error.

Any ideas why?

Thank you in advance and best regards!


Post by marcio »

Hey juris,

I believe you saw my old response, sorry, ViewPreset doesn't have a startDate property, you need to use the event listener to set a startDate to the Scheduler itself.

Best regards,
Márcio


Post by juris »

Hey Márcio,

added the listener but now it will show us a different date if we switch to the day view so that we need to scroll back to today.

Also if we change the startDate, we can't see the whole month anymore only from today until the end of month.

Is there another way to achieve this or do you think it would be easier/better to have buttons to switch between the days instead of scrolling through them?

Thank you and best regards!


Post by marcio »

Hey Juris,

Perhaps instead of the startDate of the calendar, you could use the setTimeSpan as you did for year/month/week? With that, you could navigate for the whole month.

For the scrolling/buttons to switch the days, it's up to you I believe, it's more like a UX definition.

Best regards,
Márcio


Post by juris »

Hey Márcio,

thank you very much for your support!

I will have a look with the setTimeSpan if this will work and regarding with the scrolling/buttons I will have a look on it with our UX designer then.

Thank you very much and best regards!


Post Reply