Set a negative TimelineDay Interval to See the last 4 days

[Eléonore Stultjens]

Hello, 

I would like to find a way to create a TimelineDay View that displays the last 4 days, starting from today.
For example, it would show today (26/02/2024), and the user would be able to scroll in the past up too Friday 23/02/2024. 

I've tried to use a negative interval but it doesn't work. Do you have an alternative solution ? 

Here is my scheduler: 

            @(Html.EJS().Schedule("schedule")

                .Width("100%")

                .Height("850px")

                .CssClass("schedule-cell-dimension")

                .Group(group => group.Resources(Model.Resources))

                .Resources(res =>

                {

                    res.DataSource(Model.ScheduleGroup).Field("ScheduleId").Name("ScheduleGroup").TextField("Text").   IdField("Id").ColorField("Color").Add();

                    res.DataSource(Model.ScheduleEvent).Field("EventId").Name("ScheduleEvent").TextField("Text").IdField("Id").GroupIDField("GroupId").Add();

                })

                .SelectedDate(DateTime.Now)

                .Views(view =>

                {

                    view.Option(View.TimelineDay).Add();

                    view.Option(View.TimelineDay).DisplayName("Last 4 days").Interval(-4).Add();

                })

                .EventSettings(new ScheduleEventSettings { DataSource = @Model.TimelineData })

                .Readonly(true)

                .Render()

            )

Thank you for you reply, 
Best regards, 

[Venkateshwaran Saravanakumar]

Hi Eléonore ,

We have prepared a sample based on your requirement using the Scheduler's Created event, as shown in the code snippet below. Kindly try the shared sample and let us know if you need any further assistance.

@using Syncfusion.EJ2

@using Syncfusion.EJ2.Schedule

 

 

@(Html.EJS().Schedule("schedule")

    .Width("100%").Height("650px")

    .Views(view =>

    {

        view.Option(View.TimelineDay).DisplayName("4 Days").Interval(4).Add();

    })

    .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })   

    .Created("OnCreate")   

    .Render()

)

<style>

   

</style>

 

 

<script type="text/javascript">

    var dayInterval = 4;   

    function OnCreate() {

        var scheduleObj = document.querySelector('.e-schedule').ej2_instances[0]

        var currentDate = new Date();

        var tomorrowDate = new Date(currentDate);

        tomorrowDate.setDate(currentDate.getDate() + 1);

        var previousDate = new Date(tomorrowDate.getFullYear(), tomorrowDate.getMonth(), tomorrowDate.getDate() - dayInterval);    

        scheduleObj.selectedDate = previousDate;

    }

</script>

Regards,
Venkatesh

Attachment: MvcScheduler_264d3e07.zip