Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Calendar > Calendar Layout Bug

• ewart Master

  Posted on May 28, 2007 (permalink)

  Hi, when I drag and drop a calendar onto a form, then
   
  1. set ShowRowHeaders="false"
  2. set Skin="Web20"
  
  it doesn't account for the missing row headers and renders incorrectly.  Example:
  
  

  <radCln:RadCalendar ID="RadCalendar1" runat="server" Font-Names="Arial, Verdana, Tahoma" ShowRowHeaders="false"

  ForeColor="Black" Skin="Web20" Style="border-left-color: #ececec; border-bottom-color: #ececec;

  border-top-color: #ececec; border-right-color: #ececec">

  </radCln:RadCalendar>

  
  
  Do you have a patch I could use? 
  
  kind regards
    ewart
  

• Martin Ivanov Martin Ivanov

  Posted on May 29, 2007 (permalink)

  Hello ewart,
  
  Please, copy the following css code into Skins/Web20/Calendar.css:
  
  

  .TableLayout_Web20
  {
      width: 100%;
  }

  This will fix the problem.
  
  Currently RadCalendar is undergoing a serious frontend rewriting which will bring easier, more flexible and bullet-proof skinning.
  
  Stay tuned :)
  
  Best wishes,
  Martin Ivanov
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

• ewart Master

  Posted on May 29, 2007 (permalink)

  Thanks for that.
  
  When applied it worked brilliantly on one page but not another so by way of feedback - as far as I can determine it is something to do with manually specifying the width.  See below, the first width setting is sweet and the second isn't.
  
  

  <radCln:RadCalendar ID="RadCalendar1" runat="server" Font-Names="Arial, Verdana, Tahoma" ShowRowHeaders="false"

  ForeColor="Black" Skin="Web20" Style="border-left-color: #ececec; border-bottom-color: #ececec;

  border-top-color: #ececec; border-right-color: #ececec" Height="114px" Width="601px">

  </radCln:RadCalendar>

  <radCln:RadCalendar ID="RadCalendar2" runat="server" Font-Names="Arial, Verdana, Tahoma" ShowRowHeaders="false" Width="100"

  ForeColor="Black" Skin="Web20" Style="border-left-color: #ececec; border-bottom-color: #ececec;

  border-top-color: #ececec; border-right-color: #ececec">

  </radCln:RadCalendar>

  
  regards
  ewart
  
  

• ewart Master

  Posted on May 29, 2007 (permalink)

  ps I also just noticed that in the first one, the day headers (M, T, W, T, F, S & S) are not centered.  The are kinda left aligned which is weird.  Hope that helps your design team -- the web20 calendar is infact otherwise pretty awesum looking I think!
  
  cheers
  ewart

• Petja Petja

  Posted on May 29, 2007 (permalink)

  Hello Ewart,
  
  The second declared calendar does not look good as it has defined width (equal to 100) which is less than the calendar wrapper table width (defined to be 264px in the Web20 skin css class .calendarWrapper_Web20). If you remove the width style setting of the second class (positioned at ~\RadControls\Calendar\Skins\Web20\Calendar.css), the calendar will look good.
  Concerning centering of the column headers text, this is IE issue - it centers the text due to the declared width of the cell. As the cell width is declared to be 32px by the headers style class .DaysOfWeek_Web20, the IE centers the text to it. You can test the page with Firefox and the text will be centered. You can workaround this behavior by removing the width style declaration from the class .DaysOfWeek_Web20.
  We hope that helps.
  
  Regards,
  Petja
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

• ewart Master

  Posted on Jul 15, 2007 (permalink)

  Hi again, I have applied hotfix 2007 Q1 SP2 and are have been using my own selected day style class on this particular calendar radCalGreen
  
  

  <radCln:RadCalendar ID="rdHolidays" runat="server" AutoPostBack="True" CultureID="5129"

  CultureInfo="English (New Zealand)" EnableMultiSelect="True" Font-Names="Arial,Verdana,Tahoma"

  ForeColor="Black" Height="162px" SelectedDate="" Style="border-left-color: #ececec;

  border-bottom-color: #ececec; border-top-color: #ececec; border-right-color: #ececec"

  ShowRowHeaders="False" UseColumnHeadersAsSelectors="False"

  Skin="Web20">

  <SelectedDayStyle CssClass="radCalGreen_Web20" />

  </radCln:RadCalendar>

  
  however, I noticed now that the output is being rendered as:
  
  

  <td class="radCalSelect_Web20 radCalGreen_Web20" title="Wednesday, July 04, 2007"><a href="#" onclick="return false;" >4</a></td><

  
  which is placing the background radCalSelect_Web20 ontop of the radCalGreen leaving a distinctly undesirable effect in my case.  I thought it used to just render the one classname before the hotfix but maybe I am dreaming!  why does it not use just the one css class that I requested?
  
  incidentally, the patch which you kindly gave to me to earlier, to overcome the bug I reported (telerik points, hint hint :)) unfortunatly did not make it into the latest hotfix.
  
  kind regards
  ewart
  

• Petja Petja

  Posted on Jul 16, 2007 (permalink)

  Hello Ewart,
  
  As you can set Skin="Web20" and a custom css class to a RadCalendar style, the both classes are rendered and their settings are merged. This is made due to the fact that most of our clients just set some color or font property in the style setting and other layout settings which are necessary for the consistence calendar look with the other calendar states should come from the skin css file.
  The Web20 skin is using images for its styling. If the image is the undesirable effect, you could modify the following classes declaration in the css file (positioned at ~\RadControls\Calendar\Skins\Web20\Calendar.css) not to use it by the following code:
  

  .radCalWeekendSelect_Web20 a,

  .radCalSelect_Web20 a

  {

  font: normal 18px Arial, Verdana, Sans-serif;

  color: black;

  /*background: transparent url('Img/selectBg.gif') no-repeat;*/

  }

  
  If not, please, send to us your current RadCalendar declaration with the radCalGreen style class too, so we could review them locally and update them with the desired functionality. Thank you for your cooperation.
  
  Kind regards,
  Petja
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Calendar > Calendar Layout Bug