jquery Calendar Plugin E-calendar upgraded version _jquery

The jquery Event Calendar plug-in E-calendar, which supports custom scheduling for a specified date (No limit on the number of bars), is highlighted when the schedule is set, and is compatible with ie7+ mainstream browsers.

Original use method and demo address: E-calendar original (mouse move to day display day schedule)

Upgrade Version Introduction:

1. Multiple event intersections can exist on the same day
2. Click the day to appear under the Calendar list of schedules
3. Click on the Schedule list to add its events.
4. Add Item-grid Display and hide
The array collection in 5.Events can add elements such as id,type (Distinguish Schedule Type: task type or schedule type)

6. Increase year selection, month selection
7. Style Adjustment
8. Write Ajax loading events, item click events, etc. in Calendar configuration

Run Effect chart:

Main code:

Index.html

<!  DOCTYPE html>  

Configure calendar loading by $ (' #calendar '). Ecalendar ()

Parameters

Yearrange: Nianxia Pull Frame Range

Months: Month drop down box

InitData: Functions called by data initialization

Clickitem: Calendar List click events

Jquery.e-calendar.js

/** * @license E-calendar v2.0.0 * (c) 2016-11 * LICENSE:CHN * * (function ($) {var dmonth = new Date (). getmonth
 ();
 var dyear = new Date (). getFullYear ();
 var Ecalendar = function (Options, object) {//initializing global variables var adday = new Date (). GetDate ();
 var admonth = new Date (). getmonth ();
 var adyear = new Date (). getFullYear ();
 var dday = Adday;
 var dmonth = Admonth;
 var dyear = adyear;

 var instance = object;

 var settings = $.extend ({}, $.fn.ecalendar.defaults, options);
 function Lpad (value, length, pad) {if (typeof pad = = ' undefined ') {pad = ' 0 ';
 } var P;
 for (var i = 0; i < length; i++) {p + + pad;
 Return (p + value). Slice (-length);
 var mouseOver = function () {$ (this). addclass (' C-nav-btn-over ');
 };
 var mouseleave = function () {$ (this). Removeclass (' C-nav-btn-over ');

 };
 var testfunction=function () {alert (' function active ');
 var onitemgridclose = function () {$ (". C-event-grid"). CSS ("display", "none");

 }; //Calendar Day Event var mouseoverevent = function () {$ (this). addclass (' C-event-over ');
 var d = $ (this). attr (' Data-event-day ');
 $ (' div.c-event-item[data-event-day= ' + D + ' "]). addclass (' C-event-over ');
 };
 var mouseclickevent = function () {$ (". C-event-grid"). CSS ("Display", "");
 $ (' Div.c-day '). Removeclass (' C-event-over ') $ (' Div.c-event-item '). Removeclass (' C-event-over ');
 $ (this). addclass (' C-event-over ');
 var d = $ (this). attr (' Data-event-day ');
 $ (' div.c-event-item[data-event-day= ' + D + ' "]). addclass (' C-event-over ');
 };
 var mouseleaveevent = function () {};
 var mouseclickitem = Settings.clickitem;
 var mouseoveritem = function () {$ (this). addclass (' C-event-over-item ');
 };
 var mouseleaveitem = function () {$ (this). Removeclass (' C-event-over-item ')};
 var nextmonth = function () {if (Dmonth < one) {dmonth++;
 else {dmonth = 0;
 dyear++;

 } Init_ecalendar ();
 var ajaxmonth = dyear + "-" + (Dmonth-(-1));
 Loadecalendarbyajax (settings, ajaxmonth);
 }; var PreviOusmonth = function () {if (Dmonth > 0) {dmonth--;
 else {dmonth = 11;
 dyear--;
 } Init_ecalendar ();
 var ajaxmonth = dyear + "-" + (Dmonth-(-1));
 Loadecalendarbyajax (settings, ajaxmonth);
 };
 var selectyear=function () {dyear=$ ("#selYears"). Val ();
 Init_ecalendar ();
 var ajaxmonth = dyear + "-" + (Dmonth-(-1));
 Loadecalendarbyajax (settings, ajaxmonth);

 var selectmonth=function () {dmonth=$ ("#selMonths"). Val ();
 Init_ecalendar ();
 var ajaxmonth = dyear + "-" + (Dmonth-(-1));
 Loadecalendarbyajax (settings, ajaxmonth); function Loadevents () {if (typeof settings.initdata!= ' undefined ' && settings.initdata) {var ajaxmonth = d
 Year + "-" + (Dmonth-(-1)); 
 Loadecalendarbyajax (settings, ajaxmonth);//Adjust foreground method Request}//Initialize Load event function Loadecalendarbyajax (settings, ajaxmonth) {
 if (typeof settings.initdata!= ' undefined ') {settings.initdata (settings, ajaxmonth);
 }} function Init_ecalendar () {loadevents (); var dweekdayofmonthstart = new DAte (Dyear, Dmonth, 1). Getday ();
 var dlastdayofmonth = new Date (dyear, Dmonth + 1, 0). GetDate ();

 var dlastdayofpreviousmonth = new Date (dyear, Dmonth + 1, 0). GetDate ()-Dweekdayofmonthstart + 1;
 var cbody = $ (' <div/> '). addclass (' C-grid ');

 var cevents = $ (' <div/> '). addclass (' C-event-grid '); CEVENTS.CSS ("Display", "none");
 Default hidden var ceventsbody = $ (' <div/> '). addclass (' c-event-body '); Cevents.append (' <div/> '). addclass (' C_TITLE_SJ '). HTML (settings.eventtitle));
 Title//Close button var Itemclose = $ (' <div/> '). On (' click ', Onitemgridclose). attr ("href", "javascipt:void (0)"); var itemclose_a = $ (' <a/> '). On (' click ', Onitemgridclose). attr ("href", "javascipt:void (0)"). HTML ('  '). addclass (' Top_calendar_div '); var cyear=$ (' <div/> '). addclass (' C_years ');
 var cmonth = $ (' <div/> '). addclass (' c_months ');

 var cpage= $ (' <div/> '). addclass (' c_pages '); 
 Year Select event, initialize var year_sel=document.createelement ("select");
 Year_sel.setattribute ("id", "selyears");
 Year_sel.options.add (New Option ("2016", "2016")); var yearranges=settings.yearrange| | New Array (). push (Dyear); The interval of the year, the default current year for (Var i=0;i<yearranges.length;i++) {Year_sel.options.add, when no value is present, and the new Option (yearranges[i)
 Yearranges[i]));
 } year_sel.onchange=function () {selectyear (); for (var i=0 i<year_sel.options.length; i++) {if (year_sel.options[i].innerhtml = = dyear) {YEAR_SEL.OPTIONS[I].S 
  elected = true; 
 Break 
 }//end//month Select event, initialize var month_sel=document.createelement ("select");

 Month_sel.setattribute ("id", "selmonths"); var monthranges=settings.months| | [];
 Month for (Var i=0;i<monthranges.length;i++) {Month_sel.options.add (new Option (monthranges[i],i)); } month_sel.onchange=function () {SELectmonth (); for (var i=0 i<month_sel.options.length; i++) {if (month_sel.options[i].innerhtml ==monthranges[dmonth]) {month_ 
  Sel.options[i].selected = true; 
 Break  }//end var cprevious=$ (' <a/> '). On (' click ', Previousmonth). attr ("href", "javascipt:void (0)"). HTML ('  "); var cnext=$ (' <a/> '). On (' click ', Nextmonth). attr ("href", "javascipt:void (0)"). HTML ('  '). addclass (' C-week-day c-pad-top ')
 ;
 Cweekday.html (Settings.weekdays[i]);
 Cbody.append (Cweekday);
 } var day = 1;
 var dayofnextmonth = 1; for (var i = 0; i < i++) {var cday = $ (' <dIv/> ');
  if (I < Dweekdayofmonthstart) {Cday.addclass (' c-day-previous-month c-pad-top ');
 Cday.html (dlastdayofpreviousmonth++);
  else if (day <= dlastdayofmonth) {cday.addclass (' c-day c-pad-top ');
  if (day = = DDay && Admonth = = Dmonth && adyear = = dyear) {cday.addclass (' c-today ');
  for (var j = 0; J < Settings.events.length; J + +) {var d = settings.events[j].datetime; if (d.getdate () = = Day && d.getmonth () = = Dmonth && d.getfullyear () = = Dyear) {cday.addclass (' c-event ')
  . attr (' Data-event-day ', d.getdate ());
  Cday.on (' click ', Mouseclickevent). On (' MouseLeave ', mouseleaveevent);
 } cday.html (day++);
  else {cday.addclass (' c-day-next-month c-pad-top ');
 Cday.html (dayofnextmonth++);
 } cbody.append (Cday);
 var eventlist = $ (' <div/> '). addclass (' c-event-list ');
 for (var i = 0; i < settings.events.length i++) {var d = settings.events[i].datetime; if (d.getmonth () = = Dmonth && D.getfullyeaR () = = Dyear) {var date = Lpad (D.getdate (), 2) + '/' + Lpad (d.getmonth () + 1, 2) + ' + Lpad (d.gethours (), 2) + ': ' +

  Lpad (D.getminutes (), 2); Cid assigned to Div, view schedule is passed; CType: task or schedule var item = $ (' <div/> '). addclass (' C-event-item '). attr ("CID", Settings.events[i)
  . ID). attr ("CType", Settings.events[i].type); Item.attr ("title", Settings.events[i].description); Mouse move display prompt text//var title = $ (' <div/> '). addclass (' title '). HTML (date + ' + settings.events[i].title + ' <br/>
  ');
  var title = $ (' <div/> '). addclass (' title '). HTML (settings.events[i].title + ' <br/> ');
  var description = $ (' <div/> '). AddClass (' description '). HTML (settings.events[i].description + ' <br/> ');
  Item.attr (' Data-event-day ', d.getdate ());
  Item.on (' mouseover ', Mouseoveritem). On (' MouseLeave ', mouseleaveitem);

  Item.append (title). Append (description);

  C-event-item Click event Item.on (' click ', Mouseclickitem);
 Eventlist.append (item);
 } $ (instance). addclass (' Calendar '); CeventsbOdy.append (EventList);
 $ (instance). HTML (cbody). Append (cevents);
 return Init_ecalendar ();
 } $.fn.ecalendar = function (oinit) {return This.each (function () {return Ecalendar (Oinit, $ (this));
 });

 }; Plugin defaults $.fn.ecalendar.defaults = {weekdays: [' Dom ', ' Seg ', ' Ter ', ' Qua ', ' qui ', ' Sex ', ' Sab '], months: [' J Aneiro ', ' Fevereiro ', ' Março ', ' abril ', ' Maio ', ' Junho ', ' Julho ', ' agosto ', ' Setembro ', ' Outubro ', ' Novembro ', ' Dezembro '
], Textarrows: {previous: ' < ', Next: ' > '}, EventTitle: ' Eventos ', url: ', Events: []};

 } (JQuery));

Download Address: E-calendar-v2

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.