﻿<%@ Page %>
<%@ Register TagPrefix="demos" TagName="Header" Src="~/common/page_fragments/header.ascx"%>
<%@ Register TagPrefix="demos" TagName="Footer" Src="~/common/page_fragments/footer.ascx"%>
<%@ Register TagPrefix="demos" TagName="About" Src="~/common/page_fragments/about.ascx"%>
<%@ Register TagPrefix="ComponentArt" Namespace="ComponentArt.Web.UI" Assembly="ComponentArt.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
  <head>
    <title>Popup Calendar</title>
    <link href="../../../common/baseStyle.css" type="text/css" rel="stylesheet" />
    <link href="calendarStyle.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript">
      function onPickerChange(picker)
      {
        Calendar1.SetSelectedDate(picker.GetSelectedDate());
      }
      function onCalendarChange(calendar)
      {
        Picker1.SetSelectedDate(calendar.GetSelectedDate());
      }
    </script>
  </head>

  <body>  
    <form id="Form1" method="post" runat="server">

    <demos:header DemoName="Popup Calendar" id="pageHeader" SiteMapFile="calendarDemos.xml" ProductLogo="logo_calendar.gif" runat="server"/>
    <div class="DemoArea">

    Select a date: 
    <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td><ComponentArt:Calendar id="Picker1" 
   ControlType="Picker" 
   ClientSideOnSelectionChanged="onPickerChange" 
   PickerFormat="Custom" 
   PickerCustomFormat="MMMM d yyyy" 
   PickerCssClass="picker" 
   SelectedDate="2005-12-14"
   runat="server" /></td>
      <td style="font-size:10px;"> </td>
      <td><img id="calendar_button" alt="" onclick="Calendar1.SetSelectedDate(Picker1.GetSelectedDate());Calendar1.Show();" class="calendar_button" src="images/btn_calendar.gif" width="25" height="22" /></td>
    </tr>
    </table>

    <ComponentArt:Calendar runat="server"
      id="Calendar1" 
      AllowMonthSelection="true"
      AllowMultipleSelection="false"
      AllowWeekSelection="true"
      CalendarCssClass="calendar" 
      CalendarTitleCssClass="title" 
      ClientSideOnSelectionChanged="onCalendarChange" 
      ControlType="Calendar"
      DayCssClass="day" 
      DayHeaderCssClass="dayheader" 
      DayHoverCssClass="dayhover" 
      DayNameFormat="FirstTwoLetters"
      ImagesBaseUrl="images/"
      MonthCssClass="month"
      NextImageUrl="cal_nextMonth.gif"
      NextPrevCssClass="nextprev" 
      OtherMonthDayCssClass="othermonthday" 
      PopUp="Custom"
      PopUpExpandControlId="calendar_button"
      PrevImageUrl="cal_prevMonth.gif" 
      SelectedDate="2005-12-14"
      VisibleDate="2005-12-14"
      SelectedDayCssClass="selectedday" 
      SelectMonthCssClass="selector"
      SelectMonthText="¤" 
      SelectWeekCssClass="selector"
      SelectWeekText="»" 
      SwapDuration="300"
      SwapSlide="Linear"
    />

    </div>

    <demos:about id="demoAboutText" AboutFile="~/calendar/features/popup_calendar/about.inc" runat="server"/>

    <demos:footer id="pageFooter" runat="server"/>

    </form>
    
  </body>
</html>



 
.calendar_button
{
  border:none;
  cursor:pointer;
}

.picker
{
  background-color: #FFFFFF;
  border: 1px gray solid;
  font-size: 12px;
  font-weight: bold;
  font-family: "Verdana",monospace;
  padding: 2px;
  cursor: pointer;
}

.calendar td
{
  font-size:11px;
}

.title
{
  font-weight:bold;
  background-color:#D7D7E5;
}

.day
{
  width:25px;
  cursor:pointer;
  text-align:center;
  border-width:1px;
  border-color:#F6F6F6;
  border-style:solid;
}

.dayhover
{
  width:25px;
  cursor:pointer;
  text-align:center;
  text-decoration:underline;
  border-width:1px;
  border-color:#F6F6F6;
  border-style:solid;
}

.dayheader
{
  width:25px;
  text-align:center;
  border-width:1px;
  border-color:white;
  border-style:solid;
  font-weight:bold;
  background-color:#FFFFFF;
}

.othermonthday
{
  color:#999999;
}

.outofrangeday
{
  visibility:hidden;
}

.selectedday
{
  width:25px;
  background-color:#FBE694;
  color:#000000;
  border-width:1px;
  border-color:#BB5503 !important;
  border-style:solid;
  font-weight:bold;
}

.calendar
{
  border-style:solid;
  border-width:1px;
  border-color:Black;
  border-collapse:collapse;
  background-color:#FFFFFF;
  cursor:default;
}

.month
{
  background-color:#F6F6F6;
  margin-left:5px;
  margin-right:5px;
  margin-bottom:5px;
  margin-top:0px;
}

.nextprev
{
  cursor:pointer;
  height:25px;
  vertical-align:center;
  padding:0px 5px 0px 5px;
}

.selector
{
  width:14px;
  cursor:pointer;
  text-align:left;
  vertical-align:center;
  background-color:#FFFFFF;
} 
 
