We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

TimelineYear View but for more than one year or even individual time frame

Dear Forum,

anybody has an idea if and possibly how it is possible to display a timeline view that exceeds the duration of one year?

Currently "TimelineYear" view, but that is limited to a single year.

We need to show a timeline with an individual timeframe e.g. last 3 months until end of the following year.

Is there any option to specify a custom timeframe for a timeline?


Any help is appreciated, thanks a lot in advance!


4 Replies 1 reply marked as answer

SR Swathi Ravi Syncfusion Team March 31, 2023 08:33 AM UTC

Hi Kris,


Based, on your shared details we suspect that your requirement is to render each year until the following year third month. You can achieve this requirement by using the Schedule’s firstMonthOfYear and monthsCount property, as shown in the below snippet.


Api: https://ej2.syncfusion.com/vue/documentation/api/schedule/#firstmonthofyear

                https://ej2.syncfusion.com/vue/documentation/api/schedule/#monthscount


Demo: https://ej2.syncfusion.com/react/demos/#/bootstrap5/schedule/year


[App.vue]

<template>

   <div id='app'>

       <ejs-schedule :firstMonthOfYear="firstMonthOfYear" :monthsCount="monthsCount">

           <e-views>

               <e-view option='TimelineYear'></e-view>

            </e-views>

       </ejs-schedule>

   </div>

</template>

<script>

export default {

    data() {

        return {

            firstMonthOfYear: 0,

            monthsCount:15,

    };

</script>


Regards,

Swathi Ravi


Attachment: ej2vueschedulesample_e4b4045d.zip

Marked as answer

KR Kris March 31, 2023 09:08 AM UTC

Thanks a lot Swathi,

the information was very useful and helped me find a solution.

Note for others: 

the value of "firstMonthOfYear" can also be a negative number, allowing to start also in the previous yet with the Schedule.



KR Kris March 31, 2023 09:33 AM UTC

@Swathi: one follow up question: 

Is there a similar option for the TimelineMonth view?

Some setting that would allow to extend the TimelineMonth view to also display a longer period than just one month.
Client just likes the layout of the Month view better than 
TimelineYear view and thus would like to display longer period.



VD Vinitha Devi Murugan Syncfusion Team April 3, 2023 10:54 AM UTC

Hi Kris,


You can extend the display of the default number of months on the TimelineMonth view by setting the interval for the TimelineMonth option within the "views" property, as depicted in the following code.


<e-view option="TimelineMonth" interval="5"></e-view>


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


Regards,

Vinitha


Loader.
Up arrow icon