Realization of imitation Yupoo calendar album using the asp.net calendar server



A while ago to see Yupoo have a calendar photo album is also good, very beautiful, specific address, see the calendar effects, they also want to use asp.net calendar control to taste fresh, hands-on design have a look so.


Effect of operation to the final: (can be compatible with most browsers)

Figure 1

Click on a day of the picture, you can see:

Figure two


Now about my ideas:

1 first create a database, I here for simplicity, the establishment of a data.mdb Access database, add table PhotoInfo, designed specifically for:

Also the simplicity, PhotoUrl field as picture storage path, PublishDate as the upload time, here also can have other fields, such as user ID and so on, I omit the.

Open the table, the specific data for such data,


2 on the Default.aspx page add a calendar control

<asp:Calendar ID="calendar" runat="server"></asp:Calendar>

Operation results:

 Well, looks very simple calendar control, now I add the attribute DayNameFormat= "Full" attribute, DayNameFormat also includes FirstLetter, FirstTwoLetters, Short, Shortest, now rerun:

Add attribute BorderWidth="0":

Calendar frame disappeared.

With <TitleStyle CssClass= "day_title" BorderWidth= "0px" BackColor= "White" Width= "700" />, through the day_title settings;:

With <DayStyle Width= "86" Height= "86" BorderColor= "#7E7262" HorizontalAlign= "Left" VerticalAlign= "Top" />, get the map;:

Set each day in the width and height.


3 in the Default.aspx.cs code Page_Load event, first initialize assignment on January, January:

DateTime prevMonth = calendar.VisibleDate.AddMonths(-1);

DateTime nextMonth = calendar.VisibleDate.AddMonths(1);

calendar.PrevMonthText = "<a class=np href=\"Default.aspx?year=" + prevMonth.Year + "&month=" + prevMonth.Month + "\"><<Last month</a>";

calendar.NextMonthText = "<a class=np href=\"Default.aspx?year=" + nextMonth.Year + "&month=" + nextMonth.Month + "\">Next month>></a>";

The PrevMonthText and NextMonthText attributes for the HTML content in January, January.


4 now we get a DataSet data, in order to bind to the calendar control.

复制代码

private void BindData()

{

DateTime firstDate = new DateTime(calendar.VisibleDate.Year, calendar.VisibleDate.Month, 1);

DateTime lastDate = firstDate.AddMonths(1); 

FillData(firstDate, lastDate);

protected void FillData(DateTime startTime, DateTime endTime)

{

StringBuilder builder = new StringBuilder();

builder.Append("SELECT PhotoID, PhotoUrl, PublishDate FROM PhotoInfo, ");

builder.Append("(SELECT FORMAT(PublishDate, 'yyyy-mm-dd') AS PDate, MAX(PhotoID) AS PID FROM PhotoInfo ");

builder.Append("GROUP BY FORMAT(PublishDate, 'yyyy-mm-dd')) t1 ");

builder.Append("WHERE t1.PID=PhotoInfo.PhotoID ");

builder.Append("AND PublishDate>=#" + startTime + "# AND PublishDate<#" + endTime + "#"); //Temporary connection string representation

ds = AccessHelper.ExecuteDataSet(builder.ToString());

}

复制代码

The AccessHelper class in order to execute the SQL statement, return data set; this can be a month. The end of the day a query.


5 now this is the key code, add an event to OnDayRender calendar control, OnDayRender is excited in the time of the day:  

复制代码

protected void calendar_DayRender(object sender, DayRenderEventArgs e)

{

if (e.Day.IsOtherMonth) //When the date is not in the current month do not display

{

e.Cell.Controls.Clear();

}

else

{

e.Cell.BorderWidth = 1;

e.Cell.CssClass = "FullDay"

DateTime nextDate;

Literal ltl = new Literal();

if (ds != null)

{

foreach (DataRow dr in ds.Tables[0].Rows)

{

nextDate = DateTime.Parse(((DateTime)dr["PublishDate"]).ToShortDateString()); 

if (nextDate == e.Day.Date) //Comparison of each day with the same date whether the current control

{

e.Cell.CssClass = "NotDay"

ltl.Text = "";

string mediaPath = dr["PhotoUrl"].ToString();

mediaPath = ResolveUrl("~/"+ "images/" + dr["PhotoUrl"].ToString();

ltl.Text = "<a class=date href=\"javascript:void(0);\"><IMG onclick=\"ShowPhotos(this'" + nextDate.ToShortDateString() + "');\"class=\"Thumb\" src=" + mediaPath + " width=\"82\" height=\"80\" /></A>";

}

}

}

ltl.Text += "<DIV class=\"BlackDate\">" + e.Day.Date.Day + "</DIV>";

ltl.Text += e.Day.Date == calendar.TodaysDate ? "<DIV class=\"RedDate\">" + e.Day.Date.Day + "</DIV>" : "<DIV class=\"WhiteDate\">" + e.Day.Date.Day + "</DIV>";

e.Cell.Controls.Add(ltl);

}

}

复制代码


To increase the corresponding CSS code:

.day 

{

padding-right: 5px;

padding-left: 5px;

padding-bottom: 5px;

margin: 0px;

font: bold 14px arial, helvetica, sans-serif;

vertical-align: bottom;

color: #000000;

padding-top: 5px;

text-align: center;

}

.FullDay

{

background:url(../images/calendar_bg.gif) repeat-x;

width:86px;

height:86px;

padding:0; 

}

.NotDay

{

width:84px;

height:84px;

padding:0; 

} 

.FullDay a

{

display:none;

margin:2px;

margin-left:3px;

}

.NotDay a

{

display:none;

margin:2px;

margin-left:3px;

} 

.Thumb 

{

z-index: 1;

position:absolute;

margin:0;

border: #fff 1px solid;

} 

A.date {display:block;}

A.date:link { color: #6b9f1f;text-decoration: underline;-moz-outline: none;}

.WhiteDate { PADDING-LEFT: 4px;

Z-INDEX: 3;

FONT: bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;

COLOR: #fff;

PADDING-TOP: 0px;

POSITION: absolute} 

.RedDate { PADDING-LEFT: 4px;

Z-INDEX: 3;

FONT: bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;

COLOR: #FF2A55;

PADDING-TOP: 0px;

POSITION: absolute} 

.BlackDate { PADDING-LEFT: 5px;

Z-INDEX: 2;

FONT: bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;

COLOR: #000;

PADDING-TOP: 1px;

POSITION: absolute}

You can get the renderings of a at the start.


6 as for figure two, I am here to add showdiv.js

复制代码

function ShowPhotos(div, pDate) {

var iWidth = $("#divPhoto").width();

var iHeight = $("#divPhoto").height();

$("#divPhoto").css("top",(document.body.clientHeight - iHeight)/2 + 'px');

$("#divPhoto").css("left",(document.body.clientWidth - iWidth)/2 + 'px'); 

$("#divPhoto").css("display","inline");

$("#spanDate").html(pDate);

var ret = $.ajax({url:"ShowPic.aspx", data:{"date":pDate}, async: false}).responseText;

$("#divMore").html(ret);

function ClosePhotos() {

$("#divPhoto").css("display","none");

$("#spanDate").html("");

$("#divMore").html("");

}

复制代码

The ShowPhotos is centered, and using AJAX to get HTML ShowPic.aspx back,

Posted by Michell at November 18, 2013 - 12:03 PM