jquery.gantt，js甘特图

// jQuery Gantt Chart // ================== // Basic usage: // $(".selector").gantt({ // source: "ajax/data.json", // scale: "weeks", // minScale: "weeks", // maxScale: "months", // onItemClick: function(data) { // alert("Item clicked - show some details"); // }, // onAddClick: function(dt, rowId) { // alert("Empty space clicked - add an item!"); // }, // onRender: function() { // console.log("chart rendered"); // } // }); // /*jshint shadow:true, unused:false, laxbreak:true, evil:true*/ /*globals jQuery, alert*/ (function ($) { "use strict"; $.fn.gantt = function (options) { var cookieKey = "jquery.fn.gantt"; var scales = ["hours", "days", "weeks", "months"]; //Default settings var settings = { source: null, itemsPerPage: 7, months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], dow: ["S", "M", "T", "W", "T", "F", "S"], startPos: new Date(), navigate: "buttons", scale: "days", useCookie: false, maxScale: "months", minScale: "hours", waitText: "Please wait...", onItemClick: function (data) { return; }, onAddClick: function (data) { return; }, onRender: function() { return; }, scrollToToday: true }; // custom selector `:findday` used to match on specified day in ms. // // The selector is passed a date in ms and elements are added to the // selection filter if the element date matches, as determined by the // id attribute containing a parsable date in ms. $.extend($.expr[":"], { findday: function (a, i, m) { var cd = new Date(parseInt(m[3], 10)); var id = $(a).attr("id"); id = id ? id : ""; var si = id.indexOf("-") + 1; var ed = new Date(parseInt(id.substring(si, id.length), 10)); cd = new Date(cd.getFullYear(), cd.getMonth(), cd.getDate()); ed = new Date(ed.getFullYear(), ed.getMonth(), ed.getDate()); return cd.getTime() === ed.getTime(); } }); // custom selector `:findweek` used to match on specified week in ms. $.extend($.expr[":"], { findweek: function (a, i, m) { var cd = new Date(parseInt(m[3], 10)); var id = $(a).attr("id"); id = id ? id : ""; var si = id.indexOf("-") + 1; cd = cd.getFullYear() + "-" + cd.getDayForWeek().getWeekOfYear(); var ed = id.substring(si, id.length); return cd === ed; } }); // custom selector `:findmonth` used to match on specified month in ms. $.extend($.expr[":"], { findmonth: function (a, i, m) { var cd = new Date(parseInt(m[3], 10)); cd = cd.getFullYear() + "-" + cd.getMonth(); var id = $(a).attr("id"); id = id ? id : ""; var si = id.indexOf("-") + 1; var ed = id.substring(si, id.length); return cd === ed; } }); // Date prototype helpers // ====================== // `getWeekId` returns a string in the form of 'dh-YYYY-WW', where WW is // the week # for the year. // It is used to add an id to the week divs Date.prototype.getWeekId = function () { var y = this.getFullYear(); var w = this.getDayForWeek().getWeekOfYear(); var m = this.getMonth(); if (m === 11 && w === 1) { y++; } return 'dh-' + y + "-" + w; }; // `getRepDate` returns the seconds since the epoch for a given date // depending on the active scale Date.prototype.genRepDate = function () { switch (settings.scale) { case "hours": return this.getTime(); case "weeks": return this.getDayForWeek().getTime(); case "months": return new Date(this.getFullYear(), this.getMonth(), 1).getTime(); default: return this.getTime(); } }; // `getDayOfYear` returns the day number for the year Date.prototype.getDayOfYear = function () { var fd = new Date(this.getFullYear(), 0, 0); var sd = new Date(this.getFullYear(), this.getMonth(), this.getDate()); return Math.ceil((sd - fd) / 86400000); }; // `getWeekOfYear` returns the week number for the year Date.prototype.getWeekOfYear = function () { var ys = new Date(this.getFullYear(), 0, 1); var sd = new Date(this.getFullYear(), this.getMonth(), this.getDate()); if (ys.getDay() > 3) { ys = new Date(sd.getFullYear(), 0, (7 - ys.getDay())); } var daysCount = sd.getDayOfYear() - ys.getDayOfYear(); return Math.ceil(daysCount / 7); }; // `getDaysInMonth` returns the number of days in a month Date.prototype.getDaysInMonth = function () { return 32 - new Date(this.getFullYear(), this.getMonth(), 32).getDate(); }; // `hasWeek` returns `true` if the date resides on a week boundary // **????????????????? Don't know if this is true** Date.prototype.hasWeek = function () { var df = new Date(this.valueOf()); df.setDate(df.getDate() - df.getDay()); var dt = new Date(this.valueOf()); dt.setDate(dt.getDate() + (6 - dt.getDay())); if (df.getMonth() === dt.getMonth()) { return true; } else { return (df.getMonth() === this.getMonth() && dt.getDate() < 4) || (df.getMonth() !== this.getMonth() && dt.getDate() >= 4); } }; // `getDayForWeek` returns the Date object for the starting date of // the week # for the year Date.prototype.getDayForWeek = function () { var df = new Date(this.valueOf()); df.setDate(df.getDate() - df.getDay()); var dt = new Date(this.valueOf()); dt.setDate(dt.getDate() + (6 - dt.getDay())); if ((df.getMonth() === dt.getMonth()) || (df.getMonth() !== dt.getMonth() && dt.getDate() >= 4)) { return new Date(dt.setDate(dt.getDate() - 3)); } else { return new Date(df.setDate(df.getDate() + 3)); } }; // Grid management // =============== // Core object is responsible for navigation and rendering var core = { // Return the element whose topmost point lies under the given point // Normalizes for IE elementFromPoint: function (x, y) { if ($.browser.msie) { x -= $(document).scrollLeft(); y -= $(document).scrollTop(); } else { x -= window.pageXOffset; y -= window.pageYOffset; } return document.elementFromPoint(x, y); }, // **Create the chart** create: function (element) { // Initialize data with a json object or fetch via an xhr // request depending on `settings.so