Sticky DateHeaderTemplate in TimeLine Week & Day View

[Thomas Pentenrieder]

I'm using the DateHeaderTemplate to format the date according to my users settings. But by doing that my header is not sticky anymore as the default is. I tried adding the same classes, but that didn't work. Same thing seems to happen in the official sample: https://stackblitz.com/run?file=index.js

Any way to fix that? 

[Ashokkumar Karuppasamy]

Hi Thomas ,

Based on the shared sample, we are unable to open it. Could you please share a runnable sample and code snippet? This will help us align our understanding with your expectations and provide you with the best possible assistance.

Regards,
Ashok

[Thomas Pentenrieder]

sorry, I was referring to this sample here: https://stackblitz.com/edit/react-7iqxmonf?file=index.js

If you go to Timeline Week you'll see that the custom date header is not sticky horizot

[Ashokkumar Karuppasamy]

Hi Thomas ,

For achieving your requirement, we suggest to use the renderCell event instead of the dateHeaderTemplate in the TimelineWeek view. We have shared a code snippet and sample below. Please try the solution and let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/react-7iqxmonf-dsq6jr5t?file=index.js,index.css,index.html

 const onRenderCell = (args) => {

        if(scheduleRef.current && scheduleRef.current.currentView === "TimelineWeek"){

            if (args.elementType === 'dateHeader') {

                args.element.firstElementChild.classList.remove('e-navigate')

                args.element.firstElementChild.innerHTML = '';

                args.element.firstElementChild.innerHTML = `

                <div>

                    <div>${getDateHeaderText(args.date)}</div>

                    <div class="date-text">${getWeather(args.date)}</div>

                </div>

            `

            }

        }

    };

 

    useEffect(() => {

        if (scheduleRef.current) {

            setCurrentView(scheduleRef.current.currentView); // Update the current view on mount

        }

    }, []);

 

    const onActionComplete = (args) => {

        if (args.requestType === 'viewNavigate' || args.requestType === 'dateNavigate') {

            setCurrentView(scheduleRef.current.currentView); // Update view on navigation

        }

    };

 

    return (

        <ScheduleComponent

            ref={scheduleRef} // Attach the ref

            width="100%"

            height="550px"

            cssClass="schedule-date-header-template"

            selectedDate={new Date(2018, 1, 15)}

            eventSettings={eventSettings}

            renderCell={onRenderCell}

            actionComplete={onActionComplete} // Track view changes

        >

            <ViewsDirective>

                <ViewDirective option="Day" dateHeaderTemplate={ dateHeaderTemplate}/>

                <ViewDirective option="Week" dateHeaderTemplate={ dateHeaderTemplate}/>

                <ViewDirective option="WorkWeek"dateHeaderTemplate={ dateHeaderTemplate} />

                <ViewDirective option="TimelineWeek" />

            </ViewsDirective>

            <Inject services={[Day, Week, WorkWeek, TimelineViews]} />

        </ScheduleComponent>

    );

};

 

Regards,

Ashok