Clientside Set Height

Asked by ExpertAgent
11 years ago.

I'd be grateful for some help.

I'm trying to resize the DayPilot Calendar control in JavaScript based on the size of the browser window.

I've set the HeightSpec to "Fixed", and the Height to "100" when initialising the control. The full control is here:

<DayPilot:DayPilotCalendar id="dpDiary" runat="server"
DataRecurrenceField = "Recurrence"
DataEndField="end"
DataStartField="start"
DataColumnField="AppointmentNegotiator"
DataTextField="name"
DataValueField="id"
DataTagFields="name, id"
DataAllDayField="AllDay"
OnEventMove="DayPilotCalendar1_EventMove"
Days="3"
HeaderLevels="2"
ViewType="Resources"
EventMoveHandling="CallBack"
ContextMenuID="DayPilotMenu1"
EventResizeHandling="CallBack"
OnEventResize="DayPilotCalendar1_EventResize"
TimeRangeSelectedHandling="Hold"
EventClickHandling="JavaScript"
EventClickJavaScript="editAppointment(e)"
HeightSpec="Fixed"
height="100"
ClientObjectName="dpc1"
EventDeleteJavaScript="deleteAppointment(e)"
EventSelectHandling="CallBack"
OnRefresh="DayPilotCalendar1_Refresh"
EventSelectColor="Blue"
CellDuration="15"
ContextMenuSelectionID="DayPilotMenu1"
HourFontSize="12pt"
EventBackColor="White"
HeaderDateFormat="D"
HeaderFontSize="8pt"
EventBorderColor="#8080FF"
AllDayEventHeight="24"
HeaderHeight="20"
CellHeight="15"
BubbleID="DayPilotBubble1"
ShowToolTip="False"
ShowAllDayEvents="true"
EventDeleteHandling="Javascript"
EventArrangement="Cascade"
EventCorners="Rounded"
RecurrentEventImage="/Img/recur10x9.png"
RecurrentEventExceptionImage="/Img/recurex10x9.png" style="top: 0px; left: 1px">
</DayPilot:DayPilotCalendar>

I've got the following JavaScript:

$(document).ready(function () {
dpc1.height = document.documentElement.clientHeight;
});

Which doesn't do anything (but doesn't error!)

If I change the JavaScript to replace the browser height with a fixed number (as below), this works absolutely fine, and the DayPilot Calendar correctly resizes.

$(document).ready(function () {
dpc1.height = 700;
});

Am I doing something wrong?

how-to asp.net

Answer posted by Marcus
11 years ago.

Thanks Dan for your help.

The best way to do this is to use HeightSpec="Parent100Pct".

You can set the height of the parent element as you wish. If you need to update the height to match the height of the parent element, you should call dpc.resize(). This is called automatically on browser window change but if you change the parent element height using JavaScript you need to call it manually.

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

Clientside Set Height

Products

Learn

Get Support

DayPilot Pro