Jquery calendar plug-in e-calendar upgraded version, jquerye-calendar

Jquery calendar plug-in e-calendar upgraded version, jquerye-calendar

The jQuery Event calendar plug-in e-calendar allows you to customize a calendar for a specified date (no limit on the number of entries). The calendar date is highlighted and compatible with IE7 + mainstream browsers.

Original usage and demo address: e-calendar (move the mouse to the day to display the calendar of the Day)

Upgrade:

1. Multiple event intersections can exist in the same day
2. Click "day" to display the calendar list below the calendar.
3. Click the calendar list to add its events.
4. Add display and hide of item-grid
5. You can add id, type, and other elements to the array set in Events (by calendar type: Task type or calendar type)

6. Select year and month
7. Style Adjustment
8. Write ajax loading events, item click events, and so on in the calendar ar configuration.

Run:

Main Code:

Index.html

<! DOCTYPE html> 
Use $ ('# calendar'). eCalendar () to configure calendar loading.

Parameters
YearRange: the drop-down box range of the year.
Months: monthly drop-down list
InitData: Data initialization call Function
ClickItem: Calendar list Click Event
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 = ad Year; 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 activity') ;}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-ev Ent-over-item');}; var mouseLeaveItem = function () {$ (this ). removeClass ('C-event-over-item')}; var nextMonth = function () {if (dMonth <11) {dMonth ++;} else {dMonth = 0; dYear ++;} init_eCalendar (); var ajaxMonth = dYear + "-" + (dMonth-(-1); loadeCalendarByAjax (settings, ajaxMonth );}; var previusmonth = 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); loadeCal EndarByAjax (settings, ajaxMonth);} function loadEvents () {if (typeof settings. initData! = 'Undefined' & settings. initData) {var ajaxMonth = dYear + "-" + (dMonth-(-1); loadeCalendarByAjax (settings, ajaxMonth ); // call the frontend Method Request} // initialize the loading 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"); // var cEventsBody =$ ('<div/>') is hidden by default '). addClass ('C-event-body'); cEvents. append ($ ('<div/> '{.addclass('c_title_sj'{.html (settings. eventTitle); // Title // close the button var itemClose =$ ('<div/> '). on ('click', onItemGridClose ). attr ("href", "Export CEPT: void (0)"); var itemClose_a = $ ('<a/> '). on ('click', onItemGridClose ). attr ("href", "javascept: void (0 )"). html (''); itemClose.addClass('c-close-top').html (itemClose_a); // itemClose. attr ('onclick', "onItemGridClose ()"); cEvents. append (itemClose); cEvents. append (cEventsBody); // subject var cTitle = $ ('<div/> '). addClass ('top _ calendar_div '); var cYear =$ (' <div/> '). addClass ('C _ years'); var cMonth =$ ('<div/> '). addClass ('C _ months'); var cPage =$ ('<div/> '). addClass ('C _ pages '); // year selection 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. If no value exists, the default year is for (var I = 0; I <yearRanges. length; I ++) {year_sel.options.add (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]. selected = true; break; }}// end // select the event for the month and 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 =ous ('<a/> '). on ('click', previusmonth ). attr ("href", "javascept: void (0 )"). html (''); var cNext = $ ('<a/> '). on ('click', nextMonth ). attr ("href", "javascept: void (0 )"). html (''); // cMonth.html (settings. months [dMonth] + ''+ dYear); cYear.html (year_sel); cMonth.html (month_sel); cPage. append (cPrevious); cPage. append (cNext); cTitle. append (cYear); cTitle. append (cMonth); cTitle. append (cPage); cBody. append (cTitle); for (var I = 0; I <settings. weekDays. length; I ++) {var cWeekDay =day ('<div/> '). 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 <42; 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 calendar is passed; ctype: task or calendar 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); // move the mouse to display the prompt text // var title = $ ('<div/> 'salary .addclass('title'salary .html (date + ''+ settings. events [I]. title + '<br/>'); var title = $ ('<div/> 'privacy .addclass('title'privacy .html (settings. events [I]. title + '<br/>'); var description = $ ('<div/> 'privacy .addclass('description'privacy .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); // Click event item of c-event-item. on ('click', mouseClickItem); eventList. append (item) ;}$ (instance ). addClass ('calendar '); cEventsBody. append (eventList); returns (instance).html (cBody ). append (cEvents);} return init_eCalendar ();} $. fn. eCalendar = function (oInit) {return this. each (function () {return eCalendar (oInit, $ (this) ;}; // plugin defaults $. fn. eCalendar. ults = {weekDays: ['dom ', 'seg', 'ter', 'qua', 'qui', 'sex', 'sab'], months: ['janeiro ', 'fevereiro', 'março', 'ablil', 'maio ', 'junho', 'julho', 'ago', 'setembro ', 'outubro', 'novembro', 'dezembro'], textArrows: {previous: '<', next: '>'}, eventTitle: 'eventos ', url :'', events: [] };} (jQuery ));
: E-calendar-v2
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.