1

デフォルトの ajax Calender のスタイルをオーバーライドして、より大きなサイズの ajax Calander コントロールを作成したいと考えています。

より大きな視野で動作するはずです。試してみましたが、月/年ビューを選択しようとするとうまくいきません..

ここでは、正確に ajax カレンダー コントロールでやりたいことのスクリーンショットを添付しました。

ここに画像の説明を入力



iPadのウェブサイト用に大きく表示することはできますか？

または、Ipad Web サイトの適切なカレンダー コントロールを提案してください。asp.net Web サイトを使用したいです。

ありがとうございます

4

2 に答える 2

-1

私は私の答えが遅いことを知っています。あなたが ajax カレンダーについて質問していることは知っています。しかし、それは他の人を助けるかもしれません。何人かのプログラマーが、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;
}

これらのスタイルは、自由にカスタマイズできます。

于 2015-04-08T20:00:19.443 に答える
-1

私はちょうどこれを自分で経験しました。あなたがする必要がある3つのことがあります。

まず、css クラスをコントロールに追加します。ただし、これを行うと ajax__calendar の既存のクラスが消去されるため、既存のスタイリングのほとんどが CalendarExtender に追加されることに注意してください

 CssClass="ajax__calendar bigcal"

bigcal は新しいクラスです。

2番目-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にリセットしたことに注意してください-それに応じて調整します

3番目-JavaScriptでサイズを変更する必要があります。デフォルトでは、スクロールなどが機能するように設定されたサイズになっています。それで

以下を CalendarExtender に追加します。

OnClientShown="setBigCal"

そして、次のjs関数

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

HTH :)

編集 - 申し訳ありませんが、この質問の日付を見たばかりなので、すでにソートされていると思います。しかし、他の誰かが同じ問題に遭遇した場合に備えて、回答を残しておきます。

于 2014-01-03T15:20:08.327 に答える