search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

DayPilotCalendar not rendering hours correctly in HeightSpec=BusinessHoursNoScroll if toggled hidden/visible

Asked by Luke
4 years ago.

All,

The control DayPilotCalendar (lite version) is not rendering the specified hours (ex: 9-16, HeightSpec=BusinessHoursNoScroll), if the control is inside a div that has its visibility toggled (hide/show) or when it starts hidden and then is made visible later.

The hour range is correct (in this example 7 hour range) but it always starts at 12 am.

Test Case (source code):

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<script type="text/javascript">

function toggle() {
$("#div1").toggle();
}
</script>

<div class="note"><b>Note:</b> Read more about controlling the event calendar <a href="http://doc.daypilot.org/calendar/height/">height</a>.</div>

<div>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Value="scroll">Show busines hours, with scrollbar</asp:ListItem>
<asp:ListItem Value="hide">Show business hours, without scrollbar</asp:ListItem>
<asp:ListItem Value="show">Show full hours</asp:ListItem>
</asp:DropDownList><br />
<br />

<input type="button" id="button1" onclick="toggle();" value="toggle" />
<div id="div1" style="display: block;">
<daypilot:daypilotcalendar id="ctlAppointmentsCalendar" runat="server"
DataStartField="Start"
dataendfield="End"
datatextfield="Name"
datavaluefield="Id"
Days="1"

BusinessBeginsHour="5"
BusinessEndsHour="19"
></daypilot:daypilotcalendar>
</div>
</div>
</asp:Content>

Comment posted by Luke
4 years ago.

Forgot to specify in my sample HeightSpec="BusinessHoursNoScroll", here's source code again (complete):

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<script type="text/javascript">

function toggle() {
$("#div1").toggle();
}
</script>

<div class="note"><b>Note:</b> Read more about controlling the event calendar <a href="http://doc.daypilot.org/calendar/height/">height</a>.</div>

<div>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Value="scroll">Show busines hours, with scrollbar</asp:ListItem>
<asp:ListItem Value="hide">Show business hours, without scrollbar</asp:ListItem>
<asp:ListItem Value="show">Show full hours</asp:ListItem>
</asp:DropDownList><br />
<br />

<input type="button" id="button1" onclick="toggle();" value="toggle" />
<div id="div1" style="display: block;">
<daypilot:daypilotcalendar id="ctlAppointmentsCalendar" runat="server"
DataStartField="Start"
dataendfield="End"
datatextfield="Name"
datavaluefield="Id"
Days="1"

BusinessBeginsHour="5"
BusinessEndsHour="19"
HeightSpec="BusinessHoursNoScroll"

></daypilot:daypilotcalendar>
</div>
</div>
</asp:Content>

Answer posted by Dan Letecky [DayPilot]
4 years ago.

The browsers don't allow setting the scrollbar position on elements that are hidden.

The workaround is to call dp.enableScrolling() on the client side after the control becomes visible (where "dp" is the value of ClientObjectName property).

Just note that this is internal API that will be hidden in one of the future releases. There is a workaround implemented in the Pro version that detects when the control becomes visible and fixes the scrollbar position. It will be ported to the Lite version as soon as the internal .enableScrolling() gets hidden.

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.