Schedule e-view for 3 days

[alexis garcia]

Hi,

I was trying and failing to try to create a new <e-view>, i know there is one for 1 day, week, month, year, but i need to create one that displays 3 days to the user instead of a full week. Is it possbile? 

Thanks guys

<div class="schedule-container" id="ScheduleContainer">

                    <ejs-schedule id='Schedule' ref="ScheduleObj" height="90vh" :cssClass='cssClass'

                        :rowAutoHeight='rowAutoHeight' :selectedDate='selectedDate' :eventSettings='eventSettings'

                        :group='group' :currentView='currentView' :actionBegin="onActionBegin" :popupOpen="popupOpen"

                        @dataBound="onDataBound" :timeScale="timeScale" :dragStop="onDragStop" :timezone="'Europe/London'"

                        @resizeStart="resizeStart" :showHeaderBar='showHeaderBar' :resizeStop="onResizeStop"

                        @actionComplete="onActionComplete" @eventRendered='onEventRendered' @resize="onResize"

                        @cellClick="onCellClick" @select="onSelect" @renderCell="onRenderCell"

                        :editorTemplate="'editorTemplate'" :headerRow="headerRow">

                        <e-views>

                            <e-view option="TimelineDay"> Teste</e-view>

                            --<e-view option="Days"></e-view>

                            <e-view option="TimelineWeek"></e-view>

                        </e-views>

[Venkateshwaran Saravanakumar]

Hi Alexis,

UG: https://ej2.syncfusion.com/vue/documentation/schedule/views#extending-view-intervals
Demo: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/schedule/extended-views.html

You can achieve your requirement of "displaying 3 days to the user instead of a full week" by utilizing the interval property of the views as demonstrated in the code snippet below. Refer to the shared UG and demo links for more details. Let us know if you need any further assistance.

[app. vue]

<template>

    <div id='app'>

        <div id='container'>

            <ejs-schedule id='Schedule' height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings' :currentView='currentView'>

                <e-views>

                    <e-view option='Day' :interval='3' displayName='3 Days'></e-view>

                    <e-view option='Week' :interval='2' displayName='2 Weeks'></e-view>

                </e-views>

            </ejs-schedule>

        </div>

    </div>

</template>

Regards,
Venkatesh

[alexis garcia]

Thanks a lot, i was overthinkg it. Simple as it is :) Thanks! 
I can open a new topic if you prefer but is there a way to make the height of the rows (resources and working cells) that have no appointments to have a height of 10px (example)?

I did achieve this but manipulating css class's wont work because the appointments wont ''move'' with the rows. 

Let me know if you prefer that i open a new topic. 

Thanks again for the amazing help!

[Ravikumar Venkatesan]

Alexis,

You are welcome. We created a new forum for your query. Follow up on the below forum link for further updates.

Is there a way to make the height of the rows - from 183359 | Vue Forums | Syncfusion