How to change the default Business/WorkDay Hours

[Paulo]

I am developing a software in which I integrate the scheduler component for VUE. By default the hours associated with business /workday are set from 8 AM to 4 PM. My question is how can I change these same hours to, for example, from 9 AM to 6 PM?

This is my code 

<template>
  <div v-if="this.userRole === 'Admin' || this.userRole === 'Admin Client'">
    <Scheduler :data-items="sampleData" :default-date="displayDate" :views="views" :view="view" :editable="editable" :timezone="'Europe/Lisbon'" @datachange="handleDataChange" :form="'formRender'" :allDayEditor="'customAllDayEditor'">
      <template v-slot:formRender="{ props }">
        <customEditForm :task="props.dataItem" @selectedNormChange="handleSelectedNormChange" @responsiblesChange="handleResponsiblesChange" @cancel="props.onCancel" />
      </template>
    </Scheduler>
  </div>
  <div v-else>
    <Scheduler :data-items="sampleData" :default-date="displayDate" :views="views" :view="view" :editable="editable" :timezone="'Europe/Lisbon'" @datachange="handleDataChange" :form="'formRender'" :allDayEditor="'customAllDayEditor'">
      <template v-slot:formRender="{ props }">
        <customEditForm :task="props.dataItem" @selectedNormChange="handleSelectedNormChange" @responsiblesChange="handleResponsiblesChange" @cancel="props.onCancel" />
      </template>
    </Scheduler>
  </div>
</template>
<script>
  import '@progress/kendo-date-math/tz/Europe/Lisbon';
  import {
    Scheduler
  } from '@progress/kendo-vue-scheduler';
  import EditorForm from './FormEditor.vue';
  import {
    postCreateTask,
    putCreateTask,
    deleteTask,
    getTasksByAudit
  } from "../Services/tasksService";
  export default {
    name: 'Calendar',
    components: {
      Scheduler,
      customEditForm: EditorForm,
    },
    props: {
      selectedNorm: {
        type: String,
        default: null,
      },
      isNormObligatory: {
        type: Boolean,
        default: false,
      },
      userRole: {
        type: String,
        required: true,
      },
    },
    created() {
      let queryString = window.location.search;
      let urlParams = new URLSearchParams(queryString);
      if (urlParams.has('task')) {
        this.audit_id = urlParams.get('task');
        this.status = "Scheduler";
        this.place = "Scheduler";
        this.getData()
      } else {
        //ERRO mostar mensagem de erro generico.
      }
      this.displayDate = new Date(); // Update displayDate to current date
    },
    data() {
      return {
        view: 'day',
        valueProgressBar: 0,
        success: false,
        editable: {
          add: true,
          remove: true,
          edit: true,
        },
        views: [{
          name: 'day',
          title: 'Day View'
        }, {
          name: 'workweek',
          title: 'Week View'
        }, {
          name: 'month',
          title: 'Month View'
        }, {
          name: 'agenda',
          title: 'Agenda View'
        }, ],
        sampleData: [],
        displayDate: new Date(),
        formMode: '', // Propriedade para controlar o modo do formulário
        selectedNormValue: null, // Nova propriedade para armazenar o valor da norma selecionada
        isNormObligatoryValue: false,
        selectedResponsiblesValue: null,
      };
    },
    methods: {
      .... // defined methods
    }
< script >

[Petar]

Hello, Paulo.

I can see that there is no active trial or commercial license associated with your account. Before we continue furhter with the current discussion, may I ask you to start your free trial license from here, and once you are ready, write us back so we can continue the communication. 

Thank you for your cooperation and understanding.

[Paulo]

Hi, thanks for that. 
I think i already started the  free trial license as you requested.

[Petar]

Hi, Paulo.

Thank you for your message. The business hours in the different Native Scheduler views can be controlled using the workDayStart and workDayEnd configuration props of the different views. In this StackBlitz example, we have the following definition:

views: [
{
    name: 'day',
    title: 'Day',
    workDayStart: '09:00',
    workDayEnd: '18:00',
},
{
    name: 'week',
    title: 'Week',
    workDayStart: '09:00',
    workDayEnd: '18:00',
},
{
    name: 'workweek',
    title: 'Work week',
    workDayStart: '09:00',
    workDayEnd: '18:00',
},
{
    name: 'month',
    title: 'Month',
},
{
    name: 'agenda',
    title: 'Agenda',
},
],

The marked in yellow definitions set the business hours from 9:00h to 18:00h.

Please check the shared above example and let me know if it demonstrates what you need to implement in your project.

If you have additional questions or need furhter assistance with the current thread, I will be happy to help you.

[Paulo]

Yes, that's right, I was making the definition at the scheduler level and not at the level of each view individually. Thank you, it worked as expected and intended.

[Petar]

Great! I am happy to hear that you managed to achieve the targeted functionality.

For your information, if you need furhter assistance with any of the Kendo UI for Vue components, having a Trial license allows you to submit support tickets that are handled with priority by our team. You can use this benefit for future tickets while you are evaluating the product.