CodeZine(コードジン)

特集ページ一覧

カレンダーで日付を簡単に入力するWebページを作る

WebCalendar for .NETのC1WebCalendarコントロールをWebページに実装する

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/12/21 14:00
目次

基本的なカレンダー操作

 C1WebCalendarコントロールを組み込み、選択された日時を取得したり、カレンダーのデザインを変更する処理を持ったWebページを作ります。

日付をクリックするとLabelで表示される処理の作成

 カレンダーで選択された日時を取得して、ラベルに表示するWebページを作成します。

1

 Webフォームに、VS標準のWebコントロール「Label」とC1WebCalendarコントロールを配置します。ツールボックスからWebフォームにこれらのコントロールをドラッグ&ドロップするだけです。

「Label」とC1WebCalendarコントロールを配置する
「Label」とC1WebCalendarコントロールを配置する
2

  C1WebCalendarコントロールをクリックし、タスクトレイから「オートフォーマット」を選びます。ここでは、あらかじめ用意されたデザインから、C1WebCalendarコントロールを装飾することができます。

 ここでは、「Office 2003(Blue)」を選んでみました。

 
3

 再びC1WebCalendarコントロールをクリックし、プロパティウィンドウで「AutoPostBackOnSelect」プロパティをTrueにします。このプロパティをTrueにすると、日付を選択したときにその値をサーバに自動的にポストバックするようになります。

4

 ユーザーが日付をクリックすると、C1WebCalendarコントロールのSelectedDateプロパティに、その値が格納されるので、WebフォームのPage_Loadイベントハンドラに、その値をLabelのTextプロパティに代入する式を作成します。なお、SelectedDateプロパティの値はDate型なので、ToStringメソッドで文字列に変換します。

 Webフォームをダブルクリックすると、プロジェクトに「xxx.aspx.vb(xxx.aspx.cs)」というファイルが追加され、そこに「Page_Load」イベントハンドラが作成されます。これらのイベント処理はここに記述します。

Visual Basic
Imports System.Drawing

Partial Class mypage1
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, _
                       ByVal e As System.EventArgs) Handles Me.Load
        Me.Label1.Text = Me.C1WebCalendar1.SelectedDate.ToString
C#
using System.Drawing;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = C1WebCalendar1.SelectedDate.ToString();

 これで、C1WebCalendarコントロールの日付をクリックすると、その日時がLabelで表示されます。

日付をクリックすると、その日時がLabelで表示される
日付をクリックすると、その日時がLabelで表示される
5

 もう1つLabelを配置し、今度はC1WebCalendarコントロールで選択された日時を年・月・日に分けて取り出し、文字列と連結してLabelに表示します。

 C1WebCalendarコントロールのSelectedDateプロパティの値から、さらに「Year」「Month」「Day」プロパティを参照すると、この選択された日時の年月日の個々の値を取得できます。

Visual Basic
With Me.C1WebCalendar1.SelectedDate
    Me.Label2.Text = .Year & "年" & .Month & "月" & .Day & "日"
End With
C#
Label2.Text = C1WebCalendar1.SelectedDate.Year + "年" +
              C1WebCalendar1.SelectedDate.Month + "月" +
              C1WebCalendar1.SelectedDate.Day + "日";
日時を年・月・日に分けて取り出し表示する
日時を年・月・日に分けて取り出し表示する

カレンダーで選択した日付の色を変える処理

 今度は、ボタンを押すとカレンダーで選択した日付の色を、デフォルトから好きな色に変える処理を作成します。

 選択された日付の色は、SelectedDayStyleプロパティでCalendarItemStyleオブジェクトにアクセスし、このクラスのBackColor、ForeColorプロパティを使って変えることができます。

 WebフォームにVS標準のButtonコントロールを配置し、Clickイベントハンドラにこの処理を作成します。

Visual Basic
Protected Sub Button1_Click(ByVal sender As Object, _
              ByVal e As System.EventArgs) Handles Button1.Click
    With C1WebCalendar1
        .SelectedDayStyle.BackColor = Color.DeepPink
        .SelectedDayStyle.ForeColor = Color.White
    End With
End Sub
C#
protected void Button1_Click(object sender, EventArgs e)
{
    C1WebCalendar1.SelectedDayStyle.BackColor = Color.DeepPink;
    C1WebCalendar1.SelectedDayStyle.ForeColor = Color.White;
}

 このように、VS標準のコントロールを使う場合は、C1WebCalendarコントロールの「AutoPostBackOnSelect」プロパティをTrueにし、それぞれのイベントハンドラで処理を組み立てます。

選択した日付の色をデフォルトからピンクの白抜き文字に変える
選択した日付の色をデフォルトからピンクの白抜き文字に変える

 ↓

 

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ComponentZine(ComponentOne)

もっと読む

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5