1. Home
  2. Forum
  3. Vue
  4. Year View + TimelineView displayed at the same time in one component.

Year View + TimelineView displayed at the same time in one component.

Hello Syncfusion Team,

I am trying to get the following view using the Scheduler of Syncfusion: 



Would it be possible to display two views with one component at the same time? If possible, the data from one database should be loaded only once and if I select a day in the year view, the timeline view should switch to that day. If this is not possible, would it be possible to adjust the Calendar component? So that the same view as above is possible and both components are connected? With both variants the performance load should be kept as low as possible. I am also open for further suggestions.

Best Regards!

7 Replies 1 reply marked as answer
HB Hareesh Balasubramanian Syncfusion Team October 12, 2020 11:16 AM UTC

Hi Adrien, 

Greetings from Syncfusion Support..! 

We have validated your shared query “Would it be possible to display two views with one component at the same time?” ay our end. And we suspect that your requirement is to render both views (Year and TImelineYear) in the same scheduler, but regret to let you know this is not feasible with our Scheduler’s current architecture. You can achieve it by having two scheduler in the same page and have two views in UI. Please share more details about your requirement like whether you need to perform CRUD actions in one view or both so that we can prepare sample and help you on this at earliest. 

Regards, 
Hareesh 


AP Adrien Pech October 12, 2020 11:33 AM UTC

Hey Hareesh,

I need to perform CRUD actions on both Views (Year View and Timeline View). Is it also possible to select a day in the Year View and then switch to that day in the Timeline View, when using two scheduler components? I would probably have to load the data for both components using the DataManager? A sample would be perfect!

Best Regards!

HB Hareesh Balasubramanian Syncfusion Team October 13, 2020 09:47 AM UTC

Hi Adrien, 

Thanks for the update. 

We have validated both the queries at our end and for that, we have prepared a CRUD sample which can be downloaded from the following link. 


Q1: I need to perform CRUD actions on both Views (Year View and Timeline View) and I would probably have to load the data for both components using the DataManager? 

We have prepared a client sample using two Scheduler component in the same page and the data source for those schedulers are loaded from a single service. Kindly refer to the below code snippet, 

Code snippet: 
<template> 
    <div id='app'> 
        <div id='container'> 
        <ejs-schedule id='Schedule1' height='800px' width='70%' :navigating="navigating" :eventSettings='eventSettings' :selectedDate='selectedDate'> 
                <e-views> 
                    <e-view option='Year'></e-view> 
                    <e-view option='Day'></e-view> 
                </e-views> 
            </ejs-schedule> 
            <ejs-schedule id='Schedule2' height='800px' width='100%' :eventSettings='eventSettings' :currentView="currentView" :selectedDate='selectedDate'> 
                <e-views> 
                    <e-view option='TimelineDay'></e-view> 
                    <e-view option='TimelineYear'></e-view> 
                </e-views> 
            </ejs-schedule> 
        </div> 
    </div> 
</template> 
<script> 
    import Vue from 'vue'; 
    import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data'; 
    import { SchedulePlugin, Year, Day, TimelineYear, TimelineViews } from '@syncfusion/ej2-vue-schedule'; 
    Vue.use(SchedulePlugin); 

    var dataManger = new DataManager({ 
        url: 'http://localhost:54738/Home/LoadData', // Here need to mention the web api sample running path 
        crudUrl: 'http://localhost:54738/Home/UpdateData', 
        crossDomain: true, 
        adaptor: new UrlAdaptor 
    }); 
    export default { 
        data () { 
            return { 
                selectedDate: new Date(2018, 1, 15), 
                eventSettings: { dataSource: dataManger }, 
                currentView: "TimelineYear" 
            } 
        }, 
        provide: { 
            schedule: [Year, TimelineYear, Day, TimelineViews] 
        }, 
        methods: { 
            navigating: function (args) { 
                if (args.action == "view") { 
                    args.cancel = true; 
                    var date = document.querySelector('#Schedule1').ej2_instances[0].selectedDate; 
                    var schObj = document.querySelector('#Schedule2').ej2_instances[0]; 
                    schObj.selectedDate = date; 
                    schObj.currentView = "TimelineDay"; 
                } 
            } 
        } 
    } 
</script> 
<style> 
    div#container { 
        display: flex; 
    } 
</style> 

Q2: Is it also possible to select a day in the Year View and then switch to that day in the Timeline View, when using two scheduler components? 

This can be achieved using navigating event of the Scheduler and for further reference, kindly refer to the below code snippets and same can be viewed in the above CRUD sample. 

Code snippet: 
            navigating: function (args) { 
                if (args.action == "view") { 
                    args.cancel = true; 
                    var date = document.querySelector('#Schedule1').ej2_instances[0].selectedDate; 
                    var schObj = document.querySelector('#Schedule2').ej2_instances[0]; 
                    schObj.selectedDate = date; 
                    schObj.currentView = "TimelineDay"; 
                } 
            } 

And for further reference, we have taken the screenshot of the above sample and also kindly refer to the below UG link, 

Image: 
 


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

Regards, 
Hareesh 


Marked as answer
AP Adrien Pech October 14, 2020 10:03 AM UTC

Hey Hareesh,

thank you for the example. It works almost perfectly. But there still seems to be two problems. 

The navigation between both views seems to work only once. After that it is necessary to reload the application to navigate again. 

The other problem is about the CRUD operations. If I create/delete/change an appointment in the timeline view, how can I update it in the year view at the same time? 

Which adjustments to the code do I have to make to trigger the desired behavior?

Best Regards!

HB Hareesh Balasubramanian Syncfusion Team October 15, 2020 09:49 AM UTC

Hi Adrien, 

Thanks for the update. 

We have validated both the queries at our end and for that we have modified our previously updated sample and it can be downloaded from the following link, 


Q1: The navigation between both views seems to work only once. After that it is necessary to reload the application to navigate again 

We can able to replicate your reported problem at our end and it can be override by using navigating and actionComplete events of the Scheduler. Kindly refer to the below code snippet and the same can be viewed in the above sample. 

            navigating: function (args) { 
                if (args.action == "view") { 
                    var date = document.querySelector('#Schedule1').ej2_instances[0].selectedDate; 
                    var schObj = document.querySelector('#Schedule2').ej2_instances[0]; 
                    schObj.selectedDate = date; 
                    schObj.currentView = "TimelineDay"; 
                } 
            }, 
            actionCompleteSch1: function (args) { 
                if (args.requestType == "viewNavigate") { 
                    document.querySelector('#Schedule1').ej2_instances[0].currentView = "Year"; 
                } 
            }, 

Q2: The other problem is about the CRUD operations. If I create/delete/change an appointment in the timeline view, how can I update it in the year view at the same time? 

This can be achieved using the actionComplete event of the Scheduler and for further reference, kindly refer to the below code snippet and the same can be viewed in the above sample. 

            actionCompleteSch2: function (args) { 
                document.querySelector('#Schedule1').ej2_instances[0].refresh(); 
            } 

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

Regards, 
Hareesh 


AP Adrien Pech October 19, 2020 01:24 PM UTC

Hey Hareesh,

unfortunately there is a problem with the solution that involves reloading the year view. If the year view loads faster than the timeline view, the year view is reloaded (problem can be seen in the video in the attachment). 

Another question would be regarding the navigation between the two views. Currently you have to navigate through the Popup window,


but I would like to navigate directly over the date. 



Thanks again for the fast and good support.

Best regards!

Attachment: 20201019_14h52_38_d47b2bd.zip

HB Hareesh Balasubramanian Syncfusion Team October 20, 2020 12:07 PM UTC

Hi Adrien, 

Thanks for the update. 

We have validated your both the queries at our end and modified our previously updated CRUD sample which can be downloaded from the following link. 


Q1: unfortunately there is a problem with the solution that involves reloading the year view. If the year view loads faster than the timeline view, the year view is reloaded (problem can be seen in the video in the attachment). 

We have watched your shared video demo at our end and suspect that your requirement is to render the TimelineYear view with the resource functionality and for that we have modified our sample by adding resources for the Scheduler and both the Scheduler are rendering in a similar time of initial loading and while preforming CRUD actions also and the same can be viewed in the above sample. 

And for further reference, we have taken a vide demo of it which can be downloaded from the below link, 

Q2: Another question would be regarding the navigation between the two views. Currently you have to navigate through the Popup window. 

The above requirement can be achieved using popupOpen event of the scheduler component and kindly refer the below code snippets for your reference and the same can be viewed in the above sample. 

            popupOpen: function (args) { 
                if (args.type == "EventContainer") { 
                    var date = args.data.date; 
                    var schObj = document.querySelector('#Schedule2').ej2_instances[0]; 
                    schObj.selectedDate = date; 
                    args.cancel = true; 
                } 
            }, 

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

Regards, 
Hareesh 


Loader.
Up arrow icon