Copy the Goole calendar and click the circle icon.

First, I declare that this example is not completed independently. It is based on the information provided by netizens. In this example, use Div + CSS + jquery + JavaScript. In this example, we use a copy of Goole. Naturally, some time-related calculations are involved. During my daily work, you can use this opportunity to make up for the vague study.

Image effects:

Index.html page:

Activityhelper. js page:

VaR activityhelper = function (config) {This. renderto = config. renderto; // the ID of the element to be added to this control. loaddate = This. nowdate (); // the system automatically loads the data of this day. init ();} activityhelper. prototype = {init: function () {var entity = This; // initialize the monthly view entity. initmonthview () ;}, // initialize the monthly view initmonthview: function () {var entity = This; entity. clear (); // start to paint the monthly view var id = entity. random (); var monthtable = '<Table id = "' + ID + '" class = "monthtable"> </Ta Ble> '; $ (monthtable ). appendto ($ ("#" + entity. renderto); var table_weeks = []; table_weeks.push ('<tr class = "table_weeks" id = "table_weeks">'); For (VAR I = 0; I <7; I ++) {table_weeks.push ('<TD class = "week-day"> </TD>');} table_weeks.push ('</tr> '); $ (table_weeks.join ('')). appendto ($ ("#" + id); var weeks = ['sunday', 'monday', 'tues', 'weday', 'thurs', 'Friday ', 'saturday']; // Add weekly data to the top view var I = 0; $ ("TD. week-day "). each (function () {$ (this ). te XT (weeks [I]); I ++;}); // calculate the daily var dateinfo = entity of the month. dateofmonth (entity. loaddate); entity. days = dateinfo. days; var monthtd = []; var colnums = 0; // first draw the blank time of the first week of the month for (VAR I = 0; I <dateinfo. firstdayofweek; I ++) {If (colnums = 0) {monthtd. push ('<tr class = "daytr">');} monthtd. push ('<TD class = "noday"> </TD>'); colnums ++;} // draw each time point of the month for (VAR I = 1; I <= dateinfo. days; I ++) {If (colnums = 0) {monthtd. push ('<tr class =" Daytr "> ');} monthtd. push ('<TD class = "daytd" id = "' + I + '"> <Div class = "Daytime">' + I + '</div> </TD> '); colnums ++; If (colnums = 7) {monthtd. push ("</tr>"); colnums = 0 ;}// draw the blank time of the last week of the month for (VAR I = 0; I <6-dateinfo.lastdayofweek; I ++) {monthtd. push ('<TD class = "noday"> </TD>');} monthtd. push ("</tr>"); $ (monthtd. join ("")). appendto ($ ("#" + id); // Add a tablevar daytimeheight = $ ('td. daytd '). find (". daytime "). height (); Var tdheight = $ ('td. daytd '). height (); var tableheight = tdheight-daytimeheight; var counts = tableheight/16; var table = []; table. push ('<Table class = "itemtable">'); For (VAR I = 1; I <= counts; I ++) {table. push ('<tr class = "itemtr"> <TD class = "itemtd"> </TD> </tr>');} table. push ('</table>'); // Add the table to each day $ ("TD. daytd "). each (function () {$ (table. join ('')). appendto ($ (this) ;}); // Add a click event $ ("TD. daytd "). click (func Tion () {entity. clear (); $ ("TD. daytd "). removeclass ("tempselect"); var id = $ (this ). ATTR ("ID"); var popitemid = entity. popitem (); var tdinfo = entity. gettdinfo ($ (this); $ (this ). addclass ("tempselect"); var position ={}; position. left = tdinfo. left; position. top = tdinfo. top + 15; entity. setpopitemposition (Position, popitemid); // Add the content var timetile = dateinfo to the pop-up box. month + "month" + ID + "day"; entity. activityadditemofmonth (pop Itemid, timetile, ID) ;};}, // calculate the date of a month. dateofmonth: function (date) {var entity = This; Date = date. replace (/-0/G, "-"); var datearray = date. split ("-"); var year = datearray [0]; var month = datearray [1]. replace ("0", ""); // remove 0 from the date. For example, set "05"-> 5var day = datearray [2]; // calculate the number of days in a month var date = new date (year, month, 0); var days = date. getdate (); // calculate the date of the month for several days. setdate (1); var firstdayofweek = date. getday (); // calculate the number of times of the week in the month. E. setdate (days); var lastdayofweek = date. getday (); var thismonth ={}; thismonth. year = year; thismonth. month = month; thismonth. day = day; thismonth. days = days; thismonth. firstdayofweek = firstdayofweek; thismonth. lastdayofweek = lastdayofweek; return thismonth;}, // create a pop-up window popitem: function () {var entity = This; var id = This. random (); var DIV = '<Div id = "' + ID + '" class = "popitem Temp"> <Div class = "close"> </d IV> '+' <Table> <tr> <TD class = "TL"> </TD> <TD class = "Tc"> </TD> <TD class =" TR "> </TD> </tr> '+' <tr> <TD class =" ML "> </TD> <TD class =" MC "> </TD> <TD class = "Mr"> </TD> </tr> '+' <tr> <TD class = "Bl"> </TD> <TD class =" BC "> </TD> <TD class =" Br "> </TD> </tr> '+' </table> '+' </div> '; $ (DIV ). appendto ($ ("#" + entity. renderto); $ ('<Div id = "vpic" class = "vpic Temp"> </div> '). appendto ($ ("#" + entity. renderto); // Add a close event $ ("#" + ID + ". cl Ose "). click (function () {entity. clear () ;}); return ID ;}, // set the position setpopitemposition: function (Position, popitemid) {var left = position. left-50; var Top = position. top-230; If (top <= 0) {Top = 0; $ ("# vpic" ).css ("display", "NONE ");} if (left + 410) >$ ("body "). width () {left = $ ("body "). width ()-410; $ ("# vpic" ).css ("display", "NONE");} If (left <= 0) {left = 0; $ ("# vpic" ).css ("display", "NONE") ;}$ ("#" +popitemid=.css ({left: Left +' Px ', top: Top + 'px'}); $ ("# vpic" ).css ({left :( left + 100) + 'px ', top :( top + 135) + 'px'}) ;}, // gettdinfo: function (item) {var tdinfo ={} based on the input TD object to obtain the absolute position and width of the element {}; tdinfo. width = item. width (); tdinfo. height = item. height (); tdinfo. left = item. offset (). left; tdinfo. top = item. offset (). top; If (item. parent (). is (". solid ") {tdinfo. index = item. index ()-1;} else {tdinfo. index = item. index () ;}return tdinfo ;}, // In the month view, create a live Dynamic addition window activityadditemofmonth: function (popitemid, time) {var entity = This; var item = []; item. push ('<div>'); item. push ('<Table class = "contenttable"> <tr> <TD class = "label"> time: </TD> <TD class = "time"> '+ time +' </TD> </tr> <TD class = "label"> content: </TD> <input type = "text" class = "text"/> </TD> </tr> </table> '); item. push ('<Div class = "operate"> <Div id = "createbutton" class = "createbutton"> Create activity </div> <a href = "#" CIA Ss = "moreinfo"> edit activity details </a> </div> '); item. push ('</div>'); $ (item. join ('')). appendto ($ ("#" + popitemid + ". MC "); // Add a click event for editing details $ (" # "+ popitemid + ". moreinfo "). click (function () {window. parent. mainframe. location = entity. moreinfopath + '? Loaddate = '+ entity. loaddate;}) ;}, // clear the temporary divclear: function () {$ (". temp "). remove () ;}, // obtain the current time nowdate: function () {var date = new date (); var year = date. getyear (); var month = parseint (date. getmonth () + 1; var day = date. getdate (); return year + "-" + month + "-" + day;}, // used to generate a random ID in the system. Random: function () {// first generate a random number less than 1000 var r = math. round (math. random () * 1000); // obtain the current date var date = new date (); var year = date. getyear (); var month = date. getmonth (); var day = date. getdate (); var hours = date. gethours (); var minutes = date. getminutes (); var seconds = date. getseconds (); // generate a random idreturn 'id _ '+ year + month + day + minutes + seconds + R ;}}

Activityhelper.css page:



HTML, body, IMG, Div, H1, H2, P, Th, TD, table {margin: 0px; padding: 0px; Border: 0px ;} /**************** Date Format table ******************** */table {border-collapse: collapse; border-Spacing: 0 ;} /********************** set the CSS style in the add pop-up box ********** *********************/. popitem {position: absolute; width: 420px; Height: 160px; Z-index: 200 ;}. popitem. close {position: absolute; width: 13px; Height: 14px; Background: URL ("image/activity/google-close.png"); top: 10px; Right: 11px; cursor: pointer ;}. popitem table {width: 100% ;}. popitem. TL {width: 25px; Height: 25px; Background: URL (image/activity/add_lt.gif );}. popitem. tr {width: 25px; Height: 25px; Background: URL (image/activity/add_rt.gif );}. popitem. TC {border-top: 1px solid # ababab; Background: white ;}. popitem. ML {Background: white; border-left: # abababab 1px solid ;}. popitem. mr {Background: white; border-Right: # abababab 1px solid ;}. popitem. MC {Height: pixel PX; Background: white ;}. popitem. BL {width: 25px; Height: 25px; Background: URL (image/activity/add_lb.gif );}. popitem. BC {border-bottom: 1px solid # abababab; Background: white ;}. popitem. BR {width: 25px; Height: 25px; Background: URL (image/activity/add_rb.gif );}. vpic {position: absolute; width: 96px; Height: 96px; Background: URL ("image/activity/bubble_combined.png"); background-position:-54px 0px; Z-index: 201 ;}. popitem. label {text-align: Left; width: 80px; padding-top: 5px; padding-bottom: 5px; Font: 13px Arial, sans-serif ;}. popitem. operate {margin-top: 25px ;}. popitem. createbutton {float: Left; width: 70px; Height: 23px; font-size: 13px; line-Height: 25px; text-align: center; cursor: pointer; Background: URL ("image/activity/createbutton.gif") No-Repeat ;}. popitem. moreinfo {margin-left: 8px; Height: 15px; text-Decoration: underline; color: # 2200cc; cursor: pointer; font-size: 13px; line-height: 28px ;}. popitem. line {border-top: # dddddd 1px solid; margin-top: 15px ;} ************ ****************/. monthtable {width: 100%; Height: 100% ;}. daytr {Height: 120px ;}. daytr. daytd {border: 1px solid # dddddddd; Vertical-align: Top; text-align: Right ;}. daytr. noday {border: 1px solid # dddddddd; Vertical-align: Top; text-align: Right ;}. daytr. daytime {Background: # f8f9ff; Font: 13px Arial, sans-serif; color: #666666; padding-Right: 5px ;}. tempselect {Background: # f0f3ff ;}. itemtable {width: 100% ;}. itemtable TD {Height: 15px;}/************** monthly view items (complete) *************/. dayitem_all tr {border: 0px ;}
: Http://download.csdn.net/detail/liu765023051/4913981