如何使Ipad網站的AjaxCalender控件更大尺寸？

Question

我想通過覆蓋默認ajax日曆的樣式來製作更大尺寸的ajax Calander控件。

它應該是在更大的視圖工作。我嘗試過，但當我試圖選擇月/年視圖時，它運行得不好。

這裏我附上了截圖，我正想用ajax日曆控件做什麼。

將有可能使iPad的網站查看大圖？

或者建議我用Ipad網站做好日曆控制，我想用asp.net網站。

感謝 阿布舍克

Answer 1

我通過這個被自己。有3件事你需要做。

第一個 - 爲您的控件添加一個css類。但要注意，如果你做到這一點抹現有類ajax__calendar的，所以大多數的現有的造型使添加到CalendarExtender

CssClass="ajax__calendar bigcal" 

其中bigcal是你的新類。

秒 - 使用bigcal類添加您的CSS樣式 - 例如，

.bigcal .ajax__calendar_container { width: 220px; font-size:14px;} 
.bigcal .ajax__calendar .ajax__calendar_container {border: 3px solid #646464;} 
.bigcal .ajax__calendar_days, .bigcal .ajax__calendar_months, .bigcal .ajax__calendar_years, .bigcal .ajax__calendar_body 
{width:220px;height:200px} 
.bigcal .ajax__calendar_month, .bigcal .ajax__calendar_year{height:55px;padding-top:4px} 
.bigcal .ajax__calendar_container table, .bigcal .ajax__calendar_container TD {font-size:14px} 
.bigcal .ajax__calendar_days td div{padding:4px 5px 4px 4px} 

通知我已經它的大小重置爲220寬200高 - 相應地調整

第三 - 你需要改變它的大小在JavaScript，COS默認爲一組大小的滾動等工作。所以

以下添加到CalendarExtender

OnClientShown="setBigCal" 

然後將下面的js函數

function setBigCal(sender, e) { 
    sender._height = 200; 
    sender._width = 220; 
} 

HTH :)

編輯 - 對不起 - 剛剛看到關於這個問題的日期，以便我假設你已經排序。但是，我會留下答案，任何人得到同樣的問題。

Answer 2

我知道我的回答遲到了。我知道你在問阿賈克斯日曆。但它可能會幫助其他人。幾個程序員問如何格式化asp.net日曆。您可以使用以下樣式格式化asp.net日曆：

.calander { 
    background-color: whitesmoke; 
    border: 1px solid; 
    height: 305px; 
    width: 280px; 
} 

    .calander table tr td { 
     padding: 10px; 
    } 

     .calander table tr td:hover { 
      background-color:rgb(200, 255, 0); 
     } 

.ajax__calendar_today { 
    background-color: rgb(209, 233, 255) !important; 
    border-radius: 3px; 
} 

.ajax__calendar_footer { 
    background-color: rgb(209, 233, 255) !important; 
    width: 100% !important; 
    margin: 0px !important; 
    padding: 0px !important; 
    position: relative !important; 
    height: auto !important; 
} 

.ajax__calendar_active { 
    background-color: rgb(200, 255, 0) !important; 
    border-radius: 3px; 
} 

.ajax__calendar_day { 
    height: 20px !important; 
    width: 20px !important; 
    padding: 0px; 
    text-align: center; 
    margin-top: -8px; 
    margin-left: -5px; 
} 

.ajax__calendar_body { 
    width: 270px !important; 
    height: 245px !important; 
} 

.ajax__calendar_container { 
    width: auto !important; 
} 

這些樣式可以以任何您想要的方式自定義。