Print

[Adrien Pech]

Hello,

I have found the following example for printing the scheduler:

https://ej2.syncfusion.com/vue/demos/?_ga=2.61042280.590323719.1603698492-1425821287.1601882347#/material/schedule/print.html

My scheduler contains several resources and I want to print views like the Timeline Views. Therefore I have the following questions:

1) Is it possible to set the scaling?

2) Is it possible to determine the time span?

3) Is it possible to select only certain resources for printing?

At this time I can only print a part of the current view. It would be good to print at least the complete view I have selected.

Regards Adrien

[Ravikumar Venkatesan]

Hi Adrien, 

Greetings from Syncfusion support. 

1) Is it possible to set the scaling? 

2) Is it possible to determine the time span? 

We have validated your above query at our end and achieved your above requirement with the help of the timeScale property of the Schedule like the below code. 

<script> 

import { SchedulePlugin, TimelineViews, Print } from "@syncfusion/ej2-vue-schedule"; 

 

Vue.use(SchedulePlugin); 

export default { 

  data() { 

    return { 

      timeScale: { 

        enable: true, 

        interval: 120, 

        slotCount: 1, 

      } 

    }; 

  }, 

  provide: { 

    schedule: [TimelineViews, Print], 

  }, 

}; 

</script> 

3. Is it possible to select only certain resources for printing? 

We have validated your above query at our end. We have achieved your requirement with the help of the addResource and removeResource methods of the Schedule like the below code. 

    onPrintIconClick: function () { 

      let scheduleObj = this.$refs.ScheduleObj; 

      scheduleObj.removeResource(this.ownerDataSource[0].Id, "Owners"); 

      window.setTimeout(() => { 

        scheduleObj.print(); 

        window.setTimeout(() => { 

          scheduleObj.addResource(this.ownerDataSource[0], "Owners"); 

        }, 2000); 

      }, 1000); 

    } 

Sample: https://codesandbox.io/s/vue-template-forked-hot8d?file=/src/App.vue 

Kindly try the above sample and get back to us if you need any further assistance. 

API(timeScale property): https://ej2.syncfusion.com/vue/documentation/api/schedule/#timescale 

API(addResource method): https://ej2.syncfusion.com/vue/documentation/api/schedule/#addresource 

API(removeResource): https://ej2.syncfusion.com/vue/documentation/api/schedule/#removeresource 

Regards, 

Ravikumar Venkatesan 

[Adrien Pech]

Hello,

thank you for the quick response. The suggestion already goes in the right direction, but I would like to have a kind of popup window where the user can choose the resources, the interval, the slot count and the time window in the best case. If there was a possibility of this kind I would be deeply grateful for an example.

Regards Adrien

[Adrien Pech]

UPDATE

I have found out the following:

- you can adjust the interval with 

document.querySelector('#Schedule').ej2_instances[0].timeScale.interval = value;

- the number of slots with

document.querySelector('#Schedule').ej2_instances[0].timeScale.slotCount = value;

- the date with

document.querySelector('#Schedule').ej2_instances[0].selectedDate = value;

- select the current view with

document.querySelector('#Schedule').ej2_instances[0].currentView=value;

But unfortunately I can't find a way how to adjust the interval size of each view during runtime, which is really important for my use case. 

Furthermore the scheduler does not load when I adjust the interval size in the views "Day" and "TimelineDay".

Reference: https://ej2.syncfusion.com/vue/documentation/schedule/views/#extending-view-intervals

Regards Adrien

[Ravikumar Venkatesan]

Hi Adrien, 

Thanks for the update. 

We have validated your reported query at our end. Based on your query we suspect that your requirement is needed to dynamically change the corresponding view interval values. We have achieved your requirement with the help of the below code. We have prepared a sample for your reference and it can be available below. 

[App.Vue] 

<template> 

  <div> 

    <div style="display: flex"> 

      View Interval: 

      <ejs-dropdownlist id="interval" :dataSource="intervalData" :value="intervalValue" :change="changeInterval" popupHeight="200px"></ejs-dropdownlist> 

    </div> 

    <div id="app"> 

      <div id="container"> 

        <ejs-schedule id="Schedule" ref="ScheduleObj" width="100%" height="550px" :selectedDate="selectedDate" :timeScale="timeScale" :group="group" :actionBegin="onActionBegin"> 

          <e-views> 

            <e-view option="TimelineDay" :interval="timelineDayInterval" ></e-view> 

            <e-view option="Day" :interval="dayinterval"></e-view> 

          </e-views> 

        </ejs-schedule> 

      </div> 

    </div> 

  </div> 

</template> 

 

<script> 

import { SchedulePlugin, TimelineViews, Print, Day } from "@syncfusion/ej2-vue-schedule"; 

import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns"; 

Vue.use(DropDownListPlugin); 

 

Vue.use(SchedulePlugin); 

export default { 

  data() { 

    return { 

      dayinterval: 1, 

      timelineDayInterval: 1, 

      intervalValue: "1", 

      intervalData: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"], 

  }, 

  provide: { 

    schedule: [Day, TimelineViews, Print], 

  }, 

  methods: { 

    changeInterval: function (args) { 

      let scheduleObj = this.$refs.ScheduleObj.ej2Instances; 

      scheduleObj.views[scheduleObj.viewIndex].interval = parseInt(args.value, 10); 

      scheduleObj.refresh(); 

    }, 

  }, 

}; 

</script> 

Sample: https://codesandbox.io/s/vue-template-forked-wv326?file=/src/App.vue 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan