If you ask if there is a server control, like <asp:canlendar>, that you can use to design a canlendar as the picture you show. The answer is not.
ASP.NET Web Forms Calendar is used to display selectable date in a canlendar so that you can treat it as a date picker.
It allows user to select dates and move to the next and previous months and displays the name of the current month, dy headings for the dats of the weeks, dats of the month and arrow characters for navigation to the previous or next month.
For your requirement, I suggest you using a Javascript Calendar plugin - FullCalendar, which is a very powerful plugin with over 100 customizable settings. See more at : https://fullcalendar.io/
You can use ajax with the Calendar plugin and fetch the value from code-behind/database. If the count from database is not 0, then add button in the cell of the calendar.
Regarding the next grid view page (calendar details page), you can pass the parameter as a query string and use the parameter to fetch the details from the database and display them in the
gridview.
More details, you can see below code:
Calendar DataBase:
(20 pending and 5 complete on 2020/2/11):
CalendarDemo Page:
.aspx Page (include script):
<head runat="server">
<title></title>
<!-- download the core and daygrid css and js and put link here -->
<link href='../Scripts/FullCalendar/core/main.css' rel='stylesheet' />
<link href='../Scripts/FullCalendar/daygrid/main.css' rel='stylesheet' />
<script src='../Scripts/FullCalendar/core/main.js'></script>
<script src='../Scripts/FullCalendar/daygrid/main.js'></script>
<!-- Jquery and bootstrap stuff. You can just use whatever you need -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid'],
dayRender: function (dayRenderInfo) {
var date = dayRenderInfo.date;
var data = { "date": date };
console.log(date.toUTCString());
var element = dayRenderInfo.el;
var pendingCount = "0";
var completeCount = "0";
//Get count of the pending review
$.ajax({
type: "POST",
url: "CalendarDemo.aspx/getReviewCount",
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
pendingCount = response.d.pending;
completeCount = response.d.complete;
console.log(pendingCount);
console.log(completeCount);
var pendingBtn = '';
var completeBtn= '';
if (pendingCount != "0") {
console.log(data);
var pendingUrl = 'CalendarDetails.aspx?EventState=0&EventDate=' + date.toUTCString();
pendingBtn = '<button type="button" class="btn btn-light" onclick="window.open(\'' + pendingUrl +'\')">Review Pending</button>' + '<span class="badge badge-danger">' + pendingCount + '</span>';
}
if (completeCount != "0") {
var completeUrl = 'CalendarDetails.aspx?EventState=1&EventDate=' + date.toUTCString();
completeBtn = '<button type="button" class="btn btn-light" onclick="window.open(\'' + completeUrl + '\')">Review Completed</button>' + '<span class="badge badge-success">' + completeCount + '</span>';
}
var reviewBlock = '<div class="container text-center">' + pendingBtn + completeBtn + '</div>';
element.style.textAlign = "center";
element.style.verticalAlign = "middle";
element.insertAdjacentHTML('beforeend', reviewBlock);
}
})
}
});
calendar.render();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="calendar">
</div>
</div>
</form>
</body>
Code behind:
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static ReviewCount getReviewCount(DateTime date)
{
ReviewCount rc = new ReviewCount()
{
complete = "0",
pending = "0"
};
SqlParameter[] pendingParamenters = { new SqlParameter("@state", Convert.ToInt32(0)), new SqlParameter("@date", date) };
SqlParameter[] completeParamenters = { new SqlParameter("@state", 1), new SqlParameter("@date", date) };
object pendingCount = GetCountByStateDate(pendingParamenters);
if(pendingCount != null)
{
rc.pending = pendingCount.ToString();
}
object completeCount = GetCountByStateDate(completeParamenters);
if (completeCount != null)
{
rc.complete = completeCount.ToString();
}
return rc;
}
public static object GetCountByStateDate(SqlParameter[] parameters)
{
// null means the query is not successful
object obj = null;
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString))
{
try
{
string sql = "SELECT COUNT(1) FROM [Events] WHERE EventState = @state AND EventDate = @date";
conn.Open();
using (SqlCommand cmd = new SqlCommand(sql, conn))
{
if (null != parameters)
{
cmd.Parameters.AddRange(parameters);
}
obj = cmd.ExecuteScalar();
}
}
catch (SqlException ex)
{
Debug.WriteLine(ex.ToString());
}
finally
{
conn.Close();
}
}
return obj;
}
public class ReviewCount
{
public string pending
{
get;
set;
}
public string complete
{
get;
set;
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if(!(Request.QueryString["EventState"] is null)&&!(Request.QueryString["EventDate"] is null))
{
int state = Convert.ToInt32(Request.QueryString["EventState"].Trim());
DateTime date = DateTime.Parse(Request.QueryString["EventDate"].Trim());
BindGridView(date, state);
}
}
}
private void BindGridView(DateTime date, int state)
{
SqlParameter[] parameters = { new SqlParameter("@state", state), new SqlParameter("@date", date) };
DataTable dt = FillDataTable(parameters);
GridView1.DataSource = dt;
GridView1.DataBind();
}
public DataTable FillDataTable(SqlParameter[] parameters)
{
DataTable dt = null;
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString))
{
string sql = "SELECT * FROM [Events] WHERE EventState = @state AND EventDate = @date";
SqlCommand cmd = new SqlCommand(sql, conn);
if (null != parameters)
{
cmd.Parameters.AddRange(parameters);
}
conn.Open();
using (SqlDataAdapter da = new SqlDataAdapter(cmd))
{
dt = new DataTable();
da.Fill(dt);
}
}
return dt;
}
Demo:
Hope this can help you.
Best regards,
Sean
ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >
Member
240 Points
588 Posts
Can we add button and text to asp.net calendar using asp.net c# web form
Feb 21, 2020 06:10 AM|mazhar khan india|LINK
My requirement is like below image
If I will click on review pending count ex: review Pending 20` then that 20 detail I have to show into next page gridview
Contributor
3040 Points
895 Posts
Re: Can we add button and text to asp.net calendar using asp.net c# web form
Feb 24, 2020 01:13 PM|Sean Fang|LINK
Hi, mazhar khan india,
If you ask if there is a server control, like <asp:canlendar>, that you can use to design a canlendar as the picture you show. The answer is not.
ASP.NET Web Forms Calendar is used to display selectable date in a canlendar so that you can treat it as a date picker.
It allows user to select dates and move to the next and previous months and displays the name of the current month, dy headings for the dats of the weeks, dats of the month and arrow characters for navigation to the previous or next month.
For your requirement, I suggest you using a Javascript Calendar plugin - FullCalendar, which is a very powerful plugin with over 100 customizable settings. See more at : https://fullcalendar.io/
You can use ajax with the Calendar plugin and fetch the value from code-behind/database. If the count from database is not 0, then add button in the cell of the calendar.
Regarding the next grid view page (calendar details page), you can pass the parameter as a query string and use the parameter to fetch the details from the database and display them in the gridview.
More details, you can see below code:
Calendar DataBase:
(20 pending and 5 complete on 2020/2/11):
CalendarDemo Page:
.aspx Page (include script):
<head runat="server"> <title></title> <!-- download the core and daygrid css and js and put link here --> <link href='../Scripts/FullCalendar/core/main.css' rel='stylesheet' /> <link href='../Scripts/FullCalendar/daygrid/main.css' rel='stylesheet' /> <script src='../Scripts/FullCalendar/core/main.js'></script> <script src='../Scripts/FullCalendar/daygrid/main.js'></script> <!-- Jquery and bootstrap stuff. You can just use whatever you need --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function () { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { plugins: ['dayGrid'], dayRender: function (dayRenderInfo) { var date = dayRenderInfo.date; var data = { "date": date }; console.log(date.toUTCString()); var element = dayRenderInfo.el; var pendingCount = "0"; var completeCount = "0"; //Get count of the pending review $.ajax({ type: "POST", url: "CalendarDemo.aspx/getReviewCount", data: JSON.stringify(data), contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { pendingCount = response.d.pending; completeCount = response.d.complete; console.log(pendingCount); console.log(completeCount); var pendingBtn = ''; var completeBtn= ''; if (pendingCount != "0") { console.log(data); var pendingUrl = 'CalendarDetails.aspx?EventState=0&EventDate=' + date.toUTCString(); pendingBtn = '<button type="button" class="btn btn-light" onclick="window.open(\'' + pendingUrl +'\')">Review Pending</button>' + '<span class="badge badge-danger">' + pendingCount + '</span>'; } if (completeCount != "0") { var completeUrl = 'CalendarDetails.aspx?EventState=1&EventDate=' + date.toUTCString(); completeBtn = '<button type="button" class="btn btn-light" onclick="window.open(\'' + completeUrl + '\')">Review Completed</button>' + '<span class="badge badge-success">' + completeCount + '</span>'; } var reviewBlock = '<div class="container text-center">' + pendingBtn + completeBtn + '</div>'; element.style.textAlign = "center"; element.style.verticalAlign = "middle"; element.insertAdjacentHTML('beforeend', reviewBlock); } }) } }); calendar.render(); }); </script> </head> <body> <form id="form1" runat="server"> <div> <div id="calendar"> </div> </div> </form> </body>Code behind:
protected void Page_Load(object sender, EventArgs e) { } [WebMethod] public static ReviewCount getReviewCount(DateTime date) { ReviewCount rc = new ReviewCount() { complete = "0", pending = "0" }; SqlParameter[] pendingParamenters = { new SqlParameter("@state", Convert.ToInt32(0)), new SqlParameter("@date", date) }; SqlParameter[] completeParamenters = { new SqlParameter("@state", 1), new SqlParameter("@date", date) }; object pendingCount = GetCountByStateDate(pendingParamenters); if(pendingCount != null) { rc.pending = pendingCount.ToString(); } object completeCount = GetCountByStateDate(completeParamenters); if (completeCount != null) { rc.complete = completeCount.ToString(); } return rc; } public static object GetCountByStateDate(SqlParameter[] parameters) { // null means the query is not successful object obj = null; using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString)) { try { string sql = "SELECT COUNT(1) FROM [Events] WHERE EventState = @state AND EventDate = @date"; conn.Open(); using (SqlCommand cmd = new SqlCommand(sql, conn)) { if (null != parameters) { cmd.Parameters.AddRange(parameters); } obj = cmd.ExecuteScalar(); } } catch (SqlException ex) { Debug.WriteLine(ex.ToString()); } finally { conn.Close(); } } return obj; } public class ReviewCount { public string pending { get; set; } public string complete { get; set; } }CalendarDetails
.aspx Page:
<div> <asp:GridView ID="GridView1" runat="server"></asp:GridView> </div>Code behind:
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { if(!(Request.QueryString["EventState"] is null)&&!(Request.QueryString["EventDate"] is null)) { int state = Convert.ToInt32(Request.QueryString["EventState"].Trim()); DateTime date = DateTime.Parse(Request.QueryString["EventDate"].Trim()); BindGridView(date, state); } } } private void BindGridView(DateTime date, int state) { SqlParameter[] parameters = { new SqlParameter("@state", state), new SqlParameter("@date", date) }; DataTable dt = FillDataTable(parameters); GridView1.DataSource = dt; GridView1.DataBind(); } public DataTable FillDataTable(SqlParameter[] parameters) { DataTable dt = null; using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString)) { string sql = "SELECT * FROM [Events] WHERE EventState = @state AND EventDate = @date"; SqlCommand cmd = new SqlCommand(sql, conn); if (null != parameters) { cmd.Parameters.AddRange(parameters); } conn.Open(); using (SqlDataAdapter da = new SqlDataAdapter(cmd)) { dt = new DataTable(); da.Fill(dt); } } return dt; }Demo:
Hope this can help you.
Best regards,
Sean