Have timeline always display days starting with a Monday

[Edward]

I'm looking to have the Scheduler display the current week on the timeline, but by default the first column will be today(which 6/7 times isn't Monday). Also when people select a date on the calendar that day is the start of the 7 columns shown by the timeline, rather than the Monday that starts that week.
Is there any way to ensure the Monday is always in the first column regardless of the current day or what is selected from navigation via the calendar?
Also, is there any way to make the calendar start on a Monday?
Thanks,
Edward

[Peter]

Hello Edward,

Please, see this demo which shows how to customize the Multi-day view to always start and end with a specific day of the week.

protected void RadScheduler1_NavigationComplete(object sender, SchedulerNavigationCompleteEventArgs e)
       {
           if (RadScheduler1.SelectedView == SchedulerViewType.TimelineView)
           {
               TimelineConfigPanel.Visible = true;
               MultidayConfigPanel.Visible = false;
           }
           else if (RadScheduler1.SelectedView == SchedulerViewType.MultiDayView)
           {

               RadScheduler1.MultiDayView.NumberOfDays = int.Parse(NumberOfDaysList.SelectedValue);
               RadScheduler1.FirstDayOfWeek = (DayOfWeek)int.Parse(FirstDayOfWorkWeekList.SelectedValue);

               //SelectedDate adjustment to make a Work Week view from Multi-day view
               int WorkWeekAdjustmentTimeShift = (int)RadScheduler1.FirstDayOfWeek - (int)RadScheduler1.SelectedDate.DayOfWeek;
               if (e.Command == SchedulerNavigationCommand.NavigateToNextPeriod)
               {
                   if (WorkWeekAdjustmentTimeShift < 0)
                       WorkWeekAdjustmentTimeShift += 7;

               }
               else if (e.Command == SchedulerNavigationCommand.NavigateToPreviousPeriod)
               {
                   if (WorkWeekAdjustmentTimeShift > 0)
                       WorkWeekAdjustmentTimeShift -= 7;
               }
               RadScheduler1.SelectedDate = RadScheduler1.SelectedDate.AddDays(WorkWeekAdjustmentTimeShift);


               TimelineConfigPanel.Visible = false;
               MultidayConfigPanel.Visible = true;
           }
       }
   }

The same approach can be used for Timeline view as well.


Kind regards,
Peter
the Telerik team

[Peter]

I just noticed you had another question about the popup navigatio calendar. Yes, you can access it in RadScheduler's PreRender event and set its properties as per your requirement.

Greetings,
Peter
the Telerik team

[sandhya]

Hello,

Can any one please let me know how to set "Monday" as start day always in Timeline view of Rad Scheduler like when we change the date from the calendar(Suppose I select Wednesday),it is showing "Wednesday" as Start Day .But we need to highlight the selected day,showing start day as "Monday" from the select day week.Please help..

[Anton]

Hello,

A way of having always "Monday" as start day in Timeline view is as in the following example: 

<script>
            var schedulerView;

            $(function () {
                var scheduler = $find("<%= RadScheduler1.ClientID %>");

                schedulerView = scheduler.get_selectedView();

                //If Selected View is Timeline
                if (schedulerView === 4) {
                    setFirstDayMonday(scheduler)
                }
            });

            function onNavigationComplete(sender, args) {
                schedulerView = sender.get_selectedView();

                //Check if selected view is either Day, Week or Month, cause it is also considered as "navigation" when switching among views
                if (schedulerView === 0 || schedulerView == 1 || schedulerView === 2) {
                    return;
                }

                setFirstDayMonday(sender);
            }

            function setFirstDayMonday(scheduler) {
                var date = scheduler.get_selectedDate(),
                    currentDate = date.getDate(),
                    weekDayNumber = date.getDay();

                date.setDate(currentDate - weekDayNumber + 1);
            }
        </script>

However, RadScheduler does not have certain functionality to highlight selected day in neither View. You have to add it yourself as a custom feature. Doing some calculations with the weekDayNumber value from the code snippet above and also the count the slots in Timeline View you can apply some CSS to the selected date.

 

Regards,
Anton
Telerik by Progress

[sandhya]

Thanks a lot for replying Anton,given code is executing with out any errors but the selected date week's "Monday" is not setting as starting day.Is there any other default settings that is overriding the selection.Below is our rad scheduler events. 

 <telerik:RadScheduler ID="radscheduler1" runat="server" OnResourcesPopulating="myEBCSchedule_OnResourcesPopulating"
        OnClientAppointmentEditing="OnClientAppointmentEditing" OnClientAppointmentContextMenu="OnClientAppointmentContextMenu"
        OnClientAppointmentClick="OnClientAppointmentClick" OnClientAppointmentDeleting="OnClientAppointmentDeleting"
        OnClientFormCreated="OnClientFormCreated" OnClientAppointmentResizeStart="OnClientAppointmentResizeStart"
        OnClientAppointmentMoveEnd="OnClientAppointmentMoveEnd" OnClientAppointmentsPopulating="OnClientAppointmentsPopulating"
        OnClientAppointmentsPopulated="OnClientAppointmentsPopulated" OnClientAppointmentContextMenuItemClicked="OnClientAppointmentContextMenuItemClicked">
        <TimelineView UserSelectable="true" ShowInsertArea="false" TimeLabelSpan="1" NumberOfSlots="7"
            GroupBy="BRRoom" GroupingDirection="Vertical" ColumnHeaderDateFormat="dddd MM/dd"
            ShowResourceHeaders="true" ShowDateHeaders="true" />

 

Please help.

 

Regards,

Sandhya.

[Anton]

Hi,

Could you please check on the attached sample project and see if it is working at your side.

Regards,
Anton
Telerik by Progress

[sandhya]

Thanks a ton Anton's . Attached code helped a lot. we dint added RadAjaxManager .After adding,its working fine.

Thank you once again!!

 

Regards,

Sandhya.

[sandhya]

Hi Support,

We have a column in kendo grid which is having capital letters too in its data.While sorting ,it is ignoring the case and sorting like below.

AFSO CC
AT Kenny
Advertisement

But we want it to be sorted like below.

Advertisement
AFSO CC
 AT Kenny

Please help!!Posting here as I am unable to create a new thread.Please Help..

Regards,
Sandhya.

[sandhya]

Hi Anton,

When we are setting the start day as Monday,its working fine but the appointments are not binding to the days.when we select Wednesday from the calendar,Monday ,Tuesday appointments are not binding.If again select t he same week Monday,it is showing all the appointments.

Please help!!

[sandhya]

Hi Anton,
When we are setting the start day as Monday,its working fine but the appointments are not binding to the days.when we select Wednesday from the calendar,Monday ,Tuesday appointments are not binding.If again select t he same week Monday,it is showing all the appointments.
Please help!!

[Manju]

Hi Anton,

Could you please help us with the above issue. We are able to default the calendar view start date to Monday but unable to load the appointments. Ex. When Wednesday is selected from the timeline view, the scheduler start date is set to Monday but the appointments are loading from Wednesday. Appointments for Monday and Tuesday does not load.

Regards,
Manju.

[Anton]

Hello,

Are you talking about the project provided in this forum post? If that's correct, could you please provide a video showing the false behavior?

Regards,
Anton
Telerik by Progress

[Manju]

Hi Anton,

The code that u had attached did not have appointments in it. So we did not see this issue.

But our code which has appointments has this problem.

Can you please send us code with appointments in it? so that we can try and add it to our code.

Regards,
Manju

[Anton]

Hello Manju,

The attached project I was asking about has 3 appointments but I'm attaching you another one with more appointments and working at my side as you can see on the video. The appointments are bound correctly having Monday as start day in TimeLine view.

Before running the project please add reference to Telerik.Web.UI.dll and Telerik.Web.UI.Skins.dll.

Regards,
Anton
Telerik by Progress