はじめまして。
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でこのようなことが実現可能なのでしょうか?
可能なのでしたら、方法を教えていただければありがたいです。
また、不可能な場合、どのような手段があるかを教えていただければありがたいです。
失礼いたしました。
コードをわかりやすくしました。