Customize Weekview

[Prava kafle]

Hi,

I would like to show only one block(one time slot representing whole day) for each resource. week view is grouped vertically  by resource="TechName" . I see time slots representing each hour  and my scheduler occupies larger area in page. If I could display only one time-slot which represents 24 hours and stack all appointments for the day for particular technician, it would give a neat look to my app. Is it  even possible in schedulers week view?


Thanks,
Prava

[Plamen]

Hi Prava kafle,

I've edited the Resource Grouping demo to achieve the functionality that you wanted. The improvement is shown below highlighted in yellow:

<telerik:RadScheduler runat="server" ID="RadScheduler1" GroupBy="Room" GroupingDirection="Horizontal"
                SelectedDate="2007-06-08" DayStartTime="08:00:00" DayEndTime="19:00:00" TimeZoneOffset="03:00:00"
                DataSourceID="EventsDataSource" DataKeyField="ID" DataSubjectField="Description"
                DataStartField="Start" DataEndField="End" DataRecurrenceField="RecurrenceRule"
                DataRecurrenceParentKeyField="RecurrenceParentID" SelectedView="WeekView" FirstDayOfWeek="Monday"
                LastDayOfWeek="Thursday" RowHeaderWidth="52px"   MinutesPerRow="480"
        RowHeight="250" ShowAllDayRow="false" EnableExactTimeRendering="true">

You can fix the pixel sizes according to your needs.

Hope this will help you.

All the best,
Plamen Zdravkov
the Telerik team

[Prava kafle]

Hi Plamen,
My application isnot bound to one view, it  lets user toggle between Timeline/Week/Day and Month View.  In Timeline and day view I want users to see 8/24 timeslots  under each  resource but in Weekview I want only one time slot as I see in my Month view. IS it possible to add/disable a property in markup  to achieve this? I have attached  an image  of Scheduler in MonthView.

  <telerik:RadScheduler ID="rsTicketsSchedule" runat="server" AllowInsert="False"   DisplayDeleteConfirmation="False"  Localization-HeaderToday="Today"
..........................................................
........................
..........................>
  <DayView UserSelectable="True"       GroupBy ="TechName"    GroupingDirection="Horizontal"  />
                                                            <WeekView UserSelectable="True"      GroupBy ="TechName"    GroupingDirection="Vertical"   />
                                                            <MonthView UserSelectable="True"     GroupBy ="TechName"    GroupingDirection="Vertical"/>
                                                        <timelineview columnheaderdateformat="h:mm tt"  groupingdirection="Vertical" headerdateformat="MM/dd/yyyy h:mm tt"
                                                           numberofslots="21" slotduration="00:30:00" starttime="08:00:00" />

........

....
  </telerik:RadScheduler> 


Thanks,
Prava



 

[Prava kafle]

Hi ,

I checked your demo(http://demos.telerik.com/aspnet-ajax/scheduler/examples/resourceheadertemplates/defaultcs.aspx
)  but  it still doesn't fulfill my objective. What I am trying to do is shown in attachment.

Thanks,
Prava

[Plamen]

Hello Prava kafle,

If you want to set the desired properties only to the Week view you can achieve this by setting them in the NavigationCommand event and the Page_Load event like this:

private void Page_Load(object sender, EventArgs e)
       {

           if (RadScheduler1.SelectedView == SchedulerViewType.WeekView)
           {
               RadScheduler1.ShowAllDayRow = false;
               RadScheduler1.EnableExactTimeRendering = true;
               RadScheduler1.RowHeight = 250;
               RadScheduler1.MinutesPerRow = 480;
           }
       }
       protected void RadScheduler1_NavigationCommand(object sender, SchedulerNavigationCommandEventArgs e)
       {
           if (e.Command == SchedulerNavigationCommand.SwitchToWeekView)
           {
               RadScheduler1.ShowAllDayRow = false;
               RadScheduler1.EnableExactTimeRendering = true;
               RadScheduler1.RowHeight = 250;
               RadScheduler1.MinutesPerRow = 480;
           }
           else if (e.Command == SchedulerNavigationCommand.NavigateToPreviousPeriod || e.Command == SchedulerNavigationCommand.NavigateToNextPeriod)
           {
               if (RadScheduler1.SelectedView == SchedulerViewType.WeekView)
               {
                   RadScheduler1.ShowAllDayRow = false;
                   RadScheduler1.EnableExactTimeRendering = true;
                   RadScheduler1.RowHeight = 250;
                   RadScheduler1.MinutesPerRow = 480;
               }
           }
           else
           {
               RadScheduler1.ShowAllDayRow = true;
               RadScheduler1.EnableExactTimeRendering = false;
               RadScheduler1.RowHeight = 25;
               RadScheduler1.MinutesPerRow = 30;
           }
       }

 
Best wishes,
Plamen Zdravkov
the Telerik team

[Prava kafle]

Hi,
I implemented your code and I still see two time slots for single day under each group.

On Pageload I modified your code to  cover 24 hour period by single timeslot:

            if (TicketsSchedule.SelectedView == SchedulerViewType.WeekView)
            {
                TicketsSchedule.ShowAllDayRow = false;
                TicketsSchedule.EnableExactTimeRendering = true;
                TicketsSchedule.RowHeight = 100;
                TicketsSchedule.MinutesPerRow = 1440;
                TicketsSchedule.ShowFullTime = true;
               
            }

On Markup I have

 <DayView UserSelectable="True"       GroupBy ="TechName"    GroupingDirection="Horizontal"  />
   <WeekView UserSelectable="True"      GroupBy ="TechName"    GroupingDirection="Vertical"  ShowHoursColumn="false"   />
    <MonthView UserSelectable="True"     GroupBy ="TechName"    GroupingDirection="Vertical"/>
    <timelineview columnheaderdateformat="h:mm tt"  groupingdirection="Vertical" headerdateformat="MM/dd/yyyy h:mm tt"  numberofslots="21" slotduration="00:30:00" starttime="08:00:00" />
                                                     

[Plamen]

Hello Prava kafle,

It seems this it is a css problem. Here is the code that should fix it:

<style type="text/css">
   .rsAlt
   {
       height:0px !important;
       }
    .rsNonWorkHour:hover
     {
        background:red !important;
        }

   </style>

The second rule is because sometimes on hover you have different css for different part of the day and we have to override it.
 
Regards,
Plamen Zdravkov
the Telerik team

[Prava kafle]

It did not help, week view still renders with two timeslots for each day and each group.

[Plamen]

Hi Prava,

I am sending you a simple  demo project where I was testing your issue and everything looks fine with one slot per row.

Please have a look at the code and if you have further questions don't hastate to ask.

Greetings,
Plamen Zdravkov
the Telerik team

[Prava kafle]

Hi Plamen,
Thank you very much for the sample code and helping me solve this issue. In your sample code  on Dayview each timeslot has two rows and when you hover only one block gets highlighted. How can I show only one block for each time slot/ highlight both on hover.

I want  my day view to look and behave as in this link
 http://demos.telerik.com/aspnet-ajax/scheduler/examples/reminders/defaultcs.aspx

Thanks,
Prava

[Plamen]

Hi Prava,

We can set the changed css only to the Week-View like that:

<style type="text/css">
   .rsWeekView .rsAlt
   {
       height:0px !important;
    }
       .rsWeekView .rsNonWorkHour:hover
       {
           background:red !important;
     }
   </style>

All the best,
Plamen Zdravkov
the Telerik team