Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
30
WebDayView layout
posted

Hi,

in my aspx page there is:

<ig_sched:WebDayView ID="wdvBreak" runat="server" ActivityWidthMinimum="0"
                                        AppointmentTooltipFormatString="&lt;START_DATE_TIME&gt; - &lt;END_DATE_TIME&gt;&lt;NEW_LINE&gt;&lt;SUBJECT&gt;&lt;NEW_LINE&gt;&lt;DESCRIPTION&gt;&lt;NEW_LINE&gt;(&lt;LOCATION&gt;)"

                                        DayHeaderFormatString="dddd" EnableActivityMoving="False" 

EnableActivityResizing="False"
                                        EnableAutoActivityDialog="False" EnableKeyboardNavigation="True" Height="102%"
                                        NavigationButtonsVisible="False" StyleSheetDirectory="" TabIndex="5"
                                        TimeDisplayFormat="Time24Hour" TimeSlotInterval="TwoHours" VisibleDays="7"
                                        WebScheduleInfoID="wsiBreak" Width="100%" StyleSheetFileName="~/App_Themes/CIL-SCL/ig_webdayview.css">
                                        <clientevents mousedown="WebDayView_MouseDown" mouseup="WebDayView_MouseUp"></clientevents>
                                        <selectedappointmentstyle backcolor="White" bordercolor="SteelBlue" borderstyle="Solid" cursor="Hand">
                                            <borderdetails colorbottom="SteelBlue" colorleft="SteelBlue" colorright="SteelBlue"
                                            colortop="SteelBlue" />
                                         </selectedappointmentstyle>
                                         <appointmentstyle bordercolor="SteelBlue" borderstyle="Solid" borderwidth="1px" cursor="Hand">
                                         </appointmentstyle>
                                </ig_sched:WebDayView>

 

<ig_sched:WebScheduleInfo ID="wsiBreak" runat="server" AllowAllDayEvents="False"
                                    EnableReminders="False" EnableViewState="False" FirstDayOfWeek="Monday"
                                    WeekRule="FirstDay" WorkDayEndTime="8:00">
 </ig_sched:WebScheduleInfo>

 

and I use this css

.igdv_DayViewFrame
{
    background-color:#FFFFFF;
    cursor:default;
}

.igdv_CaptionHeader
{
    border: 1px solid #A8A8A8;
    background-image: url(WebSchedule/MonthHeaderCaption_bg.png);
    background-repeat: repeat-x;
    background-color:#D5E4F2;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;   
    font-size:12pt;
    color:#FFFFFF;
    height:24px;
    padding-top:1px;
    text-align:center;
    white-space:nowrap;
    vertical-align:middle;
}

.igdv_DayHeader
{
    /*background-color: #F7C71B;*/
    background-color: #3161BD;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-image:url(WebSchedule/TodayHeader_bg.png);
    background-position:center;
    font-size:8pt;
    padding-left:2px;
    font-weight:bold;
    height:20px;
    color:#000000;
    text-align:center;
    vertical-align:middle;
    white-space:nowrap;
    /*border-left: 2px solid #EE9311;
    border-right: 2px solid #EE9311;*/
    border-left: 2px solid #3161BD;
    border-right: 2px solid #3161BD;
}

.igdv_TodayHeader
{
    border: 0px;
    background-image: url(WebSchedule/TodayHeader_bg.png);
    background-repeat: repeat-x;
    background-position: bottom;
    /*background-color: #FFFFD5;*/
    background-color: #3161BD;
    color: #151C55;
    /*border-left: 2px solid #EE9311;
    border-right: 2px solid #EE9311;
    border-top: 2px solid #EE9311;*/
    border-left: 2px solid #3161BD;
    border-right: 2px solid #3161BD;
    border-top: 2px solid #3161BD;
}

.igdv_TimeSlotLabel
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:16pt;
    text-align:center;
    vertical-align:top;
    background-color:#D5E4F2;
    width:60px;
    border-bottom:1px solid #A8A8A8;
    border-right:1px solid #A8A8A8;
    color: #6593CF;
    border-left: 1px solid #A8A8A8;
}

.igdv_TimeSlotLabelMinutes
{
    vertical-align:9px;
    font-size:8pt;
}

.igdv_AllDayEventArea
{
    background-color:#A5BFE1;
    border-bottom: 1px solid #A8A8A8;
    /*border-left: 2px solid #EE9311;
    border-right: 2px solid #EE9311;*/
    border-left: 2px solid #3161BD;
    border-right: 2px solid #3161BD;
}

.igdv_AllDayEvent
{
    height:25px;
    /*border:solid 1px black;*/
    text-align:center;
    background-color:whitesmoke;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:8pt;
    padding-left:3px;
    white-space:nowrap;
    /*border-left: 2px solid #EE9311;
    border-right: 2px solid #EE9311;*/
    border-left: 2px solid #3161BD;
    border-right: 2px solid #3161BD;
}

.igdv_AllDayEventSelected
{
    background-color:#D0D0D0;
    border-top-width:2px;
    border-bottom-width:2px;
   
}

.igdv_AllDayEventAreaSelected
{
    background-color:#294C7A;
}

.igdv_NonWorkingTimeSlot
{
    background-color:#E6EDF7;
    border-bottom:1px solid #5D8CC9;
    /*border-left: 2px solid #EE9311;
    border-right: 2px solid #EE9311;*/
    border-left: 2px solid #3161BD;
    border-right: 2px solid #3161BD;
}

.igdv_WorkingTimeSlot
{
    background-color:#FFFFFF;
    border-bottom:1px solid #5D8CC9;
    /*border-left: 2px solid #EE9311;
    border-right: 2px solid #EE9311;*/
    border-left: 2px solid #3161BD;
    border-right: 2px solid #3161BD;
}

.igdv_Appointment
{
   
    background-color:White;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:8pt;
    /* background-image:url(WebSchedule/appoinment_bg.png); */
   
    margin-left:2px;
    margin-right:2px;
}

.igdv_ActivityHover
{
    z-index:10000;
}

.igdv_SelectedAppointment
{
    z-index:9999;
}

.igdv_ActivityEdge
{
    font-size:1px;
    height:4px;
    cursor:n-resize;
}

.igdv_ActivityEdgeLeft
{
    font-size:2px;
    width:6px;
    cursor:move;
}

.igdv_ActivityEdgeBusy
{
    /*background-color:#0010E6;*/
}

.igdv_ActivityEdgeTentative
{
    background-color:#90C0FF;
}

.igdv_ActivityEdgeOutofOffice
{
    background-color:#900090;
}

.igdv_ActivityEdgeFree
{
    background-color:#F0F0F0;
}

.igdv_NavigationButton
{
    border:0px;
    width:17px;
    background-color:transparent;
    vertical-align:middle;
    cursor: hand;
}

When I show in my page the calendar, in some situation (please see attachment) I can see a vertical and horizontal scrollbar. Those scrollbar disappear when I put tje mouse over an activity. The scrollbars appears newly when there is a postback in the page.

HOW CAN I PERMANENTLY HIDE  THE SCROLLBARS?

I have added in .igdv_DayViewFrame section of css:

overflow: hidden; (or none)

overflow-x: hidden; (or none)

white-space:normal;

with no success :(! So I added above tag in all sections of css, with still no success.:( :(!

 

Thanks

Marco

 

 

 

 

  • 25665
    Suggested Answer
    Offline posted

    Hello,


    After some research I have found how to disable the scroll bars for WebDayView. The CSS code to do so follows.


    .igdv_DayViewFrame div
    {
            overflow:hidden !important;
    }

    Please let me know if I may be of further assistance with this matter.


    Sincerely,
    Mike P.
    Developer Support Engineer
    Infragistics, Inc.
    www.infragistics.com