12 month timeline view with Jan-Dec

[Thomas Pentenrieder]

I'd like to add an additional timeline view to my Schedule that's basically the Month timeline with iteration of 12. 
The issue is that this 12-month-view will start at the current date and not at January 1st.

As I understand I need to set the current date to January 1st before (or when) switching to the new timeline view. Is there a code example on how to do this? I tried setting display date but that didn't change anything.

  const services: Object[] = [TimelineMonth, TimelineViews, TimelineYear, Year];

  if (canEdit) {

    services.push(Resize, DragAndDrop);

  }

return (

       <ScheduleComponent

            currentView="TimelineMonth"

            width='100%'

            height='100%'

            eventSettings={eventSettings}

            group={group}

            resourceHeaderTemplate={ResourceHeaderTemplate}

            popupOpen={onPopupOpen}

            eventRendered={onEventRendered}

            rowAutoHeight={true}

            enablePersistence={true}

            ref={scheduleRef}>

            <ResourcesDirective>

              <ResourceDirective field='ProjectId' title='Projects' name='Project' allowMultiple={false} dataSource={projectData} textField='name' idField='id' colorField='color' />

              <ResourceDirective field='OwnerId' title='Owner' name='Owners' allowMultiple={true} dataSource={userData} textField='fullName' idField='id' />

            </ResourcesDirective>

            <ViewsDirective>

              <ViewDirective option='TimelineDay' displayName="Day" />

              <ViewDirective option="TimelineWorkWeek" displayName="Work Week" />

              <ViewDirective option='TimelineWeek' displayName="Week" />

              <ViewDirective option='TimelineMonth' displayName="Month" />

              <ViewDirective option='TimelineMonth' displayName="Year" interval={12} allowVirtualScrolling={true} enableLazyLoading={true} displayDate={new Date(new Date().getFullYear(), 0, 1)} />

            </ViewsDirective>

            <Inject services={services} />

          </ScheduleComponent>

);



[Ravikumar Venkatesan]

Hi Thomas Pentenrieder,

Sample: https://stackblitz.com/edit/ej2-js-es5-schedule-timeline-month-year-view-date-naviga?file=index.js

You can render the TimelineMonth view with an interval of 12 to always start at January 1^st of the year by changing the selectedDate value of the Schedule to January 1^st if the selectedDate value is not January 1^st of the year using the navigating event of the Schedule as highlighted in the code snippet below.

[index.js]

const TimelineGrouping = () => {
let scheduleRef = useRef(null);
let isTimelineMonthYear = false;

const onNavigating = (args) => {

        isTimelineMonthYear = (args.action === 'view' && args.viewIndex === 4) || (args.action === 'date' && isTimelineMonthYear);

        const yearStart = new Date(args.currentDate.getFullYear(), 0, 1);

        if (isTimelineMonthYear && yearStart.getTime() !== resetTime(args.currentDate).getTime()) {

            args.cancel = args.action === 'date';

            scheduleRef.current.selectedDate = yearStart;

        }

    }

 

    return (<div className='schedule-control-section'>

        <div className='col-lg-12 control-section'>

            <div className='control-wrapper'>

                <ScheduleComponent ref={scheduleRef} cssClass='timeline-resource-grouping' width='100%' height='650px' selectedDate={new Date(2023, 0, 4)} currentView='TimelineWeek' workDays={workDays} eventSettings={{ dataSource: data }} group={{ resources: ['Projects', 'Categories'] }} navigating={onNavigating.bind(this)}>

                    <ResourcesDirective>

                        <ResourceDirective field='ProjectId' title='Choose Project' name='Projects' allowMultiple={false} dataSource={projectData} textField='text' idField='id' colorField='color' />

                        <ResourceDirective field='TaskId' title='Category' name='Categories' allowMultiple={true} dataSource={categoryData} textField='text' idField='id' groupIDField='groupId' colorField='color' />

                    </ResourcesDirective>

                    <ViewsDirective>

                        <ViewDirective option='TimelineDay' displayName="Day" />

                        <ViewDirective option="TimelineWorkWeek" displayName="Work Week" />

                        <ViewDirective option='TimelineWeek' displayName="Week" />

                        <ViewDirective option='TimelineMonth' displayName="Month" />

                        <ViewDirective option='TimelineMonth' displayName="Year" interval={12} allowVirtualScrolling={true} enableLazyLoading={true} displayDate={new Date(new Date().getFullYear(), 0, 1)} />

                    </ViewsDirective>

                    <Inject services={[TimelineViews, TimelineMonth, Resize, DragAndDrop]} />

                </ScheduleComponent>

            </div>

        </div>

    </div>);

};

export default TimelineGrouping;

API:
https://ej2.syncfusion.com/javascript/documentation/api/schedule/#selecteddate
https://ej2.syncfusion.com/javascript/documentation/api/schedule/#navigating

Regards,
Ravikumar Venkatesan

[Thomas Pentenrieder]

Thanks, this worked great. Is it possible to jump to the last current date after navigation has completed? 

And is it possible to add the following HeaderRowsDirective only for that Year view?

            <HeaderRowsDirective>

              <HeaderRowDirective option="Month" />

              <HeaderRowDirective option="Date" />

            </HeaderRowsDirective>

[Vijay Ravi]

Hi Thomas,

Query 1: Is it possible to jump to the last current date after navigation has completed?

yes it, is possible to change the schedule currentDate after navigating the view with interval 12 months. you can do this in the onNavigating event as shown in the below shared code snippet.

[index.js]
 

let isFirstNavigating = true;

 

    const onNavigating = (args) => {

        isTimelineMonthYear = (args.action === 'view' && args.viewIndex === 4) || (args.action === 'date' && isTimelineMonthYear);

        const yearStart = new Date(args.currentDate.getFullYear(), 0, 1);

        if (isTimelineMonthYear && yearStart.getTime() !== resetTime(args.currentDate).getTime()) {

            args.cancel = args.action === 'date';

            scheduleRef.current.selectedDate = yearStart;

        }

 

        if (isFirstNavigating && (args.action === 'view' && args.viewIndex === 4) ) {

            const currentDate = new Date();

            scheduleRef.current.selectedDate = currentDate;

            isFirstNavigating = false;

        }

    }

Query 2: is it possible to add the following HeaderRowsDirective only for that Year view?

Yes, it is possible to set the headerRows as objectType in viewDirective for the particular view, as shown in the code snippet shared below. Refer to the shared sample for your reference.

[index.js]
 

 

const headerRows =[

        { option: 'Month' },

        { option: 'Date' }

    ];

   

    return (<div className='schedule-control-section'>

        <div className='col-lg-12 control-section'>

            <div className='control-wrapper'>

                <ScheduleComponent ref={scheduleRef} >

                    <ViewsDirective>

                        <ViewDirective option='TimelineDay' displayName="Day" />

                        <ViewDirective option="TimelineWorkWeek" displayName="Work Week" />

                        <ViewDirective option='TimelineWeek' displayName="Week" />

                        <ViewDirective option='TimelineMonth' displayName="Month" />

                        <ViewDirective option='TimelineMonth' displayName="Year" interval={12} allowVirtualScrolling={true} enableLazyLoading={true} displayDate={new Date(new Date().getFullYear(), 0, 1)} 

                         headerRows={headerRows}/>

                    </ViewsDirective>

                    <Inject services={[TimelineViews, TimelineMonth, Resize, DragAndDrop]} />

                </ScheduleComponent>

            </div>

        </div>

    </div>);

};

export default TimelineGrouping;

Sample link: https://stackblitz.com/edit/ej2-js-es5-schedule-timeline-month-year-view-date-8a2inj?file=index.js

Regards,

Vijay

[Thomas Pentenrieder]

Regarding jumping to the current date, I'd like to scroll do the current date (like clicking "Today"), but still have Jan-Dec on my timeline on the first navigation.

Btw. is it a known issue that clicking "Today" does not work in a 12 month timeline view?

EDIT:

Figured it out by using onDataBound:

  const onDataBound = (args: any) => {

    console.log('onDataBound', args);

    if (isTimelineMonthYear) {

      (scheduleRef.current as any).scrollTo(null, new Date());

    }

  }

[Ashokkumar Karuppasamy]

Hi Thomas,

Regarding jumping to the current date, I'd like to scroll do the current date (like clicking "Today)

You can use the schedule component  create events and navigate to the current date.

    const created = () => {

        if(scheduleRef.current && scheduleRef.current.activeViewOptions.displayName === 'Year') {

            (scheduleRef.current).scrollTo(null, new Date());

        }

    }

Sample: https://stackblitz.com/edit/ej2-js-es5-schedule-timeline-month-year-view-date-uyvx5n?file=index.js

still have Jan-Dec on my timeline on the first navigation. Btw. is it a known issue that clicking "Today" does not work in a 12 month timeline view?

We are having difficulty understanding this. We would greatly appreciate it if you could provide us with further information about your scenario or, if possible, share any videos. This will help us align our understanding with your expectations and provide you with the best possible assistance.

Regards,
Ashok

[Thomas Pentenrieder]

I guess I would expect the "Today" button to also scroll to the current day in the Timeline view, which it doesn't as you can see in your own example:  https://stackblitz.com/edit/ej2-js-es5-schedule-timeline-month-year-view-date-uyvx5n?file=index.js

[Vijay Ravi]

Hi Thomas,

We suggest that you override the toolbar's "Today" button click action to customize it for your requirements. Please refer to the code sample shared below for your needs. If this does not meet your requirements, could you please share your use case scenario?

Sample link: ej2-js-es5-schedule-timeline-month-year-view-date-navigation (forked) - StackBlitz

Regards,
Vijay