Set starting date in timeline week view

[Valentyn Horobets]

Hi there :)

Just want to ask how to set up starting date in the syncfusion scheduler component in week timeline view, I need to see first day as yesterday and next 7 days, but it shows whole week starting from Monday always, didn't find this in the doc :(

the sample of the code look like

<ScheduleView Option="View.TimelineWeek" DisplayName="1 Week" Interval="1" IsSelected="@true">

                    <ScheduleViewTimeScale SlotCount="4" Interval="1440" Enable="false">

                        <MajorSlotTemplate />

                        <MinorSlotTemplate />

                    </ScheduleViewTimeScale>

  </ScheduleView>

[Ruksar Moosa Sait]

Hi Valentyn,

We have checked on your query and we are unable to understand your requirement at our end. We need additional details about your requirement to check and provide the solution for your requirement.

• Do you want to render the week view from the SelectedDate value and the next 7 days?
• Share the use case scenario of your requirement.
• Screenshot or picture of your requirement.

Regards,

Ruksar Moosa Sait

[Valentyn Horobets]

HI, thanks for the reply,

Yes, I need to display a timeline week and two weeks view starting from selected date and for us it's yesterday. If today is Wednesday then the first column should be Tuesday and next 6 days, if today is Saturday the first column should be Friday etc.

We also would like to separate today and yesterday with vertical line as rose line on the picture and change background color for some dates (weekends and wed on the picture), is it possible?

Thanks

[Ruksar Moosa Sait]

Hi Valentyn,

We have checked on your requirement and suggest you to set the View as TimelineDay with interval 15 and update the SelectedDate(to get the previous date) of the scheduler during the initialization and during the date navigation in the OnActionBegin event. Also you can change the color of the vertical line and customize the work cells for working and Non working days by using the CSS class like the below code to meet your requirement.

[Index.razor]

<ScheduleViews>

        <ScheduleView Option="View.TimelineDay" Interval="15" WorkDays="@WorkingDays"></ScheduleView>

</ScheduleViews>

protected override void OnInitialized()

    {

        SelectedDate = SelectedDate.AddDays(-1);

        base.OnInitialized();

    }

    public void OnActionBegin(ActionEventArgs<AppointmentData> args)

    {

        if (args.ActionType == ActionType.DateNavigate)

        {

            SelectedDate = SelectedDate.AddDays(-1);

        }

    }

<style>

    /*To change the background color of the working days*/

    .e-schedule .e-timeline-view .e-work-hours {

        background-color: #302d2d;

    }

 

    /*To change the background color of the non working days*/

    .e-schedule .e-timeline-view .e-work-cells:not(.e-work-hours) {

        background-color: #a8a39e;

    }

 

    /*To change the color of the vertical line*/

    .e-schedule .e-timeline-view .e-content-wrap table td:first-child {

        border-right-width: 2px;

        border-right-color: red;

    }

</style> </style>

Output:

Kindly try the attached sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait

Attachment: BlazorTimelineViewCustomization_8ffe5c04.zip

[Valentyn Horobets]

Thanks

it's almost all I need.

In fact I noticed one issue, when I set-up Selected date, the drag & drop of events stopped for me.

Could you please suggest what's wrong?

Regards

[Valentyn Horobets]

Update: actually it works when I change Selected date in he 

OnActionBegin and I tried it in ActionCompleted

all good 

thanks

[Ravikumar Venkatesan]

Hi Valentyn,

Thanks for the update.

We are happy that our solution helped you to achieve your requirement.

Regards,

Ravikumar Venkatesan