How to hide weekend or any weekday in timeline view

[wilson]

  My program is showing doctor's appointments in timeline view.  Sometimes i want to hide weekend or any weekday if the doctor is not working on that day.

  I checked your timeline view and customization demos, the closest thing I can find is using the first day of week and last day of week, but it's not supported in timeline view.

  Is there a way I can hide a day in timeline view?  Or is there a way I can change the column width to 0, so it's like hide the column?

[wilson]

Is there any Telerik guy can help me?

[Peter]

Hello wilson,

You cannot hide specific days in timeline view, but you can add custom style and disable them. Here is a kb article that will guide you on how to achieve this:
http://www.telerik.com/support/kb/aspnet-ajax/scheduler/setting-special-days-or-time-slots-in-radscheduler.aspx


Greetings,
Peter
the Telerik team

[wilson]

I tried the code in that KB article and made a little modification.

      <style type="text/css">  
        .Disabled  
        {  
            background: silver !important;  
            cursor: not-allowed;
            width: 0px;
        }  
        .Disabled.rsAptCreate  
        {  
            background: silver !important;  
        }  
    </style> 

My modification only works on timeslot, but didn't work on the column header (please see my attached jpg file).  Is it possible to make the column header width to 0 px?

[wilson]

Please check my previous post and see if I can change the column width for the header.
Thanks.

[Peter]

Hello Wilson,

Please, try the following jQuery workaround:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var specialDaysIndexes = new Array();
            function pageLoad() {
                if ($find('<%=RadScheduler1.ClientID %>').get_selectedView() == Telerik.Web.UI.SchedulerViewType.TimelineView) {
                    var $ = $telerik.$;
                    $('.rsDisabled').each(function (i) {
                        specialDaysIndexes.push($(this).index());
                    });

                    for (x in specialDaysIndexes) {
                        $($(".rsHorizontalHeaderTable th").get(specialDaysIndexes[x])).css("width", "0px")
                    }
                    specialDaysIndexes = [];
                }
            }
        </script>
    </telerik:RadCodeBlock>

<style type="text/css">
      .rsDisabled
      {
          width: 0px;
      }
  </style>

protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
   {
       if ((e.TimeSlot.Start.DayOfWeek == DayOfWeek.Wednesday || e.TimeSlot.Start.DayOfWeek == DayOfWeek.Monday) & RadScheduler1.SelectedView == SchedulerViewType.TimelineView)
           e.TimeSlot.CssClass = "rsDisabled";
   }

Thank you for asking this question and persevering in searching for a solution.

Greetings,
Peter
the Telerik team

[wilson]

Thank you for the reply.  I tried your code and it's not 100% working for me.
The first problem is it only hide Nov 6, 7, 13, and 14, but it didn't hide other weekends.  See my first jpg.
The second problem is I have 3 schedulers on my page, 1 in each tab.  The script also changed my other scheduler.  See my second jpg.  Do you need to specify which scheduler to hide weekend in the script?

[wilson]

Somebody, HELP!!!

[Peter]

Hi wilson,

The days to be hidden are determined in the TimeSlotCreated event. The code I sent you was just an example. If you need to hide weekends, add the following check:

protected void RadScheduler1_TimeSlotCreated1(object sender, TimeSlotCreatedEventArgs e)
   {
       if ((e.TimeSlot.Start.DayOfWeek == DayOfWeek.Wednesday || e.TimeSlot.Start.DayOfWeek == DayOfWeek.Monday || e.TimeSlot.Start.DayOfWeek == DayOfWeek.Sunday || e.TimeSlot.Start.DayOfWeek == DayOfWeek.Saturday) & RadScheduler1.SelectedView == SchedulerViewType.TimelineView)
           e.TimeSlot.CssClass = "rsDisabled";
   }

If you need to target a specific scheduler instance only, add jQuery context to the selectors:

<script type="text/javascript">
           var specialDaysIndexes = new Array();
           function pageLoad() {
               if ($find('<%=RadScheduler1.ClientID %>').get_selectedView() == Telerik.Web.UI.SchedulerViewType.TimelineView) {
                   var $ = $telerik.$;
                   $('.rsDisabled').each(function (i) {
                       specialDaysIndexes.push($(this).index());
                   });
                   for (x in specialDaysIndexes) {
                       $($(".rsHorizontalHeaderTable th", $find('<%=RadScheduler1.ClientID %>').get_element()).get(specialDaysIndexes[x])).css("width", "0px")
                   }
                   specialDaysIndexes = [];
               }
           }
       </script>

Kind regards,
Peter
the Telerik team

[wilson]

Thanks.  I will try your code.

[Jürgen]

Hy,

I've the problem, that the headlines of Sundays and Saturdays in my application  will be displayed.

 What have I forgotton, where is my mistake?
Thanks
Jürgen

<style type="text/css">

.Disabled

{

background: silver !important;

cursor: not-allowed;

width: 0px;

}

.Disabled.rsAptCreate

{

background: silver !important;

cursor: not-allowed;

width: 0px;

}


and as event

Protected Sub RadScheduler1_TimeSlotCreated(sender As Object, e As Telerik.Web.UI.TimeSlotCreatedEventArgs) Handles RadScheduler1.TimeSlotCreated

        If e.TimeSlot.Start.DayOfWeek = DayOfWeek.Saturday Then

            e.TimeSlot.CssClass = "Disabled"

        Else

            If e.TimeSlot.Start.DayOfWeek = DayOfWeek.Sunday Then

                e.TimeSlot.CssClass = "Disabled"

            End If

        End If

    End Sub


[Plamen]

Hi Jürgen,

 
Unfortunately in the latest version of RadScheduler such hiding is not supported because it will break the proper positioning of the appointments that is why I would rather recommend you to disable the time slots as for example it is done in this on-line demo instead of trying to hide them.

Hope this information will be helpful.

Regards,
Plamen
Telerik

[Jürgen]

Hi Plamen,

thank you for the answer.

Disabling of the columns Sunday and Saturday in the Timeslot-View is unfortunately not that, was my customer wishes.
So I hope that in the next version or release the posibility to hide the whole day including the Header or to set the width to 0 px for both will be supported again.

I cannot understand, why that setting width to 0 px shows a view with normal witdh headers and only a line for appointment area. This is a unproper working.

An answer is not necessary.

Kind regards,

Jürgen