I have a calendar you can view here
http://alpha.clickablecommunity.com/Calendar.aspx
When the page loads initially the calendar views fine. However, as soon as you change the view i.e. to day or month the calendar gets wider. However, if you resize your browser window at all (doubleclick to resize down and then resize up again), then it goes back to the proper size. I am completely stumped on this one. Here is my code.
aspx
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage.Master" CodeBehind="Calendar.aspx.vb" Inherits="ClickableCommunity.Calendar" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
function HideAppointment() {
var Scheduler = $find('<%= RadScheduler1.ClientID %>');
var app1 = Scheduler.get_appointments();
alert("Hiding the appointment : " + app1.getAppointment(1).get_subject());
app1.getAppointment(1).style.display = "none"; // Hide the first appointment
}//HideAppointment
function ShowAppointment() {
var Scheduler = $find('<%= RadScheduler1.ClientID %>');
var app1 = Scheduler.get_appointments();
alert("Showing the appointment : " + app1.getAppointment(1).get_subject());
app1.getAppointment(1)._domElements[0].style.display = "block"; // Show the first appointment
}//ShowAppointment
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="header" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="menuContent" runat="server">
<span style="padding-left:10px;">Coming soon...<br />
<a href="#" onclick="HideAppointment()">Hide</a></span>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div id="divCalendar">
<telerik:RadScheduler ID="RadScheduler1" runat="server" Height="500px"
HoursPanelTimeFormat="htt" Skin="Web20" ValidationGroup="RadScheduler1"
GroupingDirection="Vertical" CssClass="calendarView"
SelectedView="WeekView"
WeekView-DayStartTime="08:00:00"
WeekView-DayEndTime="23:59:00"
WeekView-WorkDayEndTime="23:59:00"
WeekView-WorkDayStartTime="08:00:00"
WorkDayEndTime="23:59:00"
DayEndTime="23:59:00"
DayView-DayEndTime="23:59:00"
DayView-DayStartTime="08:00:00"
DayView-WorkDayEndTime="23:59:00"
DayView-WorkDayStartTime="08:00:00" AllowDelete="false" AllowEdit="false" AllowInsert="false"
TimelineView-NumberOfSlots="7">
<DayView GroupingDirection="Horizontal" UserSelectable="True" />
<TimelineView GroupingDirection="Horizontal" />
<WeekView GroupingDirection="Horizontal" />
</telerik:RadScheduler>
</div>
<asp:SqlDataSource ID="eventsDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:connectionString %>"
SelectCommand="returnAllEvents" SelectCommandType="StoredProcedure">
</asp:SqlDataSource>
</asp:Content>
VB
Imports System.Data
Imports System.Data.Sql
Imports System.Data.SqlClient
Imports Telerik.Web.UI
Partial Public Class Calendar
Inherits System.Web.UI.Page
'my connection string
Dim conn As String = System.Configuration.ConfigurationManager.ConnectionStrings("connectionString").ToString
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not (Page.IsPostBack) Then
Dim table As DataTable = New DataTable()
table.Columns.Add("start")
table.Columns.Add("end")
table.Columns.Add("key")
table.Columns.Add("subject")
'my sql connection
Dim myConn As New Data.SqlClient.SqlConnection(conn)
'the name of the stored procedure
Dim strSQL = "returnAllEvents"
Dim returnCommand As New Data.SqlClient.SqlCommand(strSQL, myConn)
'tell the system it is a stored procedure
returnCommand.CommandType = CommandType.StoredProcedure
Try
myConn.Open()
Dim dr As SqlDataReader = returnCommand.ExecuteReader()
While dr.Read()
'0eventid, 1FK_CategoryID, 2latitude, 3longitude, 4events.name, 5description, 6businesses.name,
'7starttime, 8stoptime, 9locations.street, 10locations.city, 11locations.state, 12locations.zip
'set all of the textboxes to the input
table.Rows.Add(New String() {dr.Item(7), dr.Item(8), dr.Item(0), _
"Name: " & dr.Item(6)})
End While 'while dr.read()
Catch ex As Exception
Finally
End Try
Dim calendar As RadScheduler = RadScheduler1
calendar.DataSource = table
calendar.DataStartField = "start"
calendar.DataEndField = "end"
calendar.DataKeyField = "key"
calendar.DataSubjectField = "subject"
calendar.DataBind()
End If 'if not page.ispostback
End Sub
End Class
Master page
<%@ Master Language="VB" AutoEventWireup="false" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register TagPrefix="loginDivTemplate" TagName="login" src="/ascx/loginTemplate.ascx"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ import namespace="System.Data" %>
<%@ import namespace="System.Data.Sql" %>
<%@ import namespace="System.Data.SqlClient" %>
<%@ import namespace="Telerik.Web.UI" %>
<head id="Head1" runat="server">
<link href="ClickableCommunity.css" rel="stylesheet" type="text/css" />
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body id="MasterBody" runat="server" style="margin: 0px; height: 100%; overflow: hidden;">
<form id="Form1" method="post" runat="server" style="height: 100%">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:ContentPlaceHolder ID="header" runat="server">
</asp:ContentPlaceHolder>
<div id="loginDiv">
<loginDivTemplate:login id="loginPanelContent" runat="server"></loginDivTemplate:login>
</div>
<div id="topDiv">
<div id="image" class="topDivImage">
<img src="images/logo.jpg" alt="Clickable Community Logo" width="200" height="75" />
</div>
<div id="viewMenu" class="viewMenu">
<center>
<table><tr><td>
<telerik:RadMenu ID="RadMenu1" runat="server" Skin="Web20">
<Items>
<telerik:RadMenuItem runat="server" Text="Events View">
<Items>
<telerik:RadMenuItem runat="server" NavigateUrl="~/Default.aspx" Text="Map">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" NavigateUrl="~/Lis.aspx" Text="List">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Calendar" NavigateUrl="Calendar.aspx">
</telerik:RadMenuItem>
</Items>
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
</td></tr></table>
</center>
</div>
</div>
<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Width="100%" CssClass="AllContent" LiveResize="true">
<telerik:RadPane ID="LeftRadPane1" runat="server" Width="220px" Scrolling="Both"
BorderStyle="None" BorderSize="0">
<div id="leftPanel">
<asp:ContentPlaceHolder ID="menuContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</telerik:RadPane>
<telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" EnableResize="false"
ForeColor='Green' />
<telerik:RadPane ID="RightRadPane1" runat="server" CssClass="RightPanelPadding" Scrolling="Both"
BorderStyle="None" BorderSize="0" Height="100%">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</telerik:RadPane>
</telerik:RadSplitter>
</form>
</body>
</html>
And css
html, body, form
{
height: 100%;
width: 100%;
margin: 0;
padding:0;
}
#leftPanel{
display:inline;
width:220px;
border-top-style: none;
border-right-style: none;
border-left-style: none;
}
.normalText{
font-size:12px;
font-family: Arial;
}
.loginLabel{
padding-right: 10px;
padding-bottom: 10px;
}
.loginTextBox{
width: 120px;
}
.leftPanelContent{
padding-bottom: 30px;
}
#topDiv{
height: 60px;
border-bottom-width: 4px;
border-bottom-color: Gray;
border-bottom-style:groove;
}
.calendarView{
width:auto !important;
}
.tableColumn{
width:150px;
}
#loginDiv{
position: absolute;
display:inline;
right: 10px;
top: 5px;
}
#menuDiv{
position: absolute;
padding-top: 75px;
margin-left: auto;
margin-right:auto;
}
.AllContent{
border-right: none;
height: auto;
}
.businessToolTip{
position: absolute;
z-index: 500;
top:300px;
left:300px;
}
.stateDropDownText{
font-size: 11px;
font-family: Arial;
}
.adminTableDiv{
text-align: center;
width: 200px;
height:100%;
padding-right:20px;
display: inline;
}
.adminMainDiv{
width: 420px;
}
.center{
padding-left:auto;
padding-right:auto;
}
.textRed{
color: Red;
}
.successText{
color:Green;
}
.addBusinessSpacing{
padding-right: 20px;
height: 70px;
}
.adminTableLabel{
text-align: center;
display: block;
}
.addBusinessTextBox{
width:150px;
text-align:center;
}
#MainContent{
display:inline;
}
.displayInline{
display: inline;
}
#divMap{
height: 500px;
border: groove 4px #EEEEEE;
border-right: groove 4px #EEEEEE;
margin-left: auto;
margin-right: auto;
padding-right: 10px;
}
#divCalendar{
height: 500px;
border: groove 4px #EEEEEE;
margin-left: auto;
margin-right: auto;
width:auto;
}
.RightPanelPadding
{
position: relative;
height:auto !important;
padding-left: 10px;
padding-top:10px;
padding-right:10px;
padding-bottom: 10px;
margin-top: auto;
margin-bottom: auto;
}
.errorMessage{
color: Red;
font-size: 10px;
font-family: Arial;
}
.topDivImage{
position: absolute;
top: 0;
left: 0;
display:inline;
width:220px;
}
.viewMenu{
padding-left:220px;
margin-right:auto;
margin-left:auto;
text-align:center;
width:800px;
vertical-align:bottom;
padding-top: 34px;
}
.emptyTextboxText{
font-style:italic;
font-size:10px;
color: #D8D8D8;
}
Although I bind it in the codebehind, you can do it in the aspx page and get the same problem. Any ideas? Thanks,
http://alpha.clickablecommunity.com/Calendar.aspx
When the page loads initially the calendar views fine. However, as soon as you change the view i.e. to day or month the calendar gets wider. However, if you resize your browser window at all (doubleclick to resize down and then resize up again), then it goes back to the proper size. I am completely stumped on this one. Here is my code.
aspx
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage.Master" CodeBehind="Calendar.aspx.vb" Inherits="ClickableCommunity.Calendar" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
function HideAppointment() {
var Scheduler = $find('<%= RadScheduler1.ClientID %>');
var app1 = Scheduler.get_appointments();
alert("Hiding the appointment : " + app1.getAppointment(1).get_subject());
app1.getAppointment(1).style.display = "none"; // Hide the first appointment
}//HideAppointment
function ShowAppointment() {
var Scheduler = $find('<%= RadScheduler1.ClientID %>');
var app1 = Scheduler.get_appointments();
alert("Showing the appointment : " + app1.getAppointment(1).get_subject());
app1.getAppointment(1)._domElements[0].style.display = "block"; // Show the first appointment
}//ShowAppointment
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="header" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="menuContent" runat="server">
<span style="padding-left:10px;">Coming soon...<br />
<a href="#" onclick="HideAppointment()">Hide</a></span>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div id="divCalendar">
<telerik:RadScheduler ID="RadScheduler1" runat="server" Height="500px"
HoursPanelTimeFormat="htt" Skin="Web20" ValidationGroup="RadScheduler1"
GroupingDirection="Vertical" CssClass="calendarView"
SelectedView="WeekView"
WeekView-DayStartTime="08:00:00"
WeekView-DayEndTime="23:59:00"
WeekView-WorkDayEndTime="23:59:00"
WeekView-WorkDayStartTime="08:00:00"
WorkDayEndTime="23:59:00"
DayEndTime="23:59:00"
DayView-DayEndTime="23:59:00"
DayView-DayStartTime="08:00:00"
DayView-WorkDayEndTime="23:59:00"
DayView-WorkDayStartTime="08:00:00" AllowDelete="false" AllowEdit="false" AllowInsert="false"
TimelineView-NumberOfSlots="7">
<DayView GroupingDirection="Horizontal" UserSelectable="True" />
<TimelineView GroupingDirection="Horizontal" />
<WeekView GroupingDirection="Horizontal" />
</telerik:RadScheduler>
</div>
<asp:SqlDataSource ID="eventsDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:connectionString %>"
SelectCommand="returnAllEvents" SelectCommandType="StoredProcedure">
</asp:SqlDataSource>
</asp:Content>
VB
Imports System.Data
Imports System.Data.Sql
Imports System.Data.SqlClient
Imports Telerik.Web.UI
Partial Public Class Calendar
Inherits System.Web.UI.Page
'my connection string
Dim conn As String = System.Configuration.ConfigurationManager.ConnectionStrings("connectionString").ToString
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not (Page.IsPostBack) Then
Dim table As DataTable = New DataTable()
table.Columns.Add("start")
table.Columns.Add("end")
table.Columns.Add("key")
table.Columns.Add("subject")
'my sql connection
Dim myConn As New Data.SqlClient.SqlConnection(conn)
'the name of the stored procedure
Dim strSQL = "returnAllEvents"
Dim returnCommand As New Data.SqlClient.SqlCommand(strSQL, myConn)
'tell the system it is a stored procedure
returnCommand.CommandType = CommandType.StoredProcedure
Try
myConn.Open()
Dim dr As SqlDataReader = returnCommand.ExecuteReader()
While dr.Read()
'0eventid, 1FK_CategoryID, 2latitude, 3longitude, 4events.name, 5description, 6businesses.name,
'7starttime, 8stoptime, 9locations.street, 10locations.city, 11locations.state, 12locations.zip
'set all of the textboxes to the input
table.Rows.Add(New String() {dr.Item(7), dr.Item(8), dr.Item(0), _
"Name: " & dr.Item(6)})
End While 'while dr.read()
Catch ex As Exception
Finally
End Try
Dim calendar As RadScheduler = RadScheduler1
calendar.DataSource = table
calendar.DataStartField = "start"
calendar.DataEndField = "end"
calendar.DataKeyField = "key"
calendar.DataSubjectField = "subject"
calendar.DataBind()
End If 'if not page.ispostback
End Sub
End Class
Master page
<%@ Master Language="VB" AutoEventWireup="false" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register TagPrefix="loginDivTemplate" TagName="login" src="/ascx/loginTemplate.ascx"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ import namespace="System.Data" %>
<%@ import namespace="System.Data.Sql" %>
<%@ import namespace="System.Data.SqlClient" %>
<%@ import namespace="Telerik.Web.UI" %>
<head id="Head1" runat="server">
<link href="ClickableCommunity.css" rel="stylesheet" type="text/css" />
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body id="MasterBody" runat="server" style="margin: 0px; height: 100%; overflow: hidden;">
<form id="Form1" method="post" runat="server" style="height: 100%">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:ContentPlaceHolder ID="header" runat="server">
</asp:ContentPlaceHolder>
<div id="loginDiv">
<loginDivTemplate:login id="loginPanelContent" runat="server"></loginDivTemplate:login>
</div>
<div id="topDiv">
<div id="image" class="topDivImage">
<img src="images/logo.jpg" alt="Clickable Community Logo" width="200" height="75" />
</div>
<div id="viewMenu" class="viewMenu">
<center>
<table><tr><td>
<telerik:RadMenu ID="RadMenu1" runat="server" Skin="Web20">
<Items>
<telerik:RadMenuItem runat="server" Text="Events View">
<Items>
<telerik:RadMenuItem runat="server" NavigateUrl="~/Default.aspx" Text="Map">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" NavigateUrl="~/Lis.aspx" Text="List">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Calendar" NavigateUrl="Calendar.aspx">
</telerik:RadMenuItem>
</Items>
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
</td></tr></table>
</center>
</div>
</div>
<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Width="100%" CssClass="AllContent" LiveResize="true">
<telerik:RadPane ID="LeftRadPane1" runat="server" Width="220px" Scrolling="Both"
BorderStyle="None" BorderSize="0">
<div id="leftPanel">
<asp:ContentPlaceHolder ID="menuContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</telerik:RadPane>
<telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" EnableResize="false"
ForeColor='Green' />
<telerik:RadPane ID="RightRadPane1" runat="server" CssClass="RightPanelPadding" Scrolling="Both"
BorderStyle="None" BorderSize="0" Height="100%">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</telerik:RadPane>
</telerik:RadSplitter>
</form>
</body>
</html>
And css
html, body, form
{
height: 100%;
width: 100%;
margin: 0;
padding:0;
}
#leftPanel{
display:inline;
width:220px;
border-top-style: none;
border-right-style: none;
border-left-style: none;
}
.normalText{
font-size:12px;
font-family: Arial;
}
.loginLabel{
padding-right: 10px;
padding-bottom: 10px;
}
.loginTextBox{
width: 120px;
}
.leftPanelContent{
padding-bottom: 30px;
}
#topDiv{
height: 60px;
border-bottom-width: 4px;
border-bottom-color: Gray;
border-bottom-style:groove;
}
.calendarView{
width:auto !important;
}
.tableColumn{
width:150px;
}
#loginDiv{
position: absolute;
display:inline;
right: 10px;
top: 5px;
}
#menuDiv{
position: absolute;
padding-top: 75px;
margin-left: auto;
margin-right:auto;
}
.AllContent{
border-right: none;
height: auto;
}
.businessToolTip{
position: absolute;
z-index: 500;
top:300px;
left:300px;
}
.stateDropDownText{
font-size: 11px;
font-family: Arial;
}
.adminTableDiv{
text-align: center;
width: 200px;
height:100%;
padding-right:20px;
display: inline;
}
.adminMainDiv{
width: 420px;
}
.center{
padding-left:auto;
padding-right:auto;
}
.textRed{
color: Red;
}
.successText{
color:Green;
}
.addBusinessSpacing{
padding-right: 20px;
height: 70px;
}
.adminTableLabel{
text-align: center;
display: block;
}
.addBusinessTextBox{
width:150px;
text-align:center;
}
#MainContent{
display:inline;
}
.displayInline{
display: inline;
}
#divMap{
height: 500px;
border: groove 4px #EEEEEE;
border-right: groove 4px #EEEEEE;
margin-left: auto;
margin-right: auto;
padding-right: 10px;
}
#divCalendar{
height: 500px;
border: groove 4px #EEEEEE;
margin-left: auto;
margin-right: auto;
width:auto;
}
.RightPanelPadding
{
position: relative;
height:auto !important;
padding-left: 10px;
padding-top:10px;
padding-right:10px;
padding-bottom: 10px;
margin-top: auto;
margin-bottom: auto;
}
.errorMessage{
color: Red;
font-size: 10px;
font-family: Arial;
}
.topDivImage{
position: absolute;
top: 0;
left: 0;
display:inline;
width:220px;
}
.viewMenu{
padding-left:220px;
margin-right:auto;
margin-left:auto;
text-align:center;
width:800px;
vertical-align:bottom;
padding-top: 34px;
}
.emptyTextboxText{
font-style:italic;
font-size:10px;
color: #D8D8D8;
}
Although I bind it in the codebehind, you can do it in the aspx page and get the same problem. Any ideas? Thanks,