質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

VB.NET

Microsoft Visual Basic .NETのことで、Microsoft Visual Basic(VB6)の後継。 .NET環境向けのプログラムを開発することができます。 現在のVB.NETでは、.NET Frameworkを利用して開発を行うことが可能です。

Q&A

1回答

6125閲覧

ASP.NETで1日が複数行に分かれたカレンダーを作成したい

picotoyou8

総合スコア8

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

VB.NET

Microsoft Visual Basic .NETのことで、Microsoft Visual Basic(VB6)の後継。 .NET環境向けのプログラムを開発することができます。 現在のVB.NETでは、.NET Frameworkを利用して開発を行うことが可能です。

0グッド

0クリップ

投稿2018/02/20 10:33

編集2022/01/12 10:55

はじめまして。
VS2017を使用しASP.net+VB.netでwebのカレンダーを作成しようとしています。
calendarコントロールを使うことで、1日1セルのカレンダーを作ることはできたのですが、1日に複数の行事があり、それぞれ色分けしたいと考えています。
行事は、日付と内容等がデータベースに格納されています。
calendarコントロールを1日複数セル(複数行)に分割することは可能なのでしょうか?
不可能だった場合、実現するためにはどのような手段があるのでしょうか?
また、行事はクリックすることで詳細な画面へ遷移させる予定です。

お手数をおかけいたしますが、よろしくお願いいたします。

実際に作成したプログラムを追記いたします。

<%@ Page Language="VB" ContentType="text/html" %> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %> <%@ Import Namespace="Npgsql" %> <%@ Import Namespace="NpgsqlTypes" %> <script runat="Server"> ' それぞれの日付セルをレンダリングするタイミングで実行 Sub cal_DayRender(sender As Object, e As DayRenderEventArgs) Dim dtNow As DateTime = DateTime.Now Dim dtToday As DateTime = dtNow.Date Dim calDate As DateTime Dim subDate As Integer Dim DA As NpgsqlDataAdapter Dim DT As New DataTable Dim SQLDS As New DataSet() Dim ST As NpgsqlTransaction Dim objCom As NpgsqlCommand Dim conn As NpgsqlConnection conn = New NpgsqlConnection("Server=xx.xx.xx.xx;Port=5432;User Id=abc;Password=xyz;Database=TEST_db") ' 出力する日付セルに対応するスケジュール情報を抽出 objCom = New NpgsqlCommand("SELECT * FROM mobile.TEST_DATA WHERE plan_date=@sdate AND delete_flg is null;", conn, ST) objCom.Parameters.Add("@sdate", e.Day.Date) conn.Open() DA = New NpgsqlDataAdapter(objCom) DT = New DataTable DA.Fill(SQLDS, "TEST_tbl") ' 取得したスケジュール情報を基にLiteralControl(固定文字列)を生成し、日付セル(e.Call)配下のコントロールとして追加 For Each HeaderRow In SQLDS.Tables("TEST_tbl").Rows e.Cell.Controls.Add(New LiteralControl("<br />" & String.Format("{0}:{1}", HeaderRow("task_name"), HeaderRow("status")))) calDate = e.Day.Date subDate = DateDiff(DateInterval.Day, dtToday, calDate) Select Case HeaderRow("status") Case 0 If subDate < 0 Then e.Cell.BackColor = System.Drawing.Color.Gray Else e.Cell.BackColor = System.Drawing.Color.Yellow End If Case 2 e.Cell.BackColor = System.Drawing.Color.Green Case 3 e.Cell.BackColor = System.Drawing.Color.Red End Select Next conn.Close() End Sub </script> <html> <head> <title>スケジュールをカレンダー上に表示する</title> </head> <body> <form runat="Server"> <asp:Calendar id="cal" runat="server" DayHeaderStyle-BackColor="#FFCC66" onDayRender="cal_DayRender" BorderWidth="1px" BorderColor="White" Font-Name="Verdana" Font-Size="9pt" TitleStyle-BackColor="#FFCC66" TitleStyle-Font-Size="12px" TitleStyle-Font-Bold="true" DayStyle-VerticalAlign="Top" DayStyle-Height="50px" DayStyle-Width="14%" SelectedDayStyle-BackColor="Navy" ShowNextPrev="True" NextPrevFormat="FullMonth" BackColor="White" Font-Names="Verdana" ForeColor="Black" Height="190px" Width="700px"> <DayHeaderStyle Font-Bold="True" Font-Size="8pt"></DayHeaderStyle> <DayStyle VerticalAlign="Top" Height="50px"></DayStyle> <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" VerticalAlign="Bottom" /> <OtherMonthDayStyle ForeColor="#999999" /> <SelectedDayStyle BackColor="#333399" ForeColor="White" /> <TitleStyle BackColor="White" Font-Bold="True" Font-Size="12pt" BorderColor="Black" BorderWidth="4px" ForeColor="#333399"></TitleStyle> <TodayDayStyle BackColor="#CCCCCC" /> </asp:Calendar> </form> </body> </html>

上記の方法だと、1日に1セルしかないカレンダーが表示されるため、作業結果(status)によって作業ごとに色分けしたいのですが、実現できません。
下にイメージを載せています。
左が実現したいイメージで、右がプログラムの実行結果です。
まず、知りたいのは、calendarでこのようなことが実現可能なのでしょうか?
可能なのでしたら、方法を教えていただければありがたいです。
また、不可能な場合、どのような手段があるかを教えていただければありがたいです。

よろしくお願いいたします。
イメージ説明

失礼いたしました。
コードをわかりやすくしました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/02/20 13:05

その目的の為に具体的に何をして、どこがどう期待と違う結果になったかを書きませんか?
退会済みユーザー

退会済みユーザー

2018/02/21 01:04

コードは ``` と ``` で囲っていただけませんか。インデントされて見やすくなりますので。
guest

回答1

0

画像を見る限り「1日に複数の行事」の表示はできているようですね。現在の課題は、1 日の中で複数の行事の色分けがしたいということと理解しています。

その課題を実現するために、

calendarコントロールを1日複数セル(複数行)に分割することは可能なのでしょうか?

ということ(1 日あたり行事の数だけ複数の日付セルを作る)を考えて、日付セルを色分けすればよい・・・と考えたのでしょうか?

不可能だった場合、実現するためにはどのような手段があるのでしょうか?

不可能とまで言い切る自信はないですが、それ(1 日あたり行事の数だけ複数の日付セルを作る)は無理っぽいです。

代わりに、一つの日付セルの中で各行事を色分けしてはいかがでしょう?

今は、

LiteralControl(固定文字列)を生成し、日付セル(e.Call)配下のコントロールとして追加

ということで、行事の数だけ以下のコードで

e.Cell.Controls.Add(New LiteralControl("<br />" & String.Format("{0}:{1}", HeaderRow("task_name"), HeaderRow("status"))))

以下のようなリテラルを日付セルに追加しているのですよね。

<br />日作業1:1 <br />日作業1:2

コードに手を加えて、例えば、文字列を sapn 要素に入れて style 属性で background-color を指定するようにしてはいかがですか? 以下のように:

<br /><span style="background-color: aqua">日作業1:1</span> <br /><span style="background-color:beige">日作業1:2</span>

投稿2018/02/21 01:54

編集2018/02/21 01:55
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

picotoyou8

2018/02/21 02:00

SurferOnWwwさん、ありがとうございます。 早速修正してみます。 結果が出ましたらご連絡いたします。
picotoyou8

2018/02/21 23:59

SurferOnWwwさん、ありがとうございました。 うまく、目的の色を付けることができました。 下記に修正したソースを載せておきます。 本当にありがとうございました。 ちなみにこの方法で、各行事をクリックすることで、その行事に関するページに遷移させることは可能なのでしょうか? ``` <%@ Page Language="VB" ContentType="text/html" %> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %> <%@ Import Namespace="Npgsql" %> <%@ Import Namespace="NpgsqlTypes" %> <script runat="Server"> ' それぞれの日付セルをレンダリングするタイミングで実行 Sub cal_DayRender(sender As Object, e As DayRenderEventArgs) Dim dtNow As DateTime = DateTime.Now Dim dtToday As DateTime = dtNow.Date Dim calDate As DateTime Dim subDate As Integer Dim DA As NpgsqlDataAdapter Dim DT As New DataTable Dim SQLDS As New DataSet() Dim ST As NpgsqlTransaction Dim objCom As NpgsqlCommand Dim conn As NpgsqlConnection conn = New NpgsqlConnection("Server=xx.xx.xx.xx;Port=5432;User Id=abc;Password=xyz;Database=TEST_db") ' 出力する日付セルに対応するスケジュール情報を抽出 objCom = New NpgsqlCommand("SELECT * FROM mobile.TEST_DATA WHERE plan_date=@sdate AND delete_flg is null;", conn, ST) objCom.Parameters.Add("@sdate", e.Day.Date) conn.Open() DA = New NpgsqlDataAdapter(objCom) DT = New DataTable DA.Fill(SQLDS, "TEST_tbl") ' 取得したスケジュール情報を基にLiteralControl(固定文字列)を生成し、日付セル(e.Call)配下のコントロールとして追加 For Each HeaderRow In SQLDS.Tables("TEST_tbl").Rows e.Cell.Controls.Add(New LiteralControl("<br />" & String.Format("{0}:{1}", HeaderRow("task_name"), HeaderRow("status")))) calDate = e.Day.Date subDate = DateDiff(DateInterval.Day, dtToday, calDate) Dim stName as String = "★" & String.Format("{0}:{1}", HeaderRow("task_name"), HeaderRow("status")) Select Case HeaderRow("status") Case 0 If subDate < 0 Then e.Cell.Controls.Add(New LiteralControl("<br />" & "<span style=""background0color:Gray"">" & stName & "</span>")) Else e.Cell.Controls.Add(New LiteralControl("<br />" & "<span style=""background0color:Yellow"">" & stName & "</span>")) End If Case 2 e.Cell.Controls.Add(New LiteralControl("<br />" & "<span style=""background0color:Green"">" & stName & "</span>")) Case 3 e.Cell.Controls.Add(New LiteralControl("<br />" & "<span style=""background0color:Red"">" & stName & "</span>")) End Select Next conn.Close() End Sub </script> <html> <head> <title>スケジュールをカレンダー上に表示する</title> </head> <body> <form runat="Server"> <asp:Calendar id="cal" runat="server" DayHeaderStyle-BackColor="#FFCC66" onDayRender="cal_DayRender" BorderWidth="1px" BorderColor="White" Font-Name="Verdana" Font-Size="9pt" TitleStyle-BackColor="#FFCC66" TitleStyle-Font-Size="12px" TitleStyle-Font-Bold="true" DayStyle-VerticalAlign="Top" DayStyle-Height="50px" DayStyle-Width="14%" SelectedDayStyle-BackColor="Navy" ShowNextPrev="True" NextPrevFormat="FullMonth" BackColor="White" Font-Names="Verdana" ForeColor="Black" Height="190px" Width="700px"> <DayHeaderStyle Font-Bold="True" Font-Size="8pt"></DayHeaderStyle> <DayStyle VerticalAlign="Top" Height="50px"></DayStyle> <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" VerticalAlign="Bottom" /> <OtherMonthDayStyle ForeColor="#999999" /> <SelectedDayStyle BackColor="#333399" ForeColor="White" /> <TitleStyle BackColor="White" Font-Bold="True" Font-Size="12pt" BorderColor="Black" BorderWidth="4px" ForeColor="#333399"></TitleStyle> <TodayDayStyle BackColor="#CCCCCC" /> </asp:Calendar> </form> </body> </html> ```
退会済みユーザー

退会済みユーザー

2018/02/22 01:23 編集

> ちなみにこの方法で、各行事をクリックすることで、その行事に関するページに遷移させることは可能なのでしょうか? リテラルの文字列を組み立てる時点で「その行事に関するページ」の url は取得できるのですか? 取得できるのであれば、span 要素に代えて a 要素を使い、その href 属性に url を設定してはいかがですか? 以下の例のような html コードが生成されるようリテラルで文字列を組み立ててみてください。 <br /><a href="default2.aspx" style="background-color: aqua">日作業1:1</a> <br /><a href="about.aspx" style="background-color: beige">日作業1:2</a> 色のバランスを考えないと、ハイパーリンクであることに気づかれにくいかもしれませんが、そのあたりは質問者さんの方で配色を考えてください。 もし、単純にクリックで遷移するだけでなく、その前にサーバー側で何らかの処置が必要ということでしたら、LiteralControl に代えて Button とか LinkButton を使って、ボタンクリックでポストバックしてサーバー側での処置、その後 Response.Redirect で遷移することを検討してみてください。
picotoyou8

2018/02/22 01:42

SurferOnWwwさん、重ね重ねありがとうございます。 教えていただいた方法を駆使しながらやってみます。
退会済みユーザー

退会済みユーザー

2018/03/05 02:40

その後どうなりましたか? やってみてどうなったかなど、きちんとフィードバックを返していただくようお願いします。
picotoyou8

2018/03/05 02:46

実は、他に急ぎの案件が入り、まだやれずにいます。 今月中旬までは、別の案件に手が取られるため、中旬以降でやってみます。 途中経過もご報告せず、申し訳ございませんでした。
退会済みユーザー

退会済みユーザー

2018/03/05 04:56

返答をありがとうございました。状況了解しました。今月中旬予定のフィードバックをお待ちします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問