@craftkit/craft-widget-calendar/dist/craft-widget-calendar.min.js

Fully customizable JavaScript calendar widget for Craftkit

window.Calendar=function(t){var e={};function n(i){if(e[i])return e[i].exports;var s=e[i]={i:i,l:!1,exports:{}};return t[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)n.d(i,s,function(e){return t[e]}.bind(null,s));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e){t.exports=window.Craft},function(t,e,n){"use strict";const i=n(2);window.Craft.usePackage(i.default),t.exports=i.default||i},function(t,e,n){"use strict";n.r(e);var i=n(0);class s extends i.UI.View{constructor(t){super(),this.packagename="Craft.Widget.Calendar.Day",this.delegate=t.delegate,this.styleSheet=t.StyleSheet,Number(t.yyyy)?this.yyyy=("0000"+t.yyyy).slice(-4):this.yyyy=moment().format("YYYY"),Number(t.mm)?this.mm=("00"+t.mm).slice(-2):this.mm=moment().format("MM"),Number(t.dd)?this.dd=("00"+t.dd).slice(-2):this.dd=moment().format("DD"),this.iso=this.yyyy+"-"+this.mm+"-"+this.dd,this.moment=moment(this.iso),this.UserData={},this.classes=t.classes||[]}click(){this.delegate.handleSelectCalendarDay(this)}style(t){return this.styleSheet.day}template(t){return`\n\t\t\t<div class="root ${this.classes.join(" ")}" onclick="Craft.Core.ComponentStack.get('${t}').click();">\n\t\t\t\t${Number(this.dd)}\n\t\t\t</div>\n\t\t`}}class h extends i.UI.View{constructor(t){super(),this.packagename="Craft.Widget.Calendar.Month",this.delegate=t.delegate,this.dayClass=t.Day,this.styleSheet=t.StyleSheet,Number(t.yyyy)?this.yyyy=("0000"+t.yyyy).slice(-4):this.yyyy=moment().format("YYYY"),Number(t.mm)?this.mm=("00"+t.mm).slice(-2):this.mm=moment().format("MM"),this.dd="01",this.iso=this.yyyy+"-"+this.mm,this.prev_days=[],this.this_days=[],this.next_days=[],this.days=[],this.index={},this.this_month="",this.prev_month="",this.next_month="",this.today=moment(),this.build()}build(){this.this_month=new moment(this.iso+"-"+this.dd),this.prev_month=this.this_month.clone().subtract(1,"month"),this.next_month=this.this_month.clone().add(1,"month");let t=this.prev_month.endOf("month").date(),e=6===this.prev_month.endOf("month").day()?0:this.prev_month.endOf("month").day()+1,n=this.prev_month.format("MM"),i=this.prev_month.format("YYYY"),s=0;for(let h=e;h>=1;h--){let e=s%7,a=new this.dayClass({delegate:this.delegate,yyyy:i,mm:n,dd:t-h+1,classes:["weekday"+e,"prev_month"],StyleSheet:this.styleSheet});a.loadView(),this.prev_days.push(a),this.days.push(a),this.index[a.iso]=a,s++}let h=this.this_month.year(),a=this.this_month.month()+1,o=this.this_month.weekday(),d=this.today.format("YYYY-MM-DD");for(let t=0;t<this.this_month.daysInMonth();t++){let e=o%7,n=new this.dayClass({delegate:this.delegate,yyyy:h,mm:a,dd:t+1,classes:["weekday"+e,"this_month"],StyleSheet:this.styleSheet});n.iso==d&&n.classes.push("today"),n.loadView(),this.this_days.push(n),this.days.push(n),this.index[n.iso]=n,o++}let r=this.next_month.month()+1,y=this.next_month.year(),l=42-(e+this.this_month.endOf("month").date());for(let t=0;t<l;t++){let e=o%7,n=new this.dayClass({delegate:this.delegate,yyyy:y,mm:r,dd:t+1,classes:["weekday"+e,"next_month"],StyleSheet:this.styleSheet});n.loadView(),this.next_days.push(n),this.days.push(n),this.index[n.iso]=n,o++}}viewDidLoad(t){this.days.map(t=>this.appendView(t))}style(t){return this.styleSheet.month}template(t){return'<div class="root"></div>'}}var a={calendar:"\n\t\t* { box-sizing:border-box; margin:0; padding:0; }\n\t\t:host {}\n\t\t.root {\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tbackground-color: #fff;\n\t\t}\n\t\t.header { width:100%; margin-left:auto; margin-right:auto; }\n\t\t.month { width:100%; margin-left:auto; margin-right:auto; }\n\t\t.navi { width:100%; margin-left:auto; margin-right:auto; display:flex; }\n\t\t.prev { width:100%; cursor:pointer; text-align:right;  }\n\t\t.next { width:100%; cursor:pointer; margin-left:auto; text-align:left; }\n\t",header:"\n\t\t.root {}\n\t",month:"\n\t\t* { box-sizing:border-box; margin:0; padding:0; }\n\t\t:host {\n\t\t\twidth: 100%;\n\t\t}\n\t\t.root {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tflex-wrap: wrap;\n\t\t}\n\t",day:"\n\t\t* { box-sizing:border-box; margin:0; padding:0; }\n\t\t:host {\n\t\t\twidth: 14.28%;\n\t\t}\n\t\t.root {\n\t\t\ttext-align: center;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.root:hover {\n\t\t\tbackground-color: yellowgreen;\n\t\t}\n\t\t\n\t\t/* weekday(sunday-saturday) should be applied at first */\n\t\t\n\t\t/* sunday */\n\t\t.weekday0 {\n\t\t\tcolor: #f00;\n\t\t}\n\t\t/* monday */\n\t\t.weekday1 {\n\t\t\tcolor: #555;\n\t\t}\n\t\t/* tuesday */\n\t\t.weekday2 {\n\t\t\tcolor: #555;\n\t\t}\n\t\t/* wednesday */\n\t\t.weekday3 {\n\t\t\tcolor: #555;\n\t\t}\n\t\t/* thursday */\n\t\t.weekday4 {\n\t\t\tcolor: #555;\n\t\t}\n\t\t/* friday */\n\t\t.weekday5 {\n\t\t\tcolor: #555;\n\t\t}\n\t\t/* saturday */\n\t\t.weekday6 {\n\t\t\tcolor: #00f;\n\t\t}\n\t\t\n\t\t/* whether day is in this month or not */\n\t\t.prev_month {\n\t\t\tpointer-events: none;\n\t\t\topacity: 0.5;\n\t\t}\n\t\t.this_month {\n\t\t\tpointer-events: all;\n\t\t}\n\t\t.next_month {\n\t\t\tpointer-events: none;\n\t\t\topacity: 0.5;\n\t\t}\n\t\t\n\t\t/* mark today */\n\t\t.today {\n\t\t\tcolor: #0f0;\n\t\t}\n\t"};class o extends i.UI.View{constructor(t){super(),this.packagename="Craft.Widget.Calendar.View",t||(t={}),this.delegate=t.delegate,this.dayClass=t.Day||s,this.styleSheet=t.StyleSheet||a,Number(t.yyyy)?this.yyyy=("0000"+String(t.yyyy)).slice(-4):this.yyyy=moment().format("YYYY"),Number(t.mm)?this.mm=("00"+String(t.mm)).slice(-2):this.mm=moment().format("MM"),this.index={};let e=new h({delegate:this.delegate,yyyy:this.yyyy,mm:this.mm,Day:this.dayClass,StyleSheet:this.styleSheet});this.month=e,this.index[this.yyyy+"-"+this.mm]=this.month}viewDidLoad(t){this.delegate.handleSelectCalendarMonth(this.index[this.yyyy+"-"+this.mm]),this.appendView({target:this.shadow.getElementById("month"),component:this.index[this.yyyy+"-"+this.mm]}),this.updateHeader(),t&&t()}prev(){let t=this.month.prev_month,e="",n=t.format("YYYY"),i=t.format("MM"),s=n+"-"+i;this.index[s]?e=this.index[s]:(e=new h({delegate:this.delegate,yyyy:n,mm:i,Day:this.dayClass,StyleSheet:this.styleSheet}),this.index[s]=e),this.removeSubView(this.month),this.delegate.handleSelectCalendarMonth(e),this.month=e,this.appendView({target:this.shadow.getElementById("month"),component:this.month}),this.updateHeader()}next(){let t=this.month.next_month,e="",n=t.format("YYYY"),i=t.format("MM"),s=n+"-"+i;this.index[s]?e=this.index[s]:(e=new h({delegate:this.delegate,yyyy:n,mm:i,Day:this.dayClass,StyleSheet:this.styleSheet}),this.index[s]=e),this.removeSubView(this.month),this.month=e,this.appendView({target:this.shadow.getElementById("month"),component:this.month}),this.delegate.handleSelectCalendarMonth(e),this.updateHeader()}updateHeader(){this.shadow.getElementById("header").innerHTML=this.month.iso}style(t){return this.styleSheet.calendar}template(t){return`\n\t\t\t<div class="root">\n\t\t\t\t<div id="header" class="header"></div>\n\t\t\t\t<div id="month" class="month"></div>\n\t\t\t\t<div id="navi" class="navi">\n\t\t\t\t\t<div id="prev" class="prev" onclick="Craft.Core.ComponentStack.get('${t}').prev();"> ← </div>\n\t\t\t\t\t<div id="next" class="next" onclick="Craft.Core.ComponentStack.get('${t}').next();"> → </div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`}}const d={View:o,Month:h,Day:s,StyleSheet:a,inject:function(t){t.Widget=t.Widget||{},t.Widget.Calendar||(t.Widget.Calendar=d)}};e.default=d}]);