how to add events by clicking date in a calendar

Question

1.00/5 (1 vote)

See more:

Hi,

I have one calendar and one gridview with three columns.
Here i have to select the date in a calendar then one popup should open.How to do that.Helpme.

Posted 30-Jun-15 23:56pm

Member 11686116

Updated 1-Jul-15 1:10am

v2

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 1-Jul-15 7:50am

What have you tried and where is the issue?

Member 11686116 1-Jul-15 7:53am

<form id="form1" runat="server">
<div style="width:100%;height:637px" id="MainDiv">
<div style="width:65%; height:100%; float:left" id="CalDiv" >
<asp:Calendar ID="Calendar1" runat="server" Width="98%" Height="100%"
BackColor="White" BorderColor="Black" DayNameFormat="Full"
Font-Names="Times New Roman" Font-Size="12pt" ForeColor="Black"
NextPrevFormat="FullMonth" TitleFormat="MonthYear" >
<dayheaderstyle backcolor="#CCCCCC" font-bold="True" font-size="10pt"
="" forecolor="#333333" height="10pt">
<daystyle width="14%">
<nextprevstyle font-size="10pt" forecolor="White">
<othermonthdaystyle forecolor="#999999">
<SelectedDayStyle BackColor="#CC3333" ForeColor="White" />
<SelectorStyle BackColor="#CCCCCC" Font-Bold="True" Font-Names="Verdana"
Font-Size="8pt" ForeColor="#333333" Width="1%" />
<TitleStyle BackColor="Black" Font-Bold="True" Font-Size="13pt"
ForeColor="White" Height="14pt" />
<todaydaystyle backcolor="#CCCC99">

</div>
<div style="width:30%;height:100%;float:left" id="GvDiv" >
<asp:GridView ID="Gv1" runat="server" Width="100%" AutoGenerateColumns="false"
Height="100%">
<columns>
<asp:BoundField HeaderText="Name" />
<asp:BoundField HeaderText="Events" />
<asp:ButtonField HeaderText="Delete an Event" Text="Delete" />

</div>
</div>
</form>
this is my source code .i have no idea how to do like once i click on that date popup should open.

Member 11686116 1-Jul-15 7:54am

Once i click on day of month then one popup should open am stuck in that..

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 1-Jul-15 8:58am

Okay let me research on this for sometime. I will get back.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 1-Jul-15 9:02am

See my answer.

Member 11686116 2-Jul-15 0:08am

how to call a function i mean exactly to all dates in javascript

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 2-Jul-15 0:16am

For JavaScript, you have to analyze the html which is rendered. Then you need to attach click event for all the dates by some common class or something.

Member 11686116 2-Jul-15 0:18am

Can u give me some sample please.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 2-Jul-15 0:38am

I did not find any. But I will try this on my own. Will let you know. You also try this. This is easy.

Member 11686116 2-Jul-15 0:39am

sure i will.let me know as soon as possible.thanku.

Member 11686116 2-Jul-15 2:18am

Tadit Dash did u find any solution for this??

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 2-Jul-15 14:52pm

I was busy whole day. What have you tried?

Member 11686116 2-Jul-15 23:47pm

Source Code:
<script type="text/javascript">
function PopUp() {
window.open("title.aspx");
}

</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

<div style="width:100%;height:637px" id="MainDiv">
<div style="width:65%; height:100%; float:left" id="CalDiv" >
<asp:Calendar ID="Calendar1" runat="server" Width="98%" Height="100%"
BackColor="White" BorderColor="Black" DayNameFormat="Full"
Font-Names="Times New Roman" Font-Size="12pt" ForeColor="Black"
NextPrevFormat="FullMonth" TitleFormat="MonthYear" >
<dayheaderstyle backcolor="#CCCCCC" font-bold="True" font-size="10pt"
="" forecolor="#333333" height="10pt">
<nextprevstyle font-size="10pt" forecolor="White">
<othermonthdaystyle forecolor="#999999">
<daystyle width="14%">
<SelectedDayStyle BackColor="#CC3333" ForeColor="White" />
<SelectorStyle BackColor="#CCCCCC" Font-Bold="True" Font-Names="Verdana"
Font-Size="8pt" ForeColor="#333333" Width="1%" />
<TitleStyle BackColor="Black" Font-Bold="True" Font-Size="13pt"
ForeColor="White" Height="14pt" />
<todaydaystyle backcolor="#CCCC99">

</div>
<div style="width:30%;height:100%;float:left" id="GvDiv" >
<asp:GridView ID="Gv1" runat="server" Width="100%" AutoGenerateColumns="false"
Height="100%">
<columns>
<asp:BoundField HeaderText="Name" />
<asp:BoundField HeaderText="Events" />
<asp:ButtonField HeaderText="Delete an Event" Text="Delete" />

</div>

Code Behind:

public partial class Events : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
GetData();
}
public void GetData()
{
DataTable dt = new DataTable();
dt.Columns.Add("Name");
dt.Columns.Add("Events");
dt.Columns.Add("Delete an Event");
DataRow rw1 = dt.NewRow();
rw1["Name"] = "";
rw1["Events"] = "";
rw1["Delete an Event"] = "";
dt.Rows.Add(rw1);
ViewState["dt1"] = dt;

Gv1.DataSource = dt;
Gv1.DataBind();
}
protected void OnRowDeleting(object sender, GridViewDeleteEventArgs e)
{
int index = Convert.ToInt32(e.RowIndex);
DataTable dt = ViewState["dt"] as DataTable;
dt.Rows[index].Delete();
ViewState["dt"] = dt;
Gv1.DataSource = dt;
Gv1.DataBind();
}
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
e.Cell.Controls.Clear();
HtmlGenericControl link = new HtmlGenericControl();
link.TagName = "a";
link.InnerText = e.Day.DayNumberText;
link.Attributes.Add("href", "JavaScript:window.open('title.aspx?field=" + e.Day.Date.ToShortDateString() + "','RangeTool', 'width=600,height=600,resizable=yes')");
if (e.Day.IsSelected)
{
link.Attributes.Add("style", this.Calendar1.SelectedDayStyle.ToString());
}
e.Cell.Controls.Add(link);

}

I have tried this now i know how to open a window by onclick of date.But i want it should open as a popup in the same page.let me know how to do that.

Member 11686116 2-Jul-15 2:20am

orelse we need to develop separate calendar control using buttons??

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 1 · 2015-07-01T03:02:00

Solution 1

The event is - Calendar.SelectionChanged Event[^].

Inside this event, write codes to call a JavaScript Function or something and inside that function, open a popup.

Posted 1-Jul-15 3:02am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)