WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

CheckBox 付き Calendar コントロール

by WebSurfer 14. November 2010 17:42
CheckBox 付き Calendar コントロール

Calendar コントロールに CheckBox を配置して、それにチェックを入れた日付をポストバックしてサーバー側で取得するサンプルです。

CheckBox にチェックを入れる/外すたびにポストバックして、チェックを入れた/外した日付を ViewState に追加/削除し、Show selected dates ボタンクリックでチェックが入っている日付を Label に表示します。

「チェックを入れる/外すたびにポストバック」というのがちょっとわずらわしい感じですね。(汗)

でも、月をまたがって日付にチェックを入れる(例えば、1 月 15 日と 3 月 15 日にチェックを入れる)場合も対応できるようにするには、この方法しか思いつかないです。

チェックを入れる/外すたびにいちいちポストバックしないでもすむ方法を考え付いたら、別途記事を書きます・・・が、期待はしないでください。(笑)

2013/12/12 追記:今さらながらですが、チェックを入れる/外すたびにいちいちポストバックしないでもすむサンプルも作ってみました。CheckBox 付き Calendar(その2)を見てください。月を移動する時、ちょっと(かなり?)重い感じです。(汗)

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Implements Interface="System.Web.UI.IPostBackEventHandler" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
  protected List<DateTime> checkedDates = new List<DateTime>();

  protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
  {
    CheckBox cb = new CheckBox();
    cb.ID = e.Day.Date.ToShortDateString();        
    string script =
      Page.ClientScript.GetPostBackEventReference(this, cb.ID);
    cb.Attributes.Add("onclick", script);
    foreach (DateTime day in checkedDates)
    {
      if (e.Day.Date == day)
      {
        cb.Checked = true;
        break;
      }
      cb.Checked = false;
    }
    e.Cell.Controls.Add(cb);
  }
    
  public void RaisePostBackEvent(string eventArgument)
  {
    foreach (DateTime day in checkedDates)
    {
      if (eventArgument == day.ToShortDateString())
      {
        checkedDates.Remove(DateTime.Parse(eventArgument));                
        ViewState["CheckedDates"] = checkedDates;
        return;
      }
    }
        
    checkedDates.Add(DateTime.Parse(eventArgument));            
    ViewState["CheckedDates"] = checkedDates;
  }

  protected void Page_Load(object sender, EventArgs e)
  {
    object obj = ViewState["CheckedDates"];
    if (obj != null)
    {
      checkedDates = (List<DateTime>)obj;
    }
  }

  protected void Button1_Click(object sender, EventArgs e)
  {
    string str = "Selected Dates:";
    foreach (DateTime day in checkedDates)
    {
      str += "<br />" + day.ToShortDateString();
    }
    Label1.Text = str;
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>Calendar with CheckBox</title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:Calendar ID="Calendar1" 
      runat="server" 
      ondayrender="Calendar1_DayRender" 
      SelectionMode="None" >
    </asp:Calendar>
    <asp:Button ID="Button1" 
      runat="server" 
      Text="Show selected dates" 
      onclick="Button1_Click" />
    <br />
    <asp:Label ID="Label1" runat="server" />        
  </div>
  </form>
</body>
</html>

------------ 2010/4/24 追記 ------------

この記事で紹介したコードを実際に動かして試せるよう 実験室 にアップしました。興味のある方は試してみてください。

Tags: ,

ASP.NET

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  November 2019  >>
MoTuWeThFrSaSu
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678

View posts in large calendar