How to show popup on date selection in calendar

Question

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.

Raja T · Answer

Hi, Please add bellow code in Calendar1_SelectionChanged ().. protected void Calendar1_SelectionChanged(object sender, EventArgs e) { txtdate.Value = Calendar1.SelectedDate.ToLongDateString();//Thursday, July 9, 2015 Console.WriteLine(txtdate.Value); string[] spitdate = txtdate.Value.Split(',');// 7/8/2015 if (spitdate.Length > 0) { string[] spitmonth = spitdate[1].Split(' '); if (spitmonth.Length > 0) { ScriptManager.RegisterStartupScript(this, GetType(), "openpopup1", "mypopupProposalFunction(" + spitmonth[2] + ",'" + spitmonth[1] + "'," + spitdate[2] + ");", true); } } } Please find the attached document. Thanks

Rajeev Punhani · Answer

Hi Sreenish, Please see this link . http://www.c-sharpcorner.com/UploadFile/dbb82e/event-calender-in-Asp-Net-using-calender-control/ .I think this is what you are trying.

Sreenish · Answer

i have click on that date one popup message with day month year and event title and one add button...help me please.am new to asp.net.it would b helpful for me

Sreenish · Answer

no dude nothing change in javascript.now i got it.:)

Sreenish · Answer

But here i think need to change code in javascript as well.it is not showing alert message.

Sreenish · Answer

its worked great dude.thanks alot bravoo.. but now again like once i have click on that date one popup message with day month year and event title and one add button...help me please.am new to asp.net.it would b helpful for me

Upendra Pratap Shahi · Answer

Hi, go through below links- http://www.codeproject.com/Articles/229445/Customizing-the-ASP-NET-Calendar-Control http://www.c-sharpcorner.com/UploadFile/puranindia/calendar-control-in-Asp-Net/

Sreenish · Answer

Thanku :)

Raja T · Answer

Hi, Please check bellow url https://msdn.microsoft.com/en-us/library/az4se3k1.aspx Thanks

Sreenish · Answer

like day3 month july year 2015

Sreenish · Answer

Bravoooo its working ..but is there any way to display month as string like july august??

Raja T · Answer

Hi, I have added few line code for alert message please check it. 1. declare one hiden field for selected date value save on this field 2. Add on event in Calendar1_SelectionChanged() 3. Add on js function -------------------------- 1. Add this in aspx page this line 2. add this in code behide page protected void Calendar1_SelectionChanged(object sender, EventArgs e) { txtdate.Value = Calendar1.SelectedDate.ToShortDateString(); Console.WriteLine(txtdate.Value); string[] spitdate = txtdate.Value.Split('/'); if (spitdate.Length > 0) { ScriptManager.RegisterStartupScript(this, GetType(), "openpopup1", "mypopupProposalFunction(" + spitdate[1] + ","+ spitdate[0] +","+ spitdate[2] +");", true); } } 3. This function add in aspx page. function mypopupProposalFunction(day,month,year) { alert("u have clicked on day" + day+", month "+month+", year "+year); } Please find the attached screenshot. Thanks

Sreenish · Answer

Hi Raja T I want to click on date then alert message should open like "u have clicked on so and so date,month and year" .how to do that??

Raja T · Answer

in my code popup is coming.. which means a new window is opening. In that popup u can enter the event and save it in database. Then in the grid view it will populate.

Sreenish · Answer

here i need to enter in the same popup and that entered details should be filled on that gridview by clicking add button.

Sreenish · Answer

window means it will open another page.popup means in the same page.

Raja T · Answer

can you explain what is popup and what is window??

Sreenish · Answer

I want a popup on click of date.help me

Sreenish · Answer

this is working fine.but i want as popup not as window

Raja T · Answer

Hi, In my end working fine popup...Please check bellow code.. protected void Calendar1_DayRender1(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('Events.aspx?field=" + e.Day.Date.ToShortDateString() + "','RangeTool', 'width=400,height=400,resizable=yes')"); if (e.Day.IsSelected) { link.Attributes.Add("style", this.Calendar1.SelectedDayStyle.ToString()); } e.Cell.Controls.Add(link); } Please find the attached screen. Thanks

Sreenish · Answer

r else i have sent u code in that window is opening i want one popup.helpme for that

Sreenish · Answer

just now i have tried only alert is coming an every click of the calendar.

Sreenish · Answer

no bro am not getting if i click on that date only error message is opening.no popup is opening.kindly solve my problem

Raja T · Answer

After getting alert message popup will open.. Please check it clearly.. u will get the output

Sreenish · Answer

By using code what u have sent it is giving only alert message

Sreenish · Answer

Hi dude I didnt get what i want on click of date popup should open

Upendra Pratap Shahi · Answer

http://www.codeproject.com/Articles/64474/How-to-Read-the-Google-Calendar-in-C

Raja T · Answer

Hi Sreenish, I have checked in your code. Just change single line code for open popup page. After in the page you can write add button code. Bellow code one line i commented and one line added please check it.And also i added in aspx one function in javascript Codebehide SourceCode: protected void Calendar1_DayRender1(object sender, DayRenderEventArgs e) { e.Cell.Controls.Clear(); HtmlGenericControl link = new HtmlGenericControl(); link.TagName = "a"; link.InnerText = e.Day.DayNumberText; ScriptManager.RegisterStartupScript(this, GetType(), "openpopup1", "mypopupProposalFunction(" + e.Day.Date.ToShortDateString() + ");", true); // link.Attributes.Add("href", "JavaScript:window.open('Events.aspx?field=" + e.Day.Date.ToShortDateString() + "','RangeTool', 'width=400,height=400,resizable=yes')"); if (e.Day.IsSelected) { link.Attributes.Add("style", this.Calendar1.SelectedDayStyle.ToString()); } e.Cell.Controls.Add(link); } ASPX SourceCode: function mypopupProposalFunction(id) { alert(id); window.open("Events.aspx?field=" + id, '_blank', 'toolbar=yes, scrollbars=yes, resizable=yes, top=100, left=350, width=500, height=500'); } Thanks

Sreenish · Answer

Source Code: BackColor="White" BorderColor="Black" DayNameFormat="Full" Font-Names="Times New Roman" Font-Size="12pt" ForeColor="Black" NextPrevFormat="FullMonth" TitleFormat="MonthYear" > ForeColor="#333333" Height="10pt" /> Font-Size="8pt" ForeColor="#333333" Width="1%" /> ForeColor="White" Height="14pt" /> Height="100%"> CodeBehind: protected void Page_Load(object sender, EventArgs e) { GetData(); } protected 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); 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('Events.aspx?field=" + e.Day.Date.ToShortDateString() + "','RangeTool', 'width=400,height=400,resizable=yes')"); if (e.Day.IsSelected) { link.Attributes.Add("style", this.Calendar1.SelectedDayStyle.ToString()); } e.Cell.Controls.Add(link); }

Sreenish · Answer

I'll send my code. Source Code: Code Behind: using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Drawing; namespace Scheduler { public partial class Events : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { GetData(); } protected 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); Gv1.DataSource = dt; Gv1.DataBind(); }

Sreenish · Answer

Hi Raja my requirement is like i want to click on day of the month then popup should open with event title and one add button.if i click that add button then event should be added on grid and number of events should display in particular date.

Raja T · Answer

Hi Sreenish, I dont get your requirement clearly. From my unerstanding i thnk when you click on the date from calender one popup should open. For that use the below code: $(document).ready(function () { $("#Calendar1").click(function () { window.open("POPUP URL", '_blank', 'toolbar=yes, scrollbars=yes, resizable=yes, top=100, left=350, width=500, height=500'); }); }); BorderColor="#3366CC" BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" Height="200px" Width="220px"> Font-Bold="True" Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" /> If this is not ur requirement, please explain in detail. :) Thanks