Set Scheduler Month based on Range Navigator

[Atle Bjelland]

Hello

I am trying to build a logic where i use the Range Navigator and the Scheduler in combination.

The range navigator will be how you select what range of data you look at in the scheduler.

I'm currently just trying to use TimelineMonth view and switch month based on start date of the range navigator.

Any tips would be greatly appreciated.

Thanks

Atle

[Vengatesh Maniraj]

Hi Atle Bjelland, 

Greetings from Syncfusion Support. 

We have validated your requirement and we suggest you use the Changed event of the Range Navigator component to change the date of the Scheduler. Accordingly, set the SelectedDate of the Scheduler as StartDate of the Range Navigator. While changing the start date of the Range Navigator, just reset the Scheduler’s SelectedDate to achieve your requirement like below 

<SfRangeNavigator Value="@Value" ValueType="Syncfusion.Blazor.Charts.RangeValueType.DateTime" 

                  LabelFormat="MMM-yy" IntervalType="RangeIntervalType.Years" Interval="1"> 

    <RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings> 

    <RangeNavigatorEvents Changed="SliderChanged"></RangeNavigatorEvents> 

    <RangeNavigatorSeriesCollection> 

        <RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area" 

                              YName="Close"></RangeNavigatorSeries> 

    </RangeNavigatorSeriesCollection> 

</SfRangeNavigator> 

<SfSchedule TValue=object Width="100%" Height="650px" SelectedDate="CurrentDate"> 

    <ScheduleViews> 

        <ScheduleView Option="View.TimelineMonth"></ScheduleView> 

    </ScheduleViews> 

</SfSchedule> 

@code { 

 

    public DateTime[] Value = new DateTime[] { new DateTime(2009, 01, 01), new DateTime(2010, 01, 01) }; 

    public DateTime CurrentDate = new DateTime(2009, 01, 01); 

    public class Data 

    { 

        public DateTime Date; 

        public double Close; 

    } 

    public void SliderChanged(IChangedEventArgs args) 

    { 

        CurrentDate = Convert.ToDateTime(args.Start); 

    } 

    public List<Data> StockDetails = new List<Data> 

{ 

        new Data { Date = new DateTime(2005, 01, 01), Close = 21 }, 

        new Data { Date = new DateTime(2006, 01, 01), Close = 24 }, 

        new Data { Date = new DateTime(2007, 01, 01), Close = 36 }, 

        new Data { Date = new DateTime(2008, 01, 01), Close = 38 }, 

        new Data { Date = new DateTime(2009, 01, 01), Close = 54 }, 

        new Data { Date = new DateTime(2010, 01, 01), Close = 57 }, 

        new Data { Date = new DateTime(2011, 01, 01), Close = 70 } 

    }; 

} 

  

For the same, we have prepared the sample which can be download from the below link, 

Sample: https://www.syncfusion.com/downloads/support/forum/153022/ze/ScheduleWithRangeNavigator-1451212407  

Kindly check the above sample and get back to us If you need any further assistance. 

Regards, 

Vengatesh