jsCalendar.js 40 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314
  1. /*
  2. * jsCalendar v1.4.2
  3. *
  4. *
  5. * MIT License
  6. *
  7. * Copyright (c) 2018 Grammatopoulos Athanasios-Vasileios
  8. *
  9. * Permission is hereby granted, free of charge, to any person obtaining a copy
  10. * of this software and associated documentation files (the "Software"), to deal
  11. * in the Software without restriction, including without limitation the rights
  12. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  13. * copies of the Software, and to permit persons to whom the Software is
  14. * furnished to do so, subject to the following conditions:
  15. *
  16. * The above copyright notice and this permission notice shall be included in all
  17. * copies or substantial portions of the Software.
  18. *
  19. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  20. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  21. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  22. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  23. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  24. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  25. * SOFTWARE.
  26. *
  27. */
  28. var jsCalendar = (function(){
  29. // Constructor
  30. function JsCalendar(){
  31. // No parameters
  32. if (arguments.length === 0) {
  33. // Do nothing
  34. return;
  35. }
  36. else {
  37. // Construct calendar
  38. this._construct(arguments);
  39. }
  40. }
  41. // Version
  42. JsCalendar.version = "v1.4.2";
  43. // Sub-Constructor
  44. JsCalendar.prototype._construct = function(args) {
  45. // Parse arguments
  46. args = this._parseArguments(args);
  47. // Init calendar
  48. this._init(args.options);
  49. // Init target
  50. this._setTarget(args.target);
  51. this._initTarget();
  52. // Set date
  53. this._setDate(args.date);
  54. // Create
  55. this._create();
  56. // Update
  57. this._update();
  58. };
  59. // Languages
  60. JsCalendar.prototype.languages = {
  61. // Default English language
  62. en : {
  63. // Months Names
  64. months : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
  65. // Days Names
  66. days : ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
  67. }
  68. };
  69. // Init calendar
  70. JsCalendar.prototype._init = function(options) {
  71. // Init elements object
  72. this._elements = {};
  73. // Events init
  74. this._events = {};
  75. this._events.date = [];
  76. this._events.month = [];
  77. // Dates variables
  78. this._now = null;
  79. this._date = null;
  80. this._selected = [];
  81. // Language object
  82. this.language = {};
  83. // Parse options
  84. this._parseOptions(options);
  85. };
  86. // Parse options
  87. JsCalendar.prototype._parseArguments = function(args) {
  88. // Arguments object
  89. var obj = {
  90. target : null,
  91. date : new Date(),
  92. options : {}
  93. };
  94. // If no arguments
  95. if (args.length === 0) {
  96. // Throw an error
  97. throw new Error("jsCalendar: No parameters were given.");
  98. }
  99. // Only 1 argument
  100. else if (args.length === 1) {
  101. // If target element
  102. if (
  103. (
  104. // If html element
  105. ((typeof HTMLElement === "object") ? (args[0] instanceof HTMLElement) : args[0]) &&
  106. (typeof args[0] === "object") && (args[0] !== null) && (args[0].nodeType === 1) &&
  107. (typeof args[0].nodeName === "string")
  108. ) || (
  109. // Or string
  110. typeof args[0] === "string"
  111. )
  112. ) {
  113. obj.target = args[0];
  114. }
  115. // Options argument
  116. else {
  117. // Init arguments
  118. obj.options = args[0];
  119. // Get target
  120. if (typeof args[0].target !== "undefined") {
  121. obj.target = args[0].target;
  122. }
  123. else {
  124. // Throw an error
  125. throw new Error("jsCalendar: Not target was given.");
  126. }
  127. // Get date
  128. if (typeof args[0].date !== "undefined") {
  129. obj.date = args[0].date;
  130. }
  131. }
  132. }
  133. // Many arguments
  134. else {
  135. // First is target
  136. obj.target = args[0];
  137. // If date
  138. if (args.length >= 2) {
  139. obj.date = args[1];
  140. }
  141. // If options
  142. if (args.length >= 3) {
  143. obj.options = args[2];
  144. }
  145. }
  146. // Return object
  147. return obj;
  148. };
  149. // Parse options
  150. JsCalendar.prototype._parseOptions = function(options) {
  151. // Default options
  152. this._options = {
  153. language : "en",
  154. zeroFill : false,
  155. monthFormat : "month",
  156. dayFormat : "D",
  157. firstDayOfTheWeek : 1,
  158. navigator : true,
  159. navigatorPosition : "both",
  160. min : false,
  161. max : false
  162. };
  163. // Check options
  164. if (typeof options.zeroFill !== "undefined"){
  165. if (options.zeroFill === "false" || !options.zeroFill) {
  166. this._options.zeroFill = false;
  167. }
  168. else {
  169. this._options.zeroFill = true;
  170. }
  171. }
  172. if (typeof options.monthFormat !== "undefined"){
  173. this._options.monthFormat = options.monthFormat;
  174. }
  175. if (typeof options.dayFormat !== "undefined"){
  176. this._options.dayFormat = options.dayFormat;
  177. }
  178. if (typeof options.navigator !== "undefined"){
  179. if (options.navigator === "false" || !options.navigator) {
  180. this._options.navigator = false;
  181. }
  182. else {
  183. this._options.navigator = true;
  184. }
  185. }
  186. if (typeof options.navigatorPosition !== "undefined"){
  187. this._options.navigatorPosition = options.navigatorPosition;
  188. }
  189. // Language
  190. if (typeof options.language === "string" && typeof this.languages[options.language] !== "undefined"){
  191. this._options.language = options.language;
  192. }
  193. // Set language
  194. this.setLanguage(this._options.language);
  195. // Set first day of the week
  196. if (typeof options.fdotw !== "undefined"){
  197. options.firstDayOfTheWeek = options.fdotw;
  198. }
  199. if (typeof options.firstDayOfTheWeek !== "undefined"){
  200. // If day number
  201. if (typeof options.firstDayOfTheWeek === "number") {
  202. // Range check (no need to check for bigger than 7 but I don't trust anyone)
  203. if (options.firstDayOfTheWeek >= 1 && options.firstDayOfTheWeek <= 7) {
  204. this._options.firstDayOfTheWeek = options.firstDayOfTheWeek;
  205. }
  206. }
  207. // If string
  208. if (typeof options.firstDayOfTheWeek === "string") {
  209. // If day number
  210. if (options.firstDayOfTheWeek.match(/^[1-7]$/)) {
  211. this._options.firstDayOfTheWeek = parseInt(options.firstDayOfTheWeek, 10);
  212. }
  213. // else use it as a day name
  214. else {
  215. // So find day
  216. this._options.firstDayOfTheWeek = this.language.days.indexOf(options.firstDayOfTheWeek) + 1;
  217. // Range check (no need to check for bigger then 7 but I don't trust anyone)
  218. if (this._options.firstDayOfTheWeek < 1 || this._options.firstDayOfTheWeek > 7) {
  219. this._options.firstDayOfTheWeek = 1;
  220. }
  221. }
  222. }
  223. }
  224. // Set min calendar date
  225. if (typeof options.min !== "undefined" && options.min !== "false" && options.min !== false) {
  226. // Parse date
  227. this._options.min = this._parseDate(options.min);
  228. }
  229. // Set max calendar date
  230. if (typeof options.max !== "undefined" && options.max !== "false" && options.max !== false) {
  231. // Parse date
  232. this._options.max = this._parseDate(options.max);
  233. }
  234. };
  235. // Set target
  236. JsCalendar.prototype._setTarget = function(element) {
  237. // Parse target
  238. var target = this._getElement(element);
  239. // If target not found
  240. if (!target) {
  241. // Throw an error
  242. throw new Error("jsCalendar: Target was not found.");
  243. }
  244. else {
  245. // Save element
  246. this._target = target;
  247. }
  248. };
  249. // Get element
  250. JsCalendar.prototype._getElement = function(element) {
  251. // Check if not valid
  252. if (!element) {
  253. return null;
  254. }
  255. // If string
  256. if (typeof element === "string") {
  257. // Get element by id
  258. if (element[0] === "#") {
  259. return document.getElementById(element.substring(1));
  260. }
  261. // Get element by class-name
  262. else if (element[0] === ".") {
  263. return document.getElementsByClassName(element.substring(1))[0];
  264. }
  265. }
  266. // or if it is HTML element (just a naive-simple check)
  267. else if (element.tagName && element.nodeName && element.ownerDocument && element.removeAttribute) {
  268. return element;
  269. }
  270. // Unknown
  271. return null;
  272. };
  273. // Init target
  274. JsCalendar.prototype._initTarget = function() {
  275. // Add class
  276. if (this._target.className.length > 0){
  277. this._target.className += " ";
  278. }
  279. this._target.className += "jsCalendar";
  280. // Create table
  281. this._elements.table = document.createElement("table");
  282. // Create table header
  283. this._elements.head = document.createElement("thead");
  284. this._elements.table.appendChild(this._elements.head);
  285. // Create table body
  286. this._elements.body = document.createElement("tbody");
  287. this._elements.table.appendChild(this._elements.body);
  288. // Insert on page
  289. this._target.appendChild(this._elements.table);
  290. };
  291. // Check if date in range
  292. JsCalendar.prototype._isDateInRange = function(date) {
  293. // If no range
  294. if (this._options.min === false && this._options.max === false) {
  295. return true;
  296. }
  297. // Parse date
  298. date = this._parseDate(date);
  299. // Check min
  300. if (this._options.min !== false && this._options.min.getTime() > date.getTime()) {
  301. return false;
  302. }
  303. // Check max
  304. if (this._options.max !== false && this._options.max.getTime() < date.getTime()) {
  305. return false;
  306. }
  307. // In range
  308. return true;
  309. };
  310. // Set a Date
  311. JsCalendar.prototype._setDate = function(date) {
  312. // Check date not in range
  313. if (!this._isDateInRange(date)) {
  314. return;
  315. }
  316. // Set data
  317. this._now = this._parseDate(date);
  318. this._date = new Date(this._now.getFullYear(), this._now.getMonth(), 1);
  319. };
  320. // Parse Date
  321. JsCalendar.prototype._parseDate = function(date) {
  322. // If set now date
  323. if (typeof date === "undefined" || date === null || date === "now") {
  324. // Get date now
  325. date = new Date();
  326. }
  327. // If date is string
  328. else if (typeof date === "string") {
  329. // Parse date string
  330. date = date.replace(/-/g,"\/").match(/^(\d{1,2})\/(\d{1,2})\/(\d{4,4})$/i);
  331. // If match
  332. if (date !== null) {
  333. var month_index = parseInt(date[2], 10) - 1;
  334. // Parse date
  335. date = new Date(date[3], month_index, date[1]);
  336. // Check if date does not exist
  337. if (!date || date.getMonth() !== month_index) {
  338. // Throw an error
  339. throw new Error("jsCalendar: Date does not exist.");
  340. }
  341. }
  342. // Can't parse string
  343. else {
  344. // Throw an error
  345. throw new Error("jsCalendar: Failed to parse date.");
  346. }
  347. }
  348. // If it is a number
  349. else if (typeof date === "number") {
  350. // Get time from timestamp
  351. date = new Date(date);
  352. }
  353. // If it not a date
  354. else if (!(date instanceof Date)) {
  355. // Throw an error
  356. throw new Error("jsCalendar: Invalid date.");
  357. }
  358. // Return date
  359. return new Date(date.getTime());
  360. };
  361. // Convert to date string
  362. JsCalendar.prototype._parseToDateString = function(date, format) {
  363. var lang = this.language;
  364. return format.replace(/(MONTH|month|MMM|mmm|mm|m|MM|M|DAY|day|DDD|ddd|dd|d|DD|D|YYYY|yyyy)/g, function(key){
  365. switch(key) {
  366. case "MONTH":
  367. case "month":
  368. return lang.months[date.getMonth()];
  369. case "MMM":
  370. case "mmm":
  371. return lang.months[date.getMonth()].substring(0, 3);
  372. case "mm":
  373. return lang.months[date.getMonth()].substring(0, 2);
  374. case "m":
  375. return lang.months[date.getMonth()].substring(0, 1);
  376. case "MM":
  377. return (date.getMonth() < 9 ? "0" : "") + (date.getMonth() + 1);
  378. case "M":
  379. return date.getMonth() + 1;
  380. case "DAY":
  381. case "day":
  382. return lang.days[date.getDay()];
  383. case "DDD":
  384. case "ddd":
  385. return lang.days[date.getDay()].substring(0, 3);
  386. case "dd":
  387. return lang.days[date.getDay()].substring(0, 2);
  388. case "d":
  389. return lang.days[date.getDay()].substring(0, 1);
  390. case "DD":
  391. return (date.getDate() <= 9 ? "0" : "") + date.getDate();
  392. case "D":
  393. return date.getDate();
  394. case "YYYY":
  395. case "yyyy":
  396. return date.getYear() + 1900;
  397. }
  398. });
  399. };
  400. // Get visible month
  401. JsCalendar.prototype._getVisibleMonth = function(date) {
  402. // For date
  403. if (typeof date === "undefined") {
  404. // Get saved date
  405. date = this._date;
  406. }
  407. else {
  408. date = this._parseDate(date);
  409. }
  410. // Get month's first day
  411. var first = new Date(date.getTime());
  412. first.setDate(1);
  413. // First day of the month index
  414. var firstDay = first.getDay() - (this._options.firstDayOfTheWeek - 1);
  415. if (firstDay < 0) {
  416. firstDay += 7;
  417. }
  418. // Get month's name
  419. var lang = this.language;
  420. var name = this._options.monthFormat.replace(/(MONTH|month|MMM|mmm|##|#|YYYY|yyyy)/g, function(key){
  421. switch(key) {
  422. case "MONTH":
  423. case "month":
  424. return lang.months[first.getMonth()];
  425. case "MMM":
  426. case "mmm":
  427. return lang.months[first.getMonth()].substring(0, 3);
  428. case "##":
  429. return (first.getMonth() < 9 ? "0" : "") + (first.getMonth() + 1);
  430. case "#":
  431. return first.getMonth() + 1;
  432. case "YYYY":
  433. case "yyyy":
  434. return first.getYear() + 1900;
  435. }
  436. });
  437. // Get visible days
  438. var days = this._getVisibleDates(date);
  439. var daysInMonth = new Date(first.getYear() + 1900, first.getMonth() + 1, 0).getDate();
  440. var current = -1;
  441. // If this is the month
  442. if (first.getYear() === this._now.getYear() && first.getMonth() === this._now.getMonth()) {
  443. // Calculate current
  444. current = firstDay + this._now.getDate() - 1;
  445. }
  446. // Return object
  447. return {
  448. name : name,
  449. days : days,
  450. start : firstDay + 1,
  451. current : current,
  452. end : firstDay + daysInMonth
  453. };
  454. };
  455. // Get visible dates
  456. JsCalendar.prototype._getVisibleDates = function(date) {
  457. // For date
  458. if (typeof date === "undefined") {
  459. // Get saved date
  460. date = this._date;
  461. }
  462. else {
  463. date = this._parseDate(date);
  464. }
  465. // Visible days array
  466. var dates = [];
  467. // Get first day of the month
  468. var first = new Date(date.getTime());
  469. first.setDate(1);
  470. // Count days of previous month to show
  471. var previous = first.getDay() - (this._options.firstDayOfTheWeek - 1);
  472. if (previous < 0) {
  473. previous += 7;
  474. }
  475. // Set day to month's first
  476. var day = new Date(first.getTime());
  477. // Previous month's days
  478. while (previous > 0) {
  479. // Calculate previous day
  480. day.setDate(day.getDate() - 1);
  481. // Add page on frond of the list
  482. dates.unshift(new Date(day.getTime()));
  483. // Previous
  484. previous --;
  485. }
  486. // Set day to month's first
  487. day = new Date(first.getTime());
  488. // This month's days
  489. do {
  490. // Add page on back of the list
  491. dates.push(new Date(day.getTime()));
  492. // Calculate next day
  493. day.setDate(day.getDate() + 1);
  494. // Repeat until next month
  495. } while (day.getDate() !== 1);
  496. // Next month's days
  497. var next = 42 - dates.length;
  498. // Add days left
  499. while (next > 0) {
  500. // Add page on back of the list
  501. dates.push(new Date(day.getTime()));
  502. // Calculate next day
  503. day.setDate(day.getDate() + 1);
  504. // Next
  505. next --;
  506. }
  507. // Return days
  508. return dates;
  509. };
  510. // Create calendar
  511. JsCalendar.prototype._create = function() {
  512. // Save instance
  513. var that = this;
  514. // Set created flag
  515. this._elements.created = true;
  516. // Head rows
  517. this._elements.headRows = [];
  518. for (var i = 0; i < 2; i++) {
  519. this._elements.headRows.push(document.createElement("tr"));
  520. this._elements.head.appendChild(this._elements.headRows[i]);
  521. }
  522. // Month row
  523. var title_header = document.createElement("th");
  524. title_header.setAttribute("colspan", 7);
  525. this._elements.headRows[0].className = "jsCalendar-title-row";
  526. this._elements.headRows[0].appendChild(title_header);
  527. this._elements.headLeft = document.createElement("div");
  528. this._elements.headLeft.className = "jsCalendar-title-left";
  529. title_header.appendChild(this._elements.headLeft);
  530. this._elements.month = document.createElement("div");
  531. this._elements.month.className = "jsCalendar-title-name";
  532. title_header.appendChild(this._elements.month);
  533. this._elements.headRight = document.createElement("div");
  534. this._elements.headRight.className = "jsCalendar-title-right";
  535. title_header.appendChild(this._elements.headRight);
  536. // Navigation
  537. if (this._options.navigator) {
  538. this._elements.navLeft = document.createElement("div");
  539. this._elements.navLeft.className = "jsCalendar-nav-left";
  540. this._elements.navRight = document.createElement("div");
  541. this._elements.navRight.className = "jsCalendar-nav-right";
  542. if (this._options.navigatorPosition === "left") {
  543. this._elements.headLeft.appendChild(this._elements.navLeft);
  544. this._elements.headLeft.appendChild(this._elements.navRight);
  545. }
  546. else if (this._options.navigatorPosition === "right") {
  547. this._elements.headRight.appendChild(this._elements.navLeft);
  548. this._elements.headRight.appendChild(this._elements.navRight);
  549. }
  550. else {
  551. this._elements.headLeft.appendChild(this._elements.navLeft);
  552. this._elements.headRight.appendChild(this._elements.navRight);
  553. }
  554. // Event listeners
  555. this._elements.navLeft.addEventListener('click', function(event){
  556. that.previous();
  557. that._eventFire_monthChange(event, that._date);
  558. }, false);
  559. this._elements.navRight.addEventListener('click', function(event){
  560. that.next();
  561. that._eventFire_monthChange(event, that._date);
  562. }, false);
  563. }
  564. // Days row
  565. this._elements.headRows[1].className = "jsCalendar-week-days";
  566. title_header.className = "jsCalendar-title";
  567. this._elements.days = [];
  568. var name, nameOfDay;
  569. for (i = 0; i < 7; i++) {
  570. this._elements.days.push(document.createElement("th"));
  571. this._elements.headRows[1].appendChild(this._elements.days[
  572. this._elements.days.length - 1
  573. ]);
  574. nameOfDay = this.language.days[(i + this._options.firstDayOfTheWeek - 1) % 7];
  575. name = this._options.dayFormat.replace(/(DAY|day|DDD|ddd|DD|dd|D)/g, function(key){
  576. switch(key) {
  577. case "DAY":
  578. case "day":
  579. return nameOfDay;
  580. case "DDD":
  581. case "ddd":
  582. return nameOfDay.substring(0, 3);
  583. case "DD":
  584. case "dd":
  585. return nameOfDay.substring(0, 2);
  586. case "D":
  587. return nameOfDay.substring(0, 1);
  588. }
  589. });
  590. this._elements.days[this._elements.days.length - 1].textContent = name;
  591. }
  592. // Body rows
  593. this._elements.bodyRows = [];
  594. this._elements.bodyCols = [];
  595. // 6 rows
  596. for (i = 0; i < 6; i++) {
  597. this._elements.bodyRows.push(document.createElement("tr"));
  598. this._elements.body.appendChild(this._elements.bodyRows[i]);
  599. // 7 days
  600. for (var j = 0; j < 7; j++) {
  601. this._elements.bodyCols.push(document.createElement("td"));
  602. this._elements.bodyRows[i].appendChild(this._elements.bodyCols[i * 7 + j]);
  603. this._elements.bodyCols[i * 7 + j].addEventListener('click', (function(index){
  604. return function (event) {
  605. that._eventFire_dateClick(event, that._active[index]);
  606. };
  607. })(i * 7 + j), false);
  608. }
  609. }
  610. };
  611. // Select dates on calendar
  612. JsCalendar.prototype._selectDates = function(dates) {
  613. // Copy array instance
  614. dates = dates.slice();
  615. // Parse dates
  616. for (var i = 0; i < dates.length; i++) {
  617. dates[i] = this._parseDate(dates[i]);
  618. dates[i].setHours(0, 0, 0, 0);
  619. dates[i] = dates[i].getTime();
  620. }
  621. // Insert dates on array
  622. for (i = dates.length - 1; i >= 0; i--) {
  623. // If not already selected
  624. if (this._selected.indexOf(dates[i]) < 0) {
  625. this._selected.push(dates[i]);
  626. }
  627. }
  628. };
  629. // Un-select dates on calendar
  630. JsCalendar.prototype._unselectDates = function(dates) {
  631. // Copy array instance
  632. dates = dates.slice();
  633. // Parse dates
  634. for (var i = 0; i < dates.length; i++) {
  635. dates[i] = this._parseDate(dates[i]);
  636. dates[i].setHours(0, 0, 0, 0);
  637. dates[i] = dates[i].getTime();
  638. }
  639. // Remove dates of the array
  640. var index;
  641. for (i = dates.length - 1; i >= 0; i--) {
  642. // If selected
  643. index = this._selected.indexOf(dates[i]);
  644. if (index >= 0) {
  645. this._selected.splice(index, 1);
  646. }
  647. }
  648. };
  649. // Unselect all dates on calendar
  650. JsCalendar.prototype._unselectAllDates = function() {
  651. // While not empty
  652. while (this._selected.length) {
  653. this._selected.pop();
  654. }
  655. };
  656. // Update calendar
  657. JsCalendar.prototype._update = function() {
  658. // Get month info
  659. var month = this._getVisibleMonth(this._date);
  660. // Save data
  661. this._active = month.days.slice();
  662. // Update month name
  663. this._elements.month.textContent = month.name;
  664. // Check zeros filling
  665. var prefix = "";
  666. if (this._options.zeroFill) {
  667. prefix = "0";
  668. }
  669. // Populate days
  670. var text;
  671. for (var i = month.days.length - 1; i >= 0; i--) {
  672. text = month.days[i].getDate();
  673. this._elements.bodyCols[i].textContent = (text < 10 ? prefix + text : text);
  674. // If date is selected
  675. if (this._selected.indexOf(month.days[i].getTime()) >= 0) {
  676. this._elements.bodyCols[i].className = "jsCalendar-selected";
  677. }
  678. else {
  679. this._elements.bodyCols[i].removeAttribute("class");
  680. }
  681. }
  682. // Previous month
  683. for (i = 0; i < month.start - 1; i++) {
  684. this._elements.bodyCols[i].className = "jsCalendar-previous";
  685. }
  686. // Current day
  687. if(month.current >= 0){
  688. if (this._elements.bodyCols[month.current].className.length > 0) {
  689. this._elements.bodyCols[month.current].className += " jsCalendar-current";
  690. }
  691. else {
  692. this._elements.bodyCols[month.current].className = "jsCalendar-current";
  693. }
  694. }
  695. // Next month
  696. for (i = month.end; i < month.days.length; i++) {
  697. this._elements.bodyCols[i].className = "jsCalendar-next";
  698. }
  699. };
  700. // Fire all event listeners
  701. JsCalendar.prototype._eventFire_dateClick = function(event, date) {
  702. // Events
  703. for (var i = 0; i < this._events.date.length; i++) {
  704. (function(callback) {
  705. // Call asynchronous
  706. setTimeout(function(){
  707. // Call callback
  708. callback(event, new Date(date.getTime()));
  709. }, 0);
  710. })(this._events.date[i]);
  711. }
  712. };
  713. // Fire all event listeners
  714. JsCalendar.prototype._eventFire_monthChange = function(event, date) {
  715. // Get first day of the month
  716. var month = new Date(date.getTime());
  717. month.setDate(1);
  718. // Events
  719. for (var i = 0; i < this._events.month.length; i++) {
  720. (function(callback) {
  721. // Call asynchronous
  722. setTimeout(function(){
  723. // Call callback
  724. callback(event, new Date(month.getTime()));
  725. }, 0);
  726. })(this._events.month[i]);
  727. }
  728. };
  729. // Add a event listener
  730. JsCalendar.prototype.onDateClick = function(callback) {
  731. // If callback is a function
  732. if(typeof callback === "function"){
  733. // Add to the list
  734. this._events.date.push(callback);
  735. }
  736. // Not a function
  737. else {
  738. // Throw an error
  739. throw new Error("jsCalendar: Invalid callback function.");
  740. }
  741. // Return
  742. return this;
  743. };
  744. // Add a event listener
  745. JsCalendar.prototype.onMonthChange = function(callback) {
  746. // If callback is a function
  747. if(typeof callback === "function"){
  748. // Add to the list
  749. this._events.month.push(callback);
  750. }
  751. // Not a function
  752. else {
  753. // Throw an error
  754. throw new Error("jsCalendar: Invalid callback function.");
  755. }
  756. // Return
  757. return this;
  758. };
  759. // Goto a date
  760. JsCalendar.prototype.set = function(date){
  761. // Set new date
  762. this._setDate(date);
  763. // Refresh
  764. this.refresh();
  765. // Return
  766. return this;
  767. };
  768. // Set min date
  769. JsCalendar.prototype.min = function(date){
  770. // If value
  771. if (date) {
  772. // Set min date
  773. this._options.min = this._parseDate(date);
  774. }
  775. // Disable
  776. else {
  777. this._options.min = false;
  778. }
  779. // Refresh
  780. this.refresh();
  781. // Return
  782. return this;
  783. };
  784. // Set max date
  785. JsCalendar.prototype.max = function(date){
  786. // If value
  787. if (date) {
  788. // Set max date
  789. this._options.max = this._parseDate(date);
  790. }
  791. // Disable
  792. else {
  793. this._options.max = false;
  794. }
  795. // Refresh
  796. this.refresh();
  797. // Return
  798. return this;
  799. };
  800. // Refresh
  801. // Safe _update
  802. JsCalendar.prototype.refresh = function(date) {
  803. // If date provided
  804. if (typeof date !== "undefined") {
  805. // If date is in range
  806. if (this._isDateInRange(date)) {
  807. this._date = this._parseDate(date);
  808. }
  809. }
  810. // If calendar elements ready
  811. if (this._elements.created === true) {
  812. this._update();
  813. }
  814. // Return
  815. return this;
  816. };
  817. // Next month
  818. JsCalendar.prototype.next = function(n){
  819. // Next number
  820. if (typeof n !== "number") {
  821. n = 1;
  822. }
  823. // Calculate date
  824. var date = new Date(this._date.getFullYear(), this._date.getMonth() + n, 1);
  825. // If date is not in range
  826. if (!this._isDateInRange(date)) {
  827. return this;
  828. }
  829. // Set date
  830. this._date = date;
  831. this.refresh();
  832. // Return
  833. return this;
  834. };
  835. // Next month
  836. JsCalendar.prototype.previous = function(n){
  837. // Next number
  838. if (typeof n !== "number") {
  839. n = 1;
  840. }
  841. // Calculate date
  842. var date = new Date(this._date.getFullYear(), this._date.getMonth() - n, 1);
  843. // If date is not in range
  844. if (!this._isDateInRange(date)) {
  845. return this;
  846. }
  847. // Set date
  848. this._date = date;
  849. this.refresh();
  850. // Return
  851. return this;
  852. };
  853. // Goto a date
  854. JsCalendar.prototype.goto = function(date){
  855. this.refresh(date);
  856. // Return
  857. return this;
  858. };
  859. // Reset to the date
  860. JsCalendar.prototype.reset = function(){
  861. this.refresh(this._now);
  862. // Return
  863. return this;
  864. };
  865. // Select dates
  866. JsCalendar.prototype.select = function(dates){
  867. // If no arguments
  868. if (typeof dates === "undefined") {
  869. // Return
  870. return this;
  871. }
  872. // If dates not array
  873. if (!(dates instanceof Array)) {
  874. // Lets make it an array
  875. dates = [dates];
  876. }
  877. // Select dates
  878. this._selectDates(dates);
  879. // Refresh
  880. this.refresh();
  881. // Return
  882. return this;
  883. };
  884. // Unselect dates
  885. JsCalendar.prototype.unselect = function(dates){
  886. // If no arguments
  887. if (typeof dates === "undefined") {
  888. // Return
  889. return this;
  890. }
  891. // If dates not array
  892. if (!(dates instanceof Array)) {
  893. // Lets make it an array
  894. dates = [dates];
  895. }
  896. // Unselect dates
  897. this._unselectDates(dates);
  898. // Refresh
  899. this.refresh();
  900. // Return
  901. return this;
  902. };
  903. // Unselect all dates
  904. JsCalendar.prototype.clearselect = function(){
  905. // Unselect all dates
  906. this._unselectAllDates();
  907. // Refresh
  908. this.refresh();
  909. // Return
  910. return this;
  911. };
  912. // Unselect all dates (alias)
  913. JsCalendar.prototype.clearSelected = JsCalendar.prototype.clearselect;
  914. // Get selected dates
  915. JsCalendar.prototype.getSelected = function(options){
  916. // Check if no options
  917. if (typeof options !== "object") {
  918. options = {};
  919. }
  920. // Copy selected array
  921. var dates = this._selected.slice();
  922. // Options - Sort array
  923. if (options.sort) {
  924. if (options.sort === true) {
  925. dates.sort();
  926. }
  927. else if (typeof options.sort === "string") {
  928. if (options.sort.toLowerCase() === "asc") {
  929. dates.sort();
  930. }
  931. else if (options.sort.toLowerCase() === "desc"){
  932. dates.sort();
  933. dates.reverse();
  934. }
  935. }
  936. }
  937. // Options - Data type
  938. if (options.type && typeof options.type === "string") {
  939. var i;
  940. // Convert to date object
  941. if (options.type.toLowerCase() === "date"){
  942. for (i = dates.length - 1; i >= 0; i--) {
  943. dates[i] = new Date(dates[i]);
  944. }
  945. }
  946. // If not a timestamp - convert to custom format
  947. else if (options.type.toLowerCase() !== "timestamp") {
  948. for (i = dates.length - 1; i >= 0; i--) {
  949. dates[i] = this._parseToDateString(new Date(dates[i]), options.type);
  950. }
  951. }
  952. }
  953. // Return dates
  954. return dates;
  955. };
  956. // Check if date is selected
  957. JsCalendar.prototype.isSelected = function(date){
  958. // If no arguments or null
  959. if (typeof date === "undefined" || date === null) {
  960. // Return
  961. return false;
  962. }
  963. // Parse date
  964. date = this._parseDate(date);
  965. date.setHours(0, 0, 0, 0);
  966. date = date.getTime();
  967. // If selected
  968. if (this._selected.indexOf(date) >= 0) {
  969. return true;
  970. }
  971. // If not selected
  972. else {
  973. return false;
  974. }
  975. };
  976. // Check if date is visible in calendar
  977. JsCalendar.prototype.isVisible = function(date){
  978. // If no arguments or null
  979. if (typeof date === "undefined" || date === null) {
  980. // Return
  981. return false;
  982. }
  983. // Parse date
  984. date = this._parseDate(date);
  985. date.setHours(0, 0, 0, 0);
  986. date = date.getTime();
  987. // Get visible dates
  988. var visible = this._getVisibleDates();
  989. // Check if date is inside visible dates
  990. if (visible[0].getTime() <= date && visible[visible.length - 1].getTime() >= date) {
  991. return true;
  992. }
  993. // Not visible
  994. else {
  995. return false;
  996. }
  997. };
  998. // Check if date is in active month
  999. JsCalendar.prototype.isInMonth = function(date){
  1000. // If no arguments or null
  1001. if (typeof date === "undefined" || date === null) {
  1002. // Return
  1003. return false;
  1004. }
  1005. // Parse date and get month
  1006. var month = this._parseDate(date);
  1007. month.setHours(0, 0, 0, 0);
  1008. month.setDate(1);
  1009. // Parse active month date
  1010. var active = this._parseDate(this._date);
  1011. active.setHours(0, 0, 0, 0);
  1012. active.setDate(1);
  1013. // If same month
  1014. if (month.getTime() === active.getTime()) {
  1015. return true;
  1016. }
  1017. // Other month
  1018. else {
  1019. return false;
  1020. }
  1021. };
  1022. // Set language
  1023. JsCalendar.prototype.setLanguage = function(code) {
  1024. // Check if language exist
  1025. if (typeof code !== "string"){
  1026. // Throw an error
  1027. throw new Error("jsCalendar: Invalid language code.");
  1028. }
  1029. if (typeof this.languages[code] === "undefined"){
  1030. // Throw an error
  1031. throw new Error("jsCalendar: Language not found.");
  1032. }
  1033. // Change language
  1034. this._options.language = code;
  1035. // Set new language as active
  1036. this.language.months = this.languages[this._options.language].months;
  1037. this.language.days = this.languages[this._options.language].days;
  1038. // Refresh calendar
  1039. this.refresh();
  1040. // Return
  1041. return this;
  1042. };
  1043. // Static foo methods (well... not really static)
  1044. // Auto init calendars
  1045. JsCalendar.autoFind = function(){
  1046. // Get all auto-calendars
  1047. var calendars = document.getElementsByClassName("auto-jsCalendar");
  1048. // Temp options variable
  1049. var options;
  1050. // For each auto-calendar
  1051. for (var i = 0; i < calendars.length; i++) {
  1052. // If not loaded
  1053. if(calendars[i].getAttribute("jsCalendar-loaded") !== "true") {
  1054. // Set as loaded
  1055. calendars[i].setAttribute("jsCalendar-loaded", "true");
  1056. // Init options
  1057. options = {};
  1058. // Add options
  1059. for(var j in calendars[i].dataset){
  1060. options[j] = calendars[i].dataset[j];
  1061. }
  1062. // Set target
  1063. options.target = calendars[i];
  1064. // Create
  1065. new jsCalendar(options);
  1066. }
  1067. }
  1068. };
  1069. // Tools
  1070. JsCalendar.tools = {};
  1071. // String to date
  1072. JsCalendar.tools.parseDate = function() {
  1073. return JsCalendar.prototype._parseDate.apply({}, arguments);
  1074. };
  1075. JsCalendar.tools.stringToDate = JsCalendar.tools.parseDate;
  1076. // Date to string
  1077. JsCalendar.tools.dateToString = function(date, format, lang) {
  1078. // Find lang
  1079. var languages = JsCalendar.prototype.languages;
  1080. if (!lang || !languages.hasOwnProperty(lang)) {
  1081. lang = "en";
  1082. }
  1083. // Call parser
  1084. return JsCalendar.prototype._parseToDateString.apply(
  1085. {language : languages[lang]},
  1086. [date, format]
  1087. );
  1088. };
  1089. // Get a new object
  1090. JsCalendar.new = function(){
  1091. // Create new object
  1092. var obj = new JsCalendar();
  1093. // Construct calendar
  1094. obj._construct(arguments);
  1095. // Return new object
  1096. return obj;
  1097. };
  1098. // Add a new language
  1099. JsCalendar.addLanguage = function(language){
  1100. // Check if language object is valid
  1101. if (typeof language === "undefined") {
  1102. // Throw an error
  1103. throw new Error("jsCalendar: No language object was given.");
  1104. }
  1105. // Check if valid language code
  1106. if (typeof language.code !== "string") {
  1107. // Throw an error
  1108. throw new Error("jsCalendar: Invalid language code.");
  1109. }
  1110. // Check language months
  1111. if (!(language.months instanceof Array)) {
  1112. // Throw an error
  1113. throw new Error("jsCalendar: Invalid language months.");
  1114. }
  1115. if (language.months.length !== 12) {
  1116. // Throw an error
  1117. throw new Error("jsCalendar: Invalid language months length.");
  1118. }
  1119. // Check language days
  1120. if (!(language.days instanceof Array)) {
  1121. // Throw an error
  1122. throw new Error("jsCalendar: Invalid language days.");
  1123. }
  1124. if (language.days.length !== 7) {
  1125. // Throw an error
  1126. throw new Error("jsCalendar: Invalid language days length.");
  1127. }
  1128. // Now save language
  1129. JsCalendar.prototype.languages[language.code] = {
  1130. // Save months
  1131. months : language.months.slice(),
  1132. // Save days
  1133. days : language.days.slice()
  1134. };
  1135. };
  1136. // Load any language on the load list
  1137. (function(){
  1138. // If a list exist
  1139. if (typeof window.jsCalendar_language2load !== "undefined") {
  1140. // While list not empty
  1141. while (window.jsCalendar_language2load.length) {
  1142. // Make it asynchronous
  1143. setTimeout((function (language) {
  1144. // Return timeout callback
  1145. return function() {
  1146. JsCalendar.addLanguage(language);
  1147. };
  1148. })(window.jsCalendar_language2load.pop()), 0);
  1149. }
  1150. // Clean up useless list
  1151. delete window.jsCalendar_language2load;
  1152. }
  1153. })();
  1154. // Return
  1155. return JsCalendar;
  1156. })();
  1157. // I love anonymous functions
  1158. (function(){
  1159. // Init auto calendars
  1160. // After the page loads
  1161. window.addEventListener("load", function() {
  1162. // Get calendars
  1163. jsCalendar.autoFind();
  1164. }, false);
  1165. })();