[VUE] viewPreset view issue

[aaneeshg]

I have 3 button ' today ,Tow-day and week 'button
when ever click on week button week viewpreset is coming properly then click on Today or Tow-day button it will not show properly (start date and end date is not setting properly)
click Today or Tow-day button after week button click viewpreset is setting but startDate and end date is not setting properly

code for today

	// for today
	 var today = new Date();            

          schedulerConfig.viewPreset = "hourAndDay";                                                                         

            schedulerConfig.startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(),8);
            schedulerConfig.endDate =  new Date(today.getFullYear(), today.getMonth(), today.getDate(),19); 
            

        // for week
         schedulerConfig.viewPreset = "weekAndDay";
        

[mats]

Please show the code you use when it's not working.

[aaneeshg]

App.vue

<template>
    <div id="app">
        <demo-header @duration="durationValue" title="Simple Vue demo">
        <div> And here is the demo header content</div>
        </demo-header>
        <scheduler
          ref               = "scheduler"
          :columns          = "schedulerConfig.columns"
          :resources        = "schedulerConfig.resources"
          :events           = "schedulerConfig.events"
          :minHeight        = "schedulerConfig.minHeight"
          :startDate        = "schedulerConfig.startDate"
          :endDate          = "schedulerConfig.endDate"
          :viewPreset       = "schedulerConfig.viewPreset"
          :rowHeight        = "schedulerConfig.rowHeight"
          :barMargin        = "schedulerConfig.barMargin"
          :multiEventSelect = "schedulerConfig.multiEventSelect"
          :mode             = "schedulerConfig.mode" 
          :workingTime      = "schedulerConfig.workingTime" 
          :forceFit         = "schedulerConfig.forceFit" 
          :eventLayout      = "schedulerConfig.eventLayout"
          :timeRanges       = "schedulerConfig.timeRanges"
          :stripeFeature    = "schedulerConfig.features.strike"
          :timeRangesFeature= "schedulerConfig.features.timeRanges" 
          :eventContextMenuFeature = "schedulerConfig.features.eventContextMenu"
          :non-working-time-feature = "schedulerConfig.nonWorkingTimeFeature"        	                

          :eventTooltipFeature  = "schedulerConfig.features.eventTooltip">
        </scheduler>
    </div>
    

</template>
<script>
    // header
    import DemoHeader from './components/Header.vue';
    // scheduler and its config
   // import Scheduler from 'bryntum-vue-shared/src/Scheduler.vue';
    import Scheduler from './components/Scheduler.vue';
    //import $ from "jquery";
    import schedulerConfig from './components/schedulerConfig.js';
   // import {DateHelper,scheduler } from 'bryntum-scheduler';  

// we need to import it here because it comes from the package
import 'bryntum-scheduler/scheduler.stockholm.css';
// App
export default {
    name: 'app',

    // local components
    components: {
       DemoHeader,
        Scheduler
    },

    // function that returns data
    data() {
        return {
          schedulerConfig,               
          value : ''          
        }
    },// eo function data
     methods: {
    durationValue(value) {              
      this.$emit('duration', value);           
      this.value = value; 
      var today = new Date(); 
      var tow_days = new Date(today.getTime()+ 1*24*60*60*1000);  
      schedulerConfig.viewPreset = "hourAndDay";       
      if(value == 'day') {                                                          
        schedulerConfig.startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(),8);
        schedulerConfig.endDate =  new Date(today.getFullYear(), today.getMonth(), today.getDate(),19);                                    
       // this.$refs.scheduler.submit(value);
      }else if(value == 'Tow-day') {                                  
        schedulerConfig.startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(),8);                                                                                          
        schedulerConfig.endDate =  new Date(tow_days.getFullYear(), tow_days.getMonth(), tow_days.getDate(),19);                       
      }else if(value == 'week') {
       schedulerConfig.viewPreset = "weekAndDay";            
      }else if(value == 'Pack') {           
        schedulerConfig.eventLayout = "pack";
      } else if(value == 'stack') {           
        schedulerConfig.eventLayout = "stack";
      } else if(value == 'overlap') {           
        schedulerConfig.eventLayout = "overlap";
      } else {
       // this.$refs.scheduler.submit(value);
        var selectDate = new Date(value);
        schedulerConfig.startDate = new Date(selectDate.getFullYear(), selectDate.getMonth(), selectDate.getDate(),8);
        schedulerConfig.endDate =  new Date(selectDate.getFullYear(), selectDate.getMonth(), selectDate.getDate(),19);             
      }
    },                            
  },
  computed: {
    currentProperties:function() {      
      var today = new Date();             
      var month = today.getMonth();
      schedulerConfig.startDate = new Date(today.getFullYear(), month, today.getDate(),8);
      schedulerConfig.endDate =  new Date(today.getFullYear(), month, today.getDate(),19); 
    }
  },
  mounted() {               
    //schedulerConfig.viewPreset = "hourAndDay"; 
   //const today = DateHelper.clearTime(new Date()); today.setHours(8); scheduler.setTimeSpan(today, DateHelper.add(today, 19, 'hour'));                                
  },         
} 

</script>

<style lang="scss">
    @import './App.scss';
</style>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

&.router-link-exact-active {
  color: #42b983;
}
  }
}
.mycolor {
  background-color: aqua;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
</style>

SchdulerConfig.js

import {AjaxHelper} from 'bryntum-scheduler';

const resources = [
    { id : 'r1', name : 'Mike'},
    { id : 'r2', name : 'Linda' },
    { id : 'r3', name : 'Don'},
    { id : 'r4', name : 'Karen'},
    { id : 'r5', name : 'Doug'},
    { id : 'r6', name : 'Peter'},
    { id : 'r7', name : 'Sam'},
    { id : 'r8', name : 'Melissa'},
    { id : 'r9', name : 'John'},
    { id : 'r10', name : 'Ellen'}
],
events = [
    {
        resourceId : 'r1',
        startDate  : new Date(2020, 5, 29, 10),
        endDate    : new Date(2020, 5, 29, 12),
        name       : 'Click me',
        iconCls    : 'b-fa b-fa-mouse-pointer',
        eventType: 'meeting',
        canceled: true
    },  

    {
        resourceId : 'r1',
        startDate  : new Date(2020, 5, 29, 10),
        endDate    : new Date(2020, 5, 29, 12),
        name       : 'Click Session',
        iconCls    : 'b-fa b-fa-mouse-pointer',
        eventType: 'meeting session',
        canceled: true
    }, 
    {
    resourceId : 'r2',
        startDate  : new Date(2020, 5, 29, 12),
        endDate    : new Date(2020, 5, 29, 13, 30),
        name       : 'Drag me',
        iconCls    : 'b-fa b-fa-arrows-alt',
        eventType: 'meeting'
    },
    {
        resourceId : 'r3',
        startDate  : new Date(2020, 5, 29, 14),
        endDate    : new Date(2020, 5, 29, 16),
        name       : 'Double click me',
        eventColor : 'purple',
        iconCls    : 'b-fa b-fa-mouse-pointer',
        eventType: 'activity',
        done: true
    },
    {
        resourceId : 'r4',
        startDate  : new Date(2020, 5, 29, 8),
        endDate    : new Date(2020, 5, 29, 11),
        name       : 'Right click me',
        iconCls    : 'b-fa b-fa-mouse-pointer',
        eventType: 'activity'
    },
    {
        resourceId : 'r5',
        startDate  : new Date(2020, 5, 29, 15),
        endDate    : new Date(2020, 5, 29, 17),
        name       : 'Resize me',
        iconCls    : 'b-fa b-fa-arrows-alt-h'
    },
    {
        resourceId : 'r6',
        startDate  : new Date(2020, 5, 29, 16),
        endDate    : new Date(2020, 5, 29, 19),
        name       : 'Important meeting',
        iconCls    : 'b-fa b-fa-exclamation-triangle',
        eventColor : 'red'
    },
    {
        resourceId : 'r7',
        startDate  : new Date(2020, 5, 29, 6),
        endDate    : new Date(2020, 5, 29, 8),
        name       : 'Sports event',
        iconCls    : 'b-fa b-fa-basketball-ball'
    },
    {
        resourceId : 'r8',
        startDate  : new Date(2020, 5, 29, 9),
        endDate    : new Date(2020, 5, 29, 11, 30),
        name       : 'Dad\'s birthday!',
        iconCls    : 'b-fa b-fa-birthday-cake',
        style      : 'background-color : teal; font-size: 18px'
    },
    {
        resourceId : 'r1',
        startDate  : new Date(2020, 5, 30, 10),
        endDate    : new Date(2020, 5, 30, 12),
        name       : 'Click me',
        iconCls    : 'b-fa b-fa-mouse-pointer',
        eventType: 'meeting',
        canceled: true
    },  

    {
    resourceId : 'r2',
        startDate  : new Date(2020, 5, 30, 12),
        endDate    : new Date(2020, 5, 30, 13, 30),
        name       : 'Drag me',
        iconCls    : 'b-fa b-fa-arrows-alt',
        eventType: 'meeting'
    },
    {
        resourceId : 'r3',
        startDate  : new Date(2020, 5, 30, 14),
        endDate    : new Date(2020, 5, 30, 16),
        name       : 'Double click me',
        eventColor : 'purple',
        iconCls    : 'b-fa b-fa-mouse-pointer',
        eventType: 'activity',
        done: true
    },
    {
        resourceId : 'r4',
        startDate  : new Date(2020, 5, 30, 8),
        endDate    : new Date(2020, 5, 30, 11),
        name       : 'Right click me',
        iconCls    : 'b-fa b-fa-mouse-pointer',
        eventType: 'activity'
    },
    {
        resourceId : 'r5',
        startDate  : new Date(2020, 5, 30, 15),
        endDate    : new Date(2020, 5, 30, 17),
        name       : 'Resize me',
        iconCls    : 'b-fa b-fa-arrows-alt-h'
    },
    {
        resourceId : 'r6',
        startDate  : new Date(2020, 5, 30, 16),
        endDate    : new Date(2020, 5, 30, 19),
        name       : 'Important meeting',
        iconCls    : 'b-fa b-fa-exclamation-triangle',
        eventColor : 'red'
    },
    {
        resourceId : 'r7',
        startDate  : new Date(2020, 5, 30, 6),
        endDate    : new Date(2020, 5, 30, 8),
        name       : 'Sports event',
        iconCls    : 'b-fa b-fa-basketball-ball'
    },
    {
        resourceId : 'r8',
        startDate  : new Date(2020, 5, 30, 9),
        endDate    : new Date(2020, 5, 30, 11, 30),
        name       : 'Dad\'s birthday!',
        iconCls    : 'b-fa b-fa-birthday-cake',
        style      : 'background-color : teal; font-size: 18px'
    },
];

  const timeRanges = [
  {
    id: 1,
    startDate: new Date(2020,5,29, 8),
    endDate: new Date(2020,5,29, 9),   

    name: "Morning coffee",
    cls: 'coffee'
    

},
{
  id: 1,
  startDate: new Date(2020,5, 29, 18),
  endDate: new Date(2020,5, 29, 19),   
  name: "Morning coffee",
  cls: 'coffee'
  
  }

]

export default {
  nonWorkingTimeFeature : true,
  eventStore : {
    // Additional fields added to EventModel
    fields : ['done', 'canceled', 'locked']
},
  features : {
    eventTooltip : {          

      template : () => AjaxHelper.get(`https://jsonplaceholder.typicode.com/todos/1`).then(response => response.text())
    },
    strike:true,
    timeRanges: {
      enableResizing      : false,
      showCurrentTimeLine : true,
      showHeaderElements  : true
    },
    eventContextMenu : {
      items : {
        moveLeft : {
            text : 'Move left',
            icon : 'b-fa b-fa-fw b-fa-arrow-left',
            cls  : 'b-separator',
            onItem({ eventRecord }) {
              console.log(eventRecord.startDate);
                //eventRecord.startDate = DateHelper.add(eventRecord.startDate, -1, 'hour');
            }
        },
        moveRight : {
            text : 'Move right',
            icon : 'b-fa b-fa-fw b-fa-arrow-right',
            onItem({ eventRecord }) {
              console.log(eventRecord.startDate);
                //eventRecord.startDate = DateHelper.add(eventRecord.startDate,25, 'hour');
            }
        },
        split : {
            text : 'Split',
            icon : 'b-fa b-fa-fw b-fa-cut',
            onItem({ eventRecord }) {
                eventRecord.split();
            }
        },
        lock : {
            text : 'Lock',
            icon : 'b-fa b-fa-fw b-fa-lock',
            cls  : 'b-separator',
            onItem({ eventRecord }) {
                eventRecord.locked = true;
                eventRecord.draggable = false;
                eventRecord.resizable = false;
            }
        }
    },
    // Process items before context menu is shown, add or remove or prevent it
    processItems({ eventRecord, items }) {
      if (eventRecord.eventType === 'meeting') {
        console.log('coming inside the eventType meeting');
          // Add a custom item for meetings
          items.cancel = {
              text : 'Cancel',
              icon : 'b-fa b-fa-fw b-fa-ban',
              cls  : 'b-separator',
              onItem({ eventRecord }) {
                  eventRecord.canceled = true;
              }
          };
      }

  if (eventRecord.eventType === 'activity') {
    console.log('coming inside the eventType meeting');

      // Remove "Edit" and "Delete" items for activities
      items.editEvent = items.deleteEvent = false;

      // Add a "Done" item
      items.done = {
          text   : 'Done',
          icon   : 'b-fa b-fa-fw b-fa-check',
          cls    : 'b-separator',
          weight : 500,
          onItem({ eventRecord }) {
              eventRecord.done = true;
          }
      };
  }

  // Not possible to lock canceled or completed events, disable the item
  if (eventRecord.canceled || eventRecord.done) {
      items.lock.disabled = true;
  }

  // Prevent menu for "locked" event
  return !eventRecord.locked;
  }
    },
    

},
  minHeight: '20em',
  resources: resources,
  events: events,
  timeRanges: timeRanges,
  startDate: new Date(2020,5,29, 8),
  endDate: new Date(2020,5, 29, 19),
  viewPreset: 'hourAndDay',
  rowHeight: 50,
  barMargin: 5,
  multiEventSelect: true,
  eventLayout      : 'pack',
  workingTime : {fromHour : 8,toHour : 19},
  forceFit : true,

   columns : [
        {                   

            text       : 'NAME',
            field      : 'name',
            width      : 100,
            region     : 'left',            

            htmlEncode : false,            

            renderer   : ({ record }) => `${record.name} <div id="location_${record.id}" style="margin-left: 10px;" class="location b-fa b-fa-user"></div>`,            

        }           

    ], 
};

Header.vue

<template>
    <div id ="tools"></div>
</template>

<script>
    // we import scheduler.umd for IE11 compatibility only. If you don't use IE import:
    import { DateHelper, WidgetHelper,Scheduler } from 'bryntum-scheduler';  

    //import scheduler from 'bryntum-vue-shared/src/Scheduler.vue';   

    // import { Fullscreen, WidgetHelper } from 'bryntum-scheduler/scheduler.umd';

// export the button
export default {
    name : 'datehelper-button',
     props : {            
        scheduleObj : String
    }, data() {
        return {                        
        }
    },// eo function data

    mounted() {                                
        var self = this;
        WidgetHelper.append([{
            type    : 'button',
            icon    : 'b-icon b-fa b-fa-angle-right',
            color   : 'b-blue b-raised',
            tooltip : 'View next day',
            onAction() {                                        
            }
        },           
        {
            type  : 'button',
            ref   : 'weekButton',
            color : 'b-blue b-raised',
            width : 60,
            text  : 'Week',
            onAction() {
                self.$emit('duration', 'week');              
              /* const week = DateHelper.clearTime(new Date());                   
                week.setHours(5);                   
                Scheduler.setTimeSpan(week, DateHelper.add(week, 18, 'hour'));*/
            }
        },
         {
            type  : 'button',
            ref   : 'twoButton',
            color : 'b-blue b-raised',
            width : 75,
            text  : 'Tow-day',
            onAction() {
                self.$emit('duration', 'Tow-day');
             /*   const towday = DateHelper.clearTime(new Date());
                today.setHours(5);
                Scheduler.setTimeSpan(towday, DateHelper.add(twoday, 18, 'hour'));*/
            }
        },
         {
            type  : 'button',
            ref   : 'todayButton',
            color : 'b-blue b-raised',
            width : 65,
            text  : 'Today',
            onAction() {
                self.$emit('duration', 'day');                                   
               // const today = DateHelper.clearTime(new Date()); today.setHours(8); scheduler.setTimeSpan(today, DateHelper.add(today, 15, 'hour'));
            }
        },
         {
            type    : 'button',
            icon    : 'b-icon b-fa b-fa-angle-left',
            color   : 'b-blue b-raised',
            tooltip : 'View previous day',
            onAction() {
                Scheduler.shiftPrevious();
            }
        },
        {
            type      : 'datefield',
            ref       : 'datefield',
            label     : 'Select date',
            width     : 250,
            height    : 38,             
            value     : new Date(),
            editable  : true,
            cls       : 'b-bright',
            listeners : {  
               change({ dateField, value,userAction }) {
                    value =>   new Date('') ;
                    self.$emit('duration', value);                       
               }                      
                //change : ({ value }) => Scheduler.setTimeSpan(DateHelper.add(value, 8, 'hour'), DateHelper.add(value, 19, 'hour'))
            }
        },
        {
            type        : 'button',
            ref         : 'noneButton',
            color       : 'b-blue b-raised',
            minWidth    : 80,
            text        : 'Overlap',                
            toggleGroup : 'layoutType',
            onAction     ()  {
                self.$emit('duration', 'overlap');  
            }
        },
        {
            type        : 'button',
            ref         : 'stackButton',
            color       : 'b-blue b-raised',
            minWidth    : 80,
            text        : 'Stack',               
            toggleGroup : 'layoutType',
             onAction     ()  {
                self.$emit('duration', 'stack');  
            }
        },
        {
            type        : 'button',
            ref         : 'packButton',
            color       : 'b-blue b-raised',
            minWidth    : 80,
            text        : 'Pack',
            pressed     : true,
            toggleGroup : 'layoutType',
            onAction     ()  {
                self.$emit('duration', 'Pack');  
            }
        },
        {
            type                 : 'textfield',
            ref                  : 'filterByName',
            icon                 : 'b-fa b-fa-filter',
            cls                  : 'b-bright',
            placeholder          : 'Find tasks by name',
            clearable            : true,
            keyStrokeChangeDelay : 100,
            triggers             : {
                filter : {
                    align : 'start',
                    cls   : 'b-fa b-fa-filter'
                }
            },
            listeners : {  
            onChange({ value,filterByName }) {
                alert(" value " + value + " " +scheduler );
                value = value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');                        
                // Replace previous filtering fn with a new filter
                scheduler.eventStore.filter({
                    filters : event => event.name.match(new RegExp(value, 'i')),
                  
                    replace : true
                });
            }
        }
        }],
        { insertFirst : document.getElementById('tools') || document.body });                   
    },    
} 

</script>

[mats]

Also please describe what you mean by

it will not show properly (start date and end date is not setting properly)

Please show what you expect to see, and which code you execute to get it.

[aaneeshg]

I have print my startDate and endDate it is setting properly but view is not proper.

can you check that attached screenshot? could you please sagest good solution

[sergey.maltsev]

Hi, aaneeshg!

There's no point in setting fields in schedulerConfig at runtime.
Config is just an object used to create scheduler instance.

Use this.$refs.scheduler.schedulerEngine instead.

Please check Accessing the Scheduler engine section in integration guide.
https://www.bryntum.com/docs/scheduler/#guides/integration/vue.md

The code would be like this.

const
    scheduler = this.$refs.scheduler.schedulerEngine;

if (value === 'day') {
    scheduler.startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 8);
    scheduler.endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 19);
    scheduler.viewPreset = 'hourAndDay';
}
else if (value === 'Tow-day') {
    scheduler.startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 8);
    scheduler.endDate = new Date(tow_days.getFullYear(), tow_days.getMonth(), tow_days.getDate(), 19);
    scheduler.viewPreset = 'hourAndDay';
}