Calendar and Ordered Days List

Developer
Size
8,287 Kb
Views
6,072

How do I make an calendar and ordered days list?

Example of building of custom clandars with TheTime.js framework. TheTime.js - Date object wrapper for Node.js and Browser JS. TheTime.js Makes work with JS Date object easier and more humane. . What is a calendar and ordered days list? How do you make a calendar and ordered days list? This script and codes were developed by Ilya N. Zykin on 31 January 2023, Tuesday.

Calendar and Ordered Days List Previews

Calendar and Ordered Days List - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calendar and Ordered Days List</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='calendar_modern' id='calendar'></div> <div class='time_list'> <p><a href='https://gist.github.com/3685613'>https://gist.github.com/3685613</a></p> <p> <b>Click on day for select.</b> </p> <p> <b>Second click for unselect.</b> </p> <p>List of selected days:</p> <ul></ul> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Calendar and Ordered Days List - Script Codes CSS Codes

div{padding:0;margin:0;font-size: 10px;}
body { background: #eff0eb;
}
.calendar_modern { padding: 50px;
}
.calendar_modern .calendar { margin: auto; width: 240px; height: 290px;
}
.calendar_modern .calendar .nav { height: 0; position: relative;
}
.calendar_modern .calendar .nav i, .calendar_modern .calendar .nav b { display: block; font-style: normal; position: absolute; cursor: pointer; width: 30px; height: 30px; z-index: 100; top: 0;
}
.calendar_modern .calendar .nav i { left: 0; border-right: 1px solid #423a37; /*background: url(/images/modern/lft.png) no-repeat center center #372F2C;*/ background: url(http://cs4399.userapi.com/u49225742/docs/58f03726ea27/lft.png) no-repeat center center #372f2c;
}
.calendar_modern .calendar .nav b { right: 0; border-left: 1px solid #423a37; /*background: url(/images/modern/rgt.png) no-repeat center center #372F2C;*/ background: url(http://cs4399.userapi.com/u49225742/docs/5fd2e9dd3a9f/rgt.png) no-repeat center center #372f2c;
}
.calendar_modern .calendar .viewport { overflow: hidden; zoom: 1; height: 260px; width: 240px; position: relative;
}
.calendar_modern .calendar .months { white-space: nowrap; word-spacing: -2px; letter-spacing: -2px; position: absolute; height: 260px;
}
.calendar_modern .calendar .month { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; vertical-align: top; letter-spacing: normal; word-spacing: normal; width: 240px; height: 260px;
}
.calendar_modern .calendar .month .header { height: 30px; position: relative; font-family: Arial, Helvetica, sans-serif; color: white; line-height: 30px; font-weight: bold; font-size: 1.4em; text-align: center; background: #372f2c;
}
.calendar_modern .calendar .month .body { background: #e4e4e4;
}
.calendar_modern .calendar .month .body .day_names { height: 25px;
}
.calendar_modern .calendar .month .body .day_names i { font-family: Arial, Helvetica, sans-serif; display: block; height: 25px; line-height: 25px; text-align: center; font-style: normal; float: left; width: 34px;
}
.calendar_modern .calendar .month .body .days i, .calendar_modern .calendar .month .body .days b, .calendar_modern .calendar .month .body .days s, .calendar_modern .calendar .month .body .days a { font-family: Arial, Helvetica, sans-serif; display: block; float: left; width: 33px; height: 33px; color: #8d8d8d; font-size: 1.5em; font-weight: bold; line-height: 34px; text-align: center; font-style: normal; background: #e4e4e4; text-decoration: none; /* table like borders */ border-right: 1px solid #aaaaaa; border-bottom: 1px solid #aaaaaa; /* table like borders */
}
.calendar_modern .calendar .month .body .days i.weekend, .calendar_modern .calendar .month .body .days b.weekend, .calendar_modern .calendar .month .body .days s.weekend, .calendar_modern .calendar .month .body .days a.weekend { color: #444; background: #FDD;
}
.calendar_modern .calendar .month .body .days i:nth-child(7n + 1), .calendar_modern .calendar .month .body .days b:nth-child(7n + 1), .calendar_modern .calendar .month .body .days s:nth-child(7n + 1), .calendar_modern .calendar .month .body .days a:nth-child(7n + 1) { border-left: 1px solid #aaaaaa;
}
.calendar_modern .calendar .month .body .days i:nth-child(n+1):nth-child(-n+7), .calendar_modern .calendar .month .body .days b:nth-child(n+1):nth-child(-n+7), .calendar_modern .calendar .month .body .days s:nth-child(n+1):nth-child(-n+7), .calendar_modern .calendar .month .body .days a:nth-child(n+1):nth-child(-n+7) { border-top: 1px solid #aaaaaa;
}
.calendar_modern .calendar .month .body .days i:nth-child(n+1):nth-child(-n+7).empty, .calendar_modern .calendar .month .body .days b:nth-child(n+1):nth-child(-n+7).empty, .calendar_modern .calendar .month .body .days s:nth-child(n+1):nth-child(-n+7).empty, .calendar_modern .calendar .month .body .days a:nth-child(n+1):nth-child(-n+7).empty { border-top: 1px solid #d5d5d5; border-bottom: 1px solid #aaaaaa;
}
.calendar_modern .calendar .month .body .days s:nth-child(7n + 1) { border-left: 1px solid #d5d5d5;
}
.calendar_modern .calendar .month .body .days a { color: #372f2d; background: #d1d1d1; text-shadow: 1px 1px 0px white; background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #dadada), color-stop(100%, #cfcfcf)); background-image: -webkit-linear-gradient(bottom, #dadada, #cfcfcf); background-image: -moz-linear-gradient(bottom, #dadada, #cfcfcf); background-image: -o-linear-gradient(bottom, #dadada, #cfcfcf); background-image: linear-gradient(bottom, #dadada, #cfcfcf);
}
.calendar_modern .calendar .month .body .days a.today { color: white; text-shadow: 1px 1px 2px teal; -webkit-box-shadow: 0 0 18px teal inset; -moz-box-shadow: 0 0 18px teal inset; box-shadow: 0 0 18px teal inset;
}
.calendar_modern .calendar .month .body .days a.selected { color: white; text-shadow: 1px 1px 2px blue; -webkit-box-shadow: 0 0 18px #000066 inset; -moz-box-shadow: 0 0 18px #000066 inset; box-shadow: 0 0 18px #000066 inset;
}
.calendar_modern .calendar .month .body .days a:hover { color: white; -webkit-transition-property: text-shadow; -moz-transition-property: text-shadow; -o-transition-property: text-shadow; transition-property: text-shadow; -webkit-transition-property: box-shadow; -moz-transition-property: box-shadow; -o-transition-property: box-shadow; transition-property: box-shadow; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; text-shadow: 1px 1px 2px green; -webkit-box-shadow: 0 0 18px #006600 inset; -moz-box-shadow: 0 0 18px #006600 inset; box-shadow: 0 0 18px #006600 inset;
}
.calendar_modern .calendar .month .body .days b, .calendar_modern .calendar .month .body .days i, .calendar_modern .calendar .month .body .days s { color: #ccc;
}
.calendar_modern .calendar .month .body .days b, .calendar_modern .calendar .month .body .days s { background: #eee; border-color: #d5d5d5;
}
.calendar_modern .calendar .month .body .days b { border-top: 1px solid #d5d5d5 !important; border-bottom: 1px solid #aaaaaa !important;
}
.calendar_modern .calendar .month .body .days b:first-child { border-left: 1px solid #d5d5d5 !important;
}
.calendar_modern .calendar .month .body .days b:last-of-type { border-right: 1px solid #aaaaaa !important;
}
.time_list { position: absolute; top: 30px; left: 30px; border: 1px solid gray; padding: 20px;
}
.time_list li, .time_list ul{ padding: 0; margin: 0;
}

Calendar and Ordered Days List - Script Codes JS Codes

(function() { var DefaultMomentLocale, scope; DefaultMomentLocale = { locale_name: 'en', locale: { 'month': { 'name': [null, 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 'gen': [null, 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 'abbr': [null, 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 'abbr2': [null, 'Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.'] }, 'day': { 'name': [null, 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], 'abbr': [null, 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], 'part': { 'night': 'night', 'morning': 'morning', 'day': 'day', 'evening': 'evening' } } } }; scope = typeof window === 'object' ? window : global; scope.DefaultMomentLocale = DefaultMomentLocale;
}).call(this);
(function() { var Moment, scope, _this = this; Date.prototype.to_m = function() { return new Moment(_this); }; Object._size = function(obj) { var key, size; size = 0; for (key in obj) { if (obj.hasOwnProperty(key)) { size++; } } return size; }; Moment = (function() { Moment.o_mori = "Respice post te! Hominem te memento! (Look behind you! Remember that you are but a man!)"; Moment.to_leading_zero = function(int, sign) { var num, t, _sign; if (sign == null) { sign = false; } num = Math.abs(int); _sign = int < 0 ? '-' : ''; _sign = sign ? _sign : ''; t = Math.abs(int) < 10 ? "" + _sign + "0" + num : "" + _sign + num; return t; }; Moment.prototype.locales = {}; Moment.prototype.locale_name = null; Moment.prototype.current_locale = null; Moment["new"] = function(data) { return new Moment(data); }; Moment.add_locale = function(name, locale) { Moment.prototype.locales[name] = locale; return Moment.prototype.locale_name = name; }; Moment.set_default_locale = function(name) { Moment.prototype.locale_name = name; return Moment.prototype.current_locale = Moment.prototype.locales[name]; }; Moment.want = function(M) { M = M instanceof Moment ? M : new Moment(M); return M; }; Moment.prototype.set_locale = function(name) { this.locale_name = name; this.current_locale = this.locales[name]; return this.t = this.current_locale; }; function Moment(date) { var l, n, _ref; this.scope = typeof window === 'object' ? window : global; if (Object._size(this.locales) === 0) { _ref = [DefaultMomentLocale.locale_name, DefaultMomentLocale.locale], n = _ref[0], l = _ref[1]; Moment.add_locale(n, l); Moment.set_default_locale(n); } this.t = this.current_locale; this.parse(date); } Moment.prototype.day_name = function() { return this.t.day.name[this.day_of_week()]; }; Moment.prototype.month_name = function() { return this.t.month.name[this.month]; }; Moment.prototype.to_i = function() { return this.unix; }; Moment.prototype.to_a = function() { return [this.year, this.month, this.day, this.hours, this.mins, this.secs, this.ms, this.shift]; }; Moment.prototype.to_hash = function() { return { year: this.year, month: this.month, day: this.day, hours: this.hours, mins: this.mins, secs: this.secs, ms: this.ms, shift: this.shift }; }; Moment.prototype.toMonthString = function() { return "" + this.year + "." + this.month; }; Moment.prototype.toDayString = function() { return "" + this.year + "." + this.month + "." + this.day; }; Moment.prototype.set = function(d) { return this.parse(d); }; Moment.prototype.set_year = function(y) { var d; d = this.date; d.setYear(y); return this.parse(d); }; Moment.prototype.set_month = function(m) { var d; d = this.date; d.setMonth(m - 1); return this.parse(d); }; Moment.prototype.set_day = function(_d) { var d; d = this.date; d.setDate(_d); return this.parse(d); }; Moment.prototype.set_hours = function(h) { var d; d = this.date; d.setHours(h); return this.parse(d); }; Moment.prototype.set_mins = function(m) { var d; d = this.date; d.setMinutes(m); return this.parse(d); }; Moment.prototype.set_secs = function(s) { var d; d = this.date; d.setSeconds(s); return this.parse(d); }; Moment.prototype.set_ms = function(ms) { var d; d = this.date; d.setMilliseconds(ms); return this.parse(d); }; Moment.prototype.set_unix = function(sec) { return this.parse(sec); }; Moment.prototype.set_unix_ms = function(ms) { return this.date_parse(new Date(ms)); }; Moment.prototype.set_date_by_instances = function() { var date, month; date = new Date(0); month = this.month > 0 ? this.month - 1 : this.month; date.setFullYear(this.year); date.setMonth(month); date.setDate(this.day); date.setHours(this.hours); date.setMinutes(this.mins); date.setSeconds(this.secs); date.setMilliseconds(this.ms); return this.date = date; }; Moment.prototype._year = function(date) { if (date == null) { date = new Date; } return date.getFullYear(); }; Moment.prototype._month = function(date) { if (date == null) { date = new Date; } return date.getMonth() + 1; }; Moment.prototype._day = function(date) { if (date == null) { date = new Date; } return date.getDate(); }; Moment.prototype._hours = function(date) { if (date == null) { date = new Date; } return date.getHours(); }; Moment.prototype._mins = function(date) { if (date == null) { date = new Date; } return date.getMinutes(); }; Moment.prototype._secs = function(date) { if (date == null) { date = new Date; } return date.getSeconds(); }; Moment.prototype._ms = function(date) { if (date == null) { date = new Date; } return date.getMilliseconds(); }; Moment.prototype._shift = function(date) { if (date == null) { date = new Date; } return -(date.getTimezoneOffset() / 60); }; Moment.prototype._unix_ms = function(date) { if (date == null) { date = new Date; } return date.getTime(); }; Moment.prototype.parse = function(date) { var empty; if (!date) { this.date_parse(); } if (typeof date === 'string') { empty = date === ''; if (empty) { this.date_parse(); } if (!empty) { this.string_parse(date); } } if (typeof date === 'number') { this.number_parse(date * 1000); } if (typeof date === 'object') { if (date instanceof Date) { return this.date_parse(date); } if (date instanceof Array) { return this.array_parse(date); } if (date instanceof Object) { return this.hash_parse(date); } if (date instanceof Moment) { return new Moment(date.to_a()); } } return this; }; Moment.prototype.date_parse = function(date) { if (date == null) { date = new Date; } this.date = date; this.year = this._year(this.date); this.month = this._month(this.date); this.day = this._day(this.date); this.hours = this._hours(this.date); this.mins = this._mins(this.date); this.secs = this._secs(this.date); this.ms = this._ms(this.date); this.shift = this._shift(this.date); this.unix_ms = this._unix_ms(this.date); this.unix = Math.round(this.unix_ms / 1000); return this; }; Moment.prototype.array_parse = function(date) { var _date; if (date.length === 0) { return this.date_parse(); } _date = new Date(0); this.year = date[0] ? date[0] : this._year(_date); this.month = date[1] ? date[1] : 1; this.day = date[2] ? date[2] : 1; this.hours = date[3] ? date[3] : 0; this.mins = date[4] ? date[4] : 0; this.secs = date[5] ? date[5] : 0; this.ms = date[6] ? date[6] : 0; this.shift = date[7] ? date[7] : this._shift(_date); this.set_date_by_instances(); return this.date_parse(this.date); }; Moment.prototype.hash_parse = function(date) { var empty_hash, _date; empty_hash = !date['year'] && !date['month'] && !date['day'] && !date['hours'] && !date['mins'] && !date['secs'] && !date['ms']; if (empty_hash) { return this.date_parse(); } _date = new Date(0); this.year = date['year'] ? date['year'] : this._year(_date); this.month = date['month'] ? date['month'] : 1; this.day = date['day'] ? date['day'] : 1; this.hours = date['hours'] ? date['hours'] : 0; this.mins = date['mins'] ? date['mins'] : 0; this.secs = date['secs'] ? date['secs'] : 0; this.ms = date['ms'] ? date['ms'] : 0; this.shift = date['shift'] ? date['shift'] : this._shift(_date); this.set_date_by_instances(); return this.date_parse(this.date); }; Moment.prototype.string_parse = function(date) { var _date; if (date.match('-') && date.match(':') && !date.match('T')) { date = date.replace(/-/g, '/'); } if (date.match('\\.') && !date.match(':')) { return this.array_parse(date.split('.')); } _date = new Date(Date.parse(date)); return this.date_parse(_date); }; Moment.prototype.number_parse = function(date) { var _date; _date = new Date(date); return this.date_parse(_date); }; return Moment; })(); scope = typeof window === 'object' ? window : global; scope.Moment = Moment; scope.to_lz = Moment.to_leading_zero; Moment.add_locale(DefaultMomentLocale.locale_name, DefaultMomentLocale.locale); Moment.set_default_locale('en');
}).call(this);
(function() { Moment.prototype.max_days = 42; Moment.prototype.shift_months = function(n) { var shift; shift = this.month + n; shift = shift <= 0 ? shift - 1 : shift; return new Moment([this.year, shift]); }; Moment.today = function(M2) { var M1; M1 = new Moment; return M1.today(M2); }; Moment.prototype.today = function(M2) { var M1; M1 = this; M2 = Moment.want(M2); return M1.year === M2.year && M1.month === M2.month && M1.day === M2.day; }; Moment.prototype.month_length = function(year, month) { if (year == null) { year = this.year; } if (month == null) { month = this.month; } return new Date(year, month, 0).getDate(); }; Moment.prototype.prev_month_length = function() { return new Date(this.year, this.month - 1, 0).getDate(); }; Moment.prototype.next_month_length = function() { return new Date(this.year, this.month + 1, 0).getDate(); }; Moment.prototype.day_of_week = function(date) { var day; if (date == null) { date = this.date; } day = date.getDay(); day = day === 0 ? 7 : day; return day; }; Moment.prototype.first_day_of_month = function() { var day; day = new Date(this.year, this.month - 1, 1).getDay(); day = day === 0 ? 7 : day; return day; }; Moment.prototype.last_day_of_month = function() { var day, length; length = this.month_length(this.year, this.month); day = new Date(this.year, this.month - 1, length).getDay(); day = day === 0 ? 7 : day; return day; }; Moment.prototype.days_before_month = function() { return this.first_day_of_month() - 1; }; Moment.prototype.days_after_month = function() { return this.max_days - (this.days_before_month() + this.month_length()); };
}).call(this);
(function() { Moment.prototype.part_of_day = function() { var part; return part = this.is_night() ? this.t.day.part.night : this.is_morning() ? this.t.day.part.morning : this.is_day() ? this.t.day.part.day : this.t.day.part.evening; }; Moment.prototype.is_night = function() { return this.hours < 6; }; Moment.prototype.is_morning = function() { return this.hours >= 6 && this.hours < 12; }; Moment.prototype.is_day = function() { return this.hours >= 12 && this.hours < 18; }; Moment.prototype.is_evening = function() { return this.hours >= 18; }; Moment.prototype.is_weekend = function() { var day; day = this.day_of_week(); return day === 6 || day === 7; }; Moment.prototype.is_monday = function() { return this.day_of_week() === 1; }; Moment.prototype.is_tuesday = function() { return this.day_of_week() === 2; }; Moment.prototype.is_wednesday = function() { return this.day_of_week() === 3; }; Moment.prototype.is_thursday = function() { return this.day_of_week() === 4; }; Moment.prototype.is_friday = function() { return this.day_of_week() === 5; }; Moment.prototype.is_saturday = function() { return this.day_of_week() === 6; }; Moment.prototype.is_sunday = function() { return this.day_of_week() === 7; }; Moment.prototype.is_mon = function() { return this.is_monday(); }; Moment.prototype.is_tue = function() { return this.is_tuesday(); }; Moment.prototype.is_wed = function() { return this.is_wednesday(); }; Moment.prototype.is_thu = function() { return this.is_thursday(); }; Moment.prototype.is_fri = function() { return this.is_friday(); }; Moment.prototype.is_sat = function() { return this.is_saturday(); }; Moment.prototype.is_sun = function() { return this.is_sunday(); };
}).call(this);
(function() { Moment.prototype.less = function(M) { if (M == null) { M = new Date; } M = Moment.want(M); return this.unix_ms < M.unix_ms; }; Moment.prototype.less_or_equal = function(M) { if (M == null) { M = new Date; } M = Moment.want(M); return this.unix_ms <= M.unix_ms; }; Moment.prototype.equal = function(M) { if (M == null) { M = new Date; } M = Moment.want(M); return this.unix_ms === M.unix_ms; }; Moment.prototype.greater_or_equal = function(M) { if (M == null) { M = new Date; } M = Moment.want(M); return this.unix_ms >= M.unix_ms; }; Moment.prototype.greater = function(M) { if (M == null) { M = new Date; } M = Moment.want(M); return this.unix_ms > M.unix_ms; }; Moment.prototype.l = function(M) { return this.less(M); }; Moment.prototype.loe = function(M) { return this.less_or_equal(M); }; Moment.prototype.e = function(M) { return this.equal(M); }; Moment.prototype.goe = function(M) { return this.greater_or_equal(M); }; Moment.prototype.g = function(M) { return this.greater(M); };
}).call(this);
(function() { var DayBehavior; this.log = function(args) { return console.log(args); }; this.compactArray = function(array) { return array.filter(function(e) { return e; }); }; this.OrderedHash = (function() { function OrderedHash(array) { if (array == null) { array = []; } this.data = []; if (array.length > 0) { this.data = array; } } OrderedHash.prototype.get = function() { return this.data; }; OrderedHash.prototype.push = function(obj) { return this.data.push(obj); }; OrderedHash.prototype.deleteByKey = function(key) { var index, item, name, value, _ref; _ref = this.data; for (index in _ref) { item = _ref[index]; for (name in item) { value = item[name]; if (name.toString() === key.toString()) { delete this.data[index]; } } } return this.data = compactArray(this.data); }; OrderedHash.prototype.sortByKey = function(reverse) { if (reverse == null) { reverse = false; } return this.data.sort(function(a, b) { var akey, anum, bkey, bnum, key, r, value, _ref; for (key in a) { value = a[key]; akey = key; } for (key in b) { value = b[key]; bkey = key; } anum = parseInt(akey, 10); bnum = parseInt(bkey, 10); if (typeof anum === 'number' && typeof bnum === 'number') { akey = anum; bkey = bnum; } if (reverse) { _ref = [bkey, akey], akey = _ref[0], bkey = _ref[1]; } return r = akey > bkey ? 1 : akey < bkey ? -1 : 0; }); }; OrderedHash.prototype.sortByValue = function(reverse) { if (reverse == null) { reverse = false; } return this.data.sort(function(a, b) { var avalue, bvalue, key, r, value, _ref; for (key in a) { value = a[key]; avalue = value.toString().toLowerCase(); } for (key in b) { value = b[key]; bvalue = value.toString().toLowerCase(); } if (reverse) { _ref = [bvalue, avalue], avalue = _ref[0], bvalue = _ref[1]; } return r = avalue > bvalue ? 1 : avalue < bvalue ? -1 : 0; }); }; return OrderedHash; })(); this.buildTimeList = function(ordered_hash) { var M, hash, index, item, key, list, value; list = ''; ordered_hash.sortByKey(); hash = ordered_hash.get(); for (index in hash) { item = hash[index]; for (key in item) { value = item[key]; M = new Moment($(value).data('date')); list += "<li>" + M.year + " " + (M.month_name()) + " " + M.day + " </li>"; } } return $('.time_list ul').html(list); }; this.CalendarItems = (function() { function CalendarItems(calendar) { this.calendar = calendar; this.id = this.calendar.id; this.block = this.calendar.block; this.current_month = null; } return CalendarItems; })(); this.CalendarItems = (function() { function CalendarItems(calendar) { this.calendar = calendar; this.id = this.calendar.id; this.block = this.calendar.block; this.current_month = null; } CalendarItems.prototype.first_month = function() { return $("" + this.id + " .months .month").first(); }; CalendarItems.prototype.month_width = function() { return this._mwidth = this._mwidth ? this._mwidth : this.first_month().outerWidth(true); }; CalendarItems.prototype.viewport = function() { return this._viewport = this._viewport ? this._viewport : $("" + this.id + " .months .viewport"); }; CalendarItems.prototype.months = function() { return this._month = this._month ? this._month : $("" + this.id + " .months"); }; CalendarItems.prototype.left = function() { return this._left = this._left ? this._left : $("" + this.id + " .nav i"); }; CalendarItems.prototype.right = function() { return this._right = this._right ? this._right : $("" + this.id + " .nav b"); }; CalendarItems.prototype.days = function() { return $("" + this.id + " .months .month a"); }; return CalendarItems; })(); this.CalendarView = (function() { function CalendarView(calendar) { this.calendar = calendar; this.id = this.calendar.id; } CalendarView.prototype.template = function(body) { if (body == null) { body = ''; } return "<div class='calendar'>\n <div class='nav'>\n <i title='prev month' /><b title='next month' />\n </div>\n <div class='viewport'>\n <div class='months'>\n " + body + "\n </div>\n </div>\n</div>"; }; CalendarView.prototype.days_names = function() { var html, i, name, _i; html = ''; for (i = _i = 1; _i <= 7; i = ++_i) { name = this.calendar.options.locale.day.abbr[i]; html += "<i>" + name + "</i>"; } return html; }; CalendarView.prototype.days = function(M) { var current_day, days, empty_after, empty_before, i, month_length, mstart, n, prev_length, stamp, today, weekend, _i, _j, _k, _ref; days = ''; today = new Moment; empty_before = M.days_before_month(); prev_length = M.prev_month_length(); mstart = prev_length - empty_before; if (empty_before > 0) { for (i = _i = 0, _ref = empty_before - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) { n = mstart + i; days += "<b>" + n + "</b>"; } } month_length = M.month_length(); for (i = _j = 1; 1 <= month_length ? _j <= month_length : _j >= month_length; i = 1 <= month_length ? ++_j : --_j) { current_day = new Moment([M.year, M.month, i]); weekend = current_day.is_weekend() ? " class='weekend' " : ''; stamp = "data-date='" + (current_day.toDayString()) + "'"; if (current_day.today()) { days += "<a href='#' class='today' " + stamp + ">" + i + "</a>"; } else if (current_day.less(today)) { days += "<i " + stamp + ">" + i + "</i>"; } else { days += "<a href='#' " + weekend + " " + stamp + ">" + i + "</a>"; } } empty_after = M.days_after_month(); for (i = _k = 1; 1 <= empty_after ? _k <= empty_after : _k >= empty_after; i = 1 <= empty_after ? ++_k : --_k) { days += "<s>" + i + "</s>"; } return days; }; CalendarView.prototype.month = function(M) { return "<div class='month' data-date='" + (M.toMonthString()) + "'>\n <div class='header'>\n " + (M.month_name()) + "\n " + M.year + "\n </div>\n <div class='body'>\n <div class='day_names'>" + (this.days_names()) + "</div>\n <div class='days'>" + (this.days(M)) + "</div>\n </div>\n</div>"; }; return CalendarView; })(); this.Calendar = (function() { function Calendar(id, opts) { var M, i, month, _i, _ref; this.id = id != null ? id : '#calendar'; if (opts == null) { opts = {}; } this.options = { mcount: 2, date: Moment["new"](), locale: DefaultMomentLocale.locale }; $.extend(this.options, opts); this.block = $(this.id); this.init_moment = new Moment; this.items = new CalendarItems(this); this.view = new CalendarView(this); this.block.append(this.view.template()); M = Moment["new"](this.options.date); for (i = _i = 0, _ref = this.options.mcount - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) { month = M.shift_months(i); this.items.months().append(this.view.month(month)); } this.items.current_month = this.items.first_month(); } return Calendar; })(); this.CalendarBehavior = (function() { function CalendarBehavior(calendar) { var month_width, _this = this; this.calendar = calendar; this.items = this.calendar.items; this.view = this.calendar.view; this.animation_in_progress = false; this.animation_speed = 400; month_width = this.items.month_width(); this.items.left().click(function() { var M, prev_month; if (_this.animation_in_progress) { return false; } prev_month = _this.items.current_month.prev().length > 0; if (!prev_month) { M = new Moment(_this.items.current_month.attr('data-date')); M = M.shift_months(-1); _this.items.months().prepend(_this.view.month(M)); _this.items.months().css({ left: -month_width }); } _this.animation_in_progress = true; _this.items.months().animate({ left: "+=" + month_width }, _this.animation_speed, function() { return _this.animation_in_progress = false; }); return _this.items.current_month = _this.items.current_month.prev(); }); this.items.right().click(function() { var M, next_month; if (_this.animation_in_progress) { return false; } next_month = _this.items.current_month.next().length > 0; if (!next_month) { M = new Moment(_this.items.current_month.attr('data-date')); M = M.shift_months(1); _this.items.months().append(_this.view.month(M)); } _this.animation_in_progress = true; _this.items.months().animate({ left: "-=" + month_width }, _this.animation_speed, function() { return _this.animation_in_progress = false; }); return _this.items.current_month = _this.items.current_month.next(); }); } return CalendarBehavior; })(); DayBehavior = (function() { function DayBehavior(calendar) { var _this = this; this.calendar = calendar; this.items = this.calendar.items; this.view = this.calendar.view; this.hash = new OrderedHash; this.items.days().live('click', function(event) { var M, day, obj; day = $(event.target); M = new Moment(day.data('date')); if (!day.hasClass('selected')) { obj = {}; obj[M.unix] = day[0]; _this.hash.push(obj); } else { _this.hash.deleteByKey(M.unix); } day.toggleClass('selected'); buildTimeList(_this.hash); return false; }); } return DayBehavior; })(); $(function() { this.calendar = new Calendar('#calendar', { mcount: 3, date: new Moment }); new CalendarBehavior(this.calendar); return new DayBehavior(this.calendar); });
}).call(this);
Calendar and Ordered Days List - Script Codes
Calendar and Ordered Days List - Script Codes
Home Page Home
Developer Ilya N. Zykin
Username the-teacher
Uploaded January 31, 2023
Rating 3
Size 8,287 Kb
Views 6,072
Do you need developer help for Calendar and Ordered Days List?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ilya N. Zykin (the-teacher) Script Codes
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!