diff --git a/config/nova-calendar.php b/config/nova-calendar.php
index 362c3b7..f05777c 100644
--- a/config/nova-calendar.php
+++ b/config/nova-calendar.php
@@ -42,6 +42,22 @@
          */
         'windowTitle' => 'Nova Calendar',
 
+        /*
+          * Define if week numbers should be displayed on the Month view.
+            This key is optional.
+            If you remove it or set, week numbers will be displayed on the Month view by default.
+        */
+        'shouldShowWeekNumbers' => true,
+
+        /*
+          * Define what calendar views should be rendered and visible to the end user. 
+            Array order determines sequence of views selector on frontend.
+            This key is optional. if not set, all NovaCalendar views will be rendered.
+        */
+        'calendarViews' => [
+          'month',
+          'week'
+        ]
     ],
 
     // 'calendar2' => [
diff --git a/dist/css/tool.css b/dist/css/tool.css
index cb85d1b..b7691ed 100644
--- a/dist/css/tool.css
+++ b/dist/css/tool.css
@@ -1 +1 @@
-:root{--nc-transparent:hsla(0,0%,100%,0);--nc-highlight-bg:rgba(var(--colors-primary-500),0.02);--nc-highlight-border:rgba(var(--colors-primary-500),0.4);--nc-weekend-border:rgba(var(--colors-gray-500),0.2);--nc-weekend-bg:rgba(var(--colors-gray-900),0);--nc-event-height-multi-day:2.2em;--nc-event-border:hsla(0,0%,4%,.3);--nc-event-border-radius:7px}.nova-calendar.noselect{-webkit-touch-callout:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.noscrollbar::-webkit-scrollbar{display:none}.noscrollbar{-ms-overflow-style:none;scrollbar-width:none}#nc-control{border:0 solid #555;display:flex;height:3em;justify-content:space-between;margin-bottom:1rem;position:relative}#nc-control .center-items,#nc-control .left-items,#nc-control .right-items{align-items:center;display:flex;gap:8px;justify-content:center}#nc-control a.disabled{opacity:.2;pointer-events:none}#nc-control>a,#nc-control>h1{display:block;left:0;margin-left:auto;margin-right:auto;position:absolute;right:0;text-align:center}#nc-control h1 span{cursor:pointer;margin-left:1rem}#nc-control a.button{border:1px solid rgba(var(--colors-gray-500),.2);border-radius:6px;padding:.5rem}div.nova-calendar{width:100%}div.nova-calendar div.nc-header{display:grid;grid-template-columns:repeat(7,1fr);width:100%}div.nova-calendar div.nc-header div{font-weight:700;padding:.6em .6em .5em;text-align:left;word-break:break-all}div.nova-calendar .week{display:grid;grid-template-columns:repeat(7,1fr);width:100%}div.nova-calendar .nc-col-1{grid-column:1/2}div.nova-calendar .nc-col-2{grid-column:2/3}div.nova-calendar .nc-col-3{grid-column:3/4}div.nova-calendar .nc-col-4{grid-column:4/5}div.nova-calendar .nc-col-5{grid-column:5/6}div.nova-calendar .nc-col-6{grid-column:6/7}div.nova-calendar .nc-col-7{grid-column:7/-1}div.nova-calendar .nc-event.multi.span-1{grid-column-end:span 1}div.nova-calendar .nc-event.multi.span-2{grid-column-end:span 2}div.nova-calendar .nc-event.multi.span-3{grid-column-end:span 3}div.nova-calendar .nc-event.multi.span-4{grid-column-end:span 4}div.nova-calendar .nc-event.multi.span-5{grid-column-end:span 5}div.nova-calendar .nc-event.multi.span-6{grid-column-end:span 6}div.nova-calendar .nc-event.multi.span-7{grid-column-end:span 7}div.nova-calendar .day{border-color:rgba(var(--colors-gray-500),.15);border-width:.5px;grid-row:1/-1;min-height:9em;z-index:0}div.nova-calendar .day:not(.withinRange){background:repeating-linear-gradient(-45deg,rgba(225,225,255,.1),rgba(225,225,255,.1) 4px,hsla(0,0%,39%,.1) 0,hsla(0,0%,39%,.1) 6px);opacity:.5}div.nova-calendar .dayheader{padding:.4em;z-index:1}div.nova-calendar .day .dayheader .daylabel{font-size:9pt;opacity:.84}div.nova-calendar .day.today .dayheader .daylabel{background-color:rgba(var(--colors-primary-500),.2);border-radius:100%;font-size:10pt;font-weight:700;opacity:1;padding:.2em .5em}div.nova-calendar .dayheader .badges{float:right;max-width:80%}div.nova-calendar .dayheader span.badge{font-size:10pt;line-height:12pt;min-width:22px;opacity:.8;padding:.25em;text-align:center}div.nova-calendar .week-events{display:grid;grid-auto-flow:column dense;grid-column:1/-1;grid-row:1;grid-template-columns:repeat(7,1fr);margin-top:2.2em;z-index:2}div.nova-calendar .single-day-events{border:0 solid red;grid-row-start:span 9000;margin-bottom:1em;min-height:2px}div.nova-calendar .nc-event{align-items:center;border-bottom:1px solid var(--nc-event-border);display:grid;font-size:10pt;grid-template-columns:1fr auto;grid-template-rows:auto auto;margin:.1em;min-height:var(--nc-event-height-multi-day);opacity:.92;overflow:hidden;padding:.2em;text-align:left;transition:opacity .25s}div.nova-calendar .nc-event:not(.withinRange){opacity:.6}div.nova-calendar .nc-event:hover{opacity:1}div.nova-calendar .nc-event.starts{border-bottom-left-radius:var(--nc-event-border-radius);border-top-left-radius:var(--nc-event-border-radius)}div.nova-calendar .nc-event.ends{border-bottom-right-radius:var(--nc-event-border-radius);border-top-right-radius:var(--nc-event-border-radius)}div.nova-calendar div.nc-event.clickable{cursor:pointer}div.nova-calendar div.nc-event div.name{border:0 dashed #fff;font-weight:700;grid-column:1/2;grid-row:1/2;margin-left:.2em;margin-right:.2em;overflow:scroll;white-space:nowrap}div.nova-calendar div.nc-event:not(.starts) div.name{font-size:9pt;font-weight:400;opacity:.8;padding-top:.1em}div.nova-calendar div.nc-event div.badges{border:0 solid #0f0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;grid-column:2/-1;grid-row:1/2;text-align:right}div.nova-calendar div.nc-event div.badges span.badge-bg{background-color:rgba(50,50,64,.5);border-bottom:1px solid rgba(var(--colors-primary-500),.5);border-radius:4px;display:inline-block;margin-left:.5px;margin-right:.5px}div.nova-calendar div.nc-event div.badges span.badge{font-size:9pt;line-height:12pt;min-width:22px;opacity:1;padding:.25em;text-align:center}div.nova-calendar .nc-event div.content{border:0 dashed red;grid-column:1/span 2;grid-row:2/3;overflow:scroll;padding-left:.2em}div.nova-calendar div.nc-event span.time{display:inline-block;font-size:9pt;margin-right:.2em;opacity:.8}div.nova-calendar div.nc-event span.notes{font-size:9pt;line-height:10pt}div.nova-calendar .nc-event.multi{align-items:top;grid-template-columns:auto 1fr auto;grid-template-rows:auto;max-height:var(--nc-event-height-multi-day);overflow:hidden}div.nova-calendar .nc-event:not(.starts){border-left:1px dashed hsla(0,0%,89%,.6);opacity:.8}div.nova-calendar .nc-event:not(.ends){border-right:1px dashed hsla(0,0%,89%,.6)}div.nova-calendar div.nc-event.multi div.name{grid-column:1/2;grid-row:1/-1;overflow:scroll;white-space:nowrap}div.nova-calendar div.nc-event.multi div.badges{grid-column:3/-1;grid-row:1/-1;overflow:scroll;white-space:nowrap}div.nova-calendar div.nc-event.multi div.content{grid-column:2/3;grid-row:1/-1;overflow:scroll;white-space:nowrap}
+:root{--nc-transparent:hsla(0,0%,100%,0);--nc-highlight-bg:rgba(var(--colors-primary-500),0.02);--nc-highlight-border:rgba(var(--colors-primary-500),0.4);--nc-weekend-border:rgba(var(--colors-gray-500),0.2);--nc-weekend-bg:rgba(var(--colors-gray-900),0);--nc-event-height-multi-day:2em;--nc-event-border:hsla(0,0%,4%,.3);--nc-event-border-radius:7px}.nova-calendar.noselect{-webkit-touch-callout:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}.noscrollbar::-webkit-scrollbar{display:none}.noscrollbar{-ms-overflow-style:none;scrollbar-width:none}#nc-control{border:0 solid #555;display:flex;height:3em;justify-content:space-between;margin-bottom:1rem;position:relative}#nc-control .center-items,#nc-control .left-items,#nc-control .right-items{align-items:center;display:flex;gap:8px;justify-content:center}#nc-control a.disabled{opacity:.2;pointer-events:none}#nc-control>a,#nc-control>h1{display:block;left:0;margin-left:auto;margin-right:auto;position:absolute;right:0;text-align:center}#nc-control h1 span{cursor:pointer;margin-left:1rem}#nc-control a.button{border:1px solid rgba(var(--colors-gray-500),.2);border-radius:6px;padding:.5rem}div.nova-calendar{width:100%}div.nova-calendar div.nc-header div{font-weight:700;padding:.6em .6em .5em;text-align:left;word-break:break-all}div.nova-calendar.month-view .week,div.nova-calendar.month-view div.nc-header{display:grid;grid-template-columns:repeat(7,1fr);width:100%}div.nova-calendar.month-view .nc-col-1{grid-column:1/2}div.nova-calendar.month-view .nc-col-2{grid-column:2/3}div.nova-calendar.month-view .nc-col-3{grid-column:3/4}div.nova-calendar.month-view .nc-col-4{grid-column:4/5}div.nova-calendar.month-view .nc-col-5{grid-column:5/6}div.nova-calendar.month-view .nc-col-6{grid-column:6/7}div.nova-calendar.month-view .nc-col-7{grid-column:7/-1}div.nova-calendar.month-view .nc-event.multi.span-1{grid-column-end:span 1}div.nova-calendar.month-view .nc-event.multi.span-2{grid-column-end:span 2}div.nova-calendar.month-view .nc-event.multi.span-3{grid-column-end:span 3}div.nova-calendar.month-view .nc-event.multi.span-4{grid-column-end:span 4}div.nova-calendar.month-view .nc-event.multi.span-5{grid-column-end:span 5}div.nova-calendar.month-view .nc-event.multi.span-6{grid-column-end:span 6}div.nova-calendar.month-view .nc-event.multi.span-7{grid-column-end:span 7}div.nova-calendar.month-view .shouldShowWeekNumbers{display:grid;grid-template-columns:2em 1fr;width:100%}div.nova-calendar.month-view .weeknumber{border-color:rgba(var(--colors-gray-500),.15);border-width:.5px;grid-row:1/-1;z-index:0}div.nova-calendar.month-view .weeknumberheader{z-index:1}div.nova-calendar.month-view .weeknumberlabel{font-size:8pt;transform:rotate(270deg);transform-origin:75% 80%}div.nova-calendar.month-view .week-events{display:grid;grid-auto-flow:column dense;grid-column:1/-1;grid-row:1;grid-template-columns:repeat(7,1fr);margin-top:2.2em;z-index:2}div.nova-calendar.week-view .week{display:grid;grid-template-columns:4em repeat(7,1fr);width:100%}div.nova-calendar.week-view div.nc-header{display:grid;grid-row:1/2;grid-template-columns:4em repeat(7,1fr);width:100%}div.nova-calendar.week-view .nc-col-0{grid-column:1/2}div.nova-calendar.week-view .nc-col-1{grid-column:2/3}div.nova-calendar.week-view .nc-col-2{grid-column:3/4}div.nova-calendar.week-view .nc-col-3{grid-column:4/5}div.nova-calendar.week-view .nc-col-4{grid-column:5/6}div.nova-calendar.week-view .nc-col-5{grid-column:6/7}div.nova-calendar.week-view .nc-col-6{grid-column:7/8}div.nova-calendar.week-view .nc-col-7{grid-column:8/-1}div.nova-calendar.week-view .nc-event.multi.span-1{grid-column-end:span 1}div.nova-calendar.week-view .nc-event.multi.span-2{grid-column-end:span 2}div.nova-calendar.week-view .nc-event.multi.span-3{grid-column-end:span 3}div.nova-calendar.week-view .nc-event.multi.span-4{grid-column-end:span 4}div.nova-calendar.week-view .nc-event.multi.span-5{grid-column-end:span 5}div.nova-calendar.week-view .nc-event.multi.span-6{grid-column-end:span 6}div.nova-calendar.week-view .nc-event.multi.span-7{grid-column-end:span 7}div.nova-calendar.week-view .nc-event.multi.span-8{grid-column-end:span 8}div.nova-calendar.week-view .rotated{border-color:rgba(var(--colors-gray-500),.15);z-index:0}div.nova-calendar.week-view .rotated-header{z-index:1}div.nova-calendar.week-view .rotated-label{font-size:8pt;transform:rotate(270deg);transform-origin:75% 80%}div.nova-calendar.week-view .hour-label{border:none;font-size:.6rem;opacity:.84;padding-right:.5rem;text-align:right}div.nova-calendar.week-view .hour-label div{margin-top:-1em}div.nova-calendar.week-view .day-events-container{display:grid;grid-column:2;grid-template-rows:1fr auto}div.nova-calendar.week-view .week-events{display:grid;grid-auto-flow:column dense;grid-column:1/-1;grid-row:2;grid-template-columns:4em repeat(7,1fr);margin-top:0;min-height:6em;z-index:0}div.nova-calendar .day{border-color:rgba(var(--colors-gray-500),.15);border-width:.5px;grid-row:1/-1;min-height:9em;z-index:0}div.nova-calendar .day.multi{border-bottom:none;min-height:0}div.nova-calendar .day:not(.withinRange){background:repeating-linear-gradient(-45deg,rgba(225,225,255,.1),rgba(225,225,255,.1) 4px,hsla(0,0%,39%,.1) 0,hsla(0,0%,39%,.1) 6px);opacity:.5}div.nova-calendar .dayheader{padding:.4em;z-index:1}div.nova-calendar .day .dayheader .daylabel{font-size:9pt;opacity:.84}div.nova-calendar .today .dayheader .daylabel{background-color:rgba(var(--colors-primary-500),.2);border-radius:100%;font-size:10pt;font-weight:700;opacity:1;padding:.2em .5em}div.nova-calendar .slot{border-color:rgba(var(--colors-gray-500),.15);border-width:.5px}div.nova-calendar .slot:not(.withinRange){background:repeating-linear-gradient(-45deg,rgba(225,225,255,.1),rgba(225,225,255,.1) 4px,hsla(0,0%,39%,.1) 0,hsla(0,0%,39%,.1) 6px);opacity:.5}div.nova-calendar .day-events-container{display:grid;grid-column:2;grid-template-rows:1fr auto}div.nova-calendar .dayheader .badges{float:right;max-width:80%}div.nova-calendar .dayheader span.badge{font-size:10pt;line-height:12pt;min-width:22px;opacity:.8;padding:.25em;text-align:center}div.nova-calendar .single-day-events{border:0 solid red;grid-row-start:span 9000;margin-bottom:1em;min-height:2px}div.nova-calendar .nc-event{align-items:start;border-bottom:1px solid var(--nc-event-border);display:grid;font-size:10pt;grid-template-columns:1fr auto;grid-template-rows:max-content auto;margin:.1em;min-height:var(--nc-event-height-multi-day);opacity:.92;overflow:hidden;padding:.2em;text-align:left;transition:opacity .25s}div.nova-calendar .nc-event:not(.withinRange){opacity:.6}div.nova-calendar .nc-event:hover{opacity:1}div.nova-calendar div.nc-event.clickable{cursor:pointer}div.nova-calendar.month-view .nc-event.starts{border-bottom-left-radius:var(--nc-event-border-radius);border-top-left-radius:var(--nc-event-border-radius)}div.nova-calendar.month-view .nc-event.ends{border-bottom-right-radius:var(--nc-event-border-radius);border-top-right-radius:var(--nc-event-border-radius)}div.nova-calendar.week-view .nc-event.starts{border-top-left-radius:var(--nc-event-border-radius);border-top-right-radius:var(--nc-event-border-radius)}div.nova-calendar.week-view .nc-event.ends,div.nova-calendar.week-view .nc-event:not(.starts):not(.ends){border-bottom-left-radius:var(--nc-event-border-radius);border-bottom-right-radius:var(--nc-event-border-radius)}div.nova-calendar.week-view .nc-event:not(.starts):not(.ends){border-top-left-radius:var(--nc-event-border-radius);border-top-right-radius:var(--nc-event-border-radius)}div.nova-calendar.week-view .nc-event:not(.starts):not(.ends) div.name{font-size:9pt;font-weight:400;opacity:.8;padding-top:.1em}div.nova-calendar .nc-event div.content{align-items:start;border:0 dashed red;grid-column:1/span 2;grid-row:2/3;overflow:scroll;padding-left:.2em}div.nova-calendar div.nc-event span.time{display:inline-block;font-size:9pt;margin-right:.2em;opacity:.8}div.nova-calendar div.nc-event span.notes{font-size:9pt;line-height:10pt}div.nova-calendar div.nc-event div.name{border:0 dashed #fff;font-weight:700;grid-column:1/2;grid-row:1/2;margin-left:.2em;margin-right:.2em;overflow:scroll;white-space:nowrap}div.nova-calendar .week.events div.nc-event:not(.starts) div.name{font-size:9pt;font-weight:400;opacity:.8;padding-top:.1em}div.nova-calendar div.nc-event div.badges{border:0 solid #0f0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;grid-column:2/-1;grid-row:1/2;text-align:right}div.nova-calendar div.nc-event div.badges span.badge-bg{background-color:rgba(50,50,64,.5);border-bottom:1px solid rgba(var(--colors-primary-500),.5);border-radius:4px;display:inline-block;margin-left:.5px;margin-right:.5px}div.nova-calendar div.nc-event div.badges span.badge{font-size:9pt;line-height:12pt;min-width:22px;opacity:1;padding:.25em;text-align:center}div.nova-calendar .nc-event.multi{align-items:top;grid-template-columns:auto 1fr auto;grid-template-rows:auto;max-height:var(--nc-event-height-multi-day);overflow:hidden}div.nova-calendar div.nc-event.multi div.name{grid-column:1/2;grid-row:1/-1;overflow:scroll;white-space:nowrap}div.nova-calendar div.nc-event.multi div.badges{grid-column:3/-1;grid-row:1/-1;overflow:scroll;white-space:nowrap}div.nova-calendar div.nc-event.multi div.content{grid-column:2/3;grid-row:1/-1;overflow:scroll;white-space:nowrap}div.nova-calendar.month-view .nc-event:not(.starts){border-left:1px dashed hsla(0,0%,89%,.6);opacity:.8}div.nova-calendar.month-view .nc-event:not(.ends){border-right:1px dashed hsla(0,0%,89%,.6)}div.nova-calendar.week-view .nc-event:not(.starts){border-top:1px dashed hsla(0,0%,89%,.6)}div.nova-calendar.week-view .nc-event:not(.ends){border-bottom:1px dashed hsla(0,0%,89%,.6)}
diff --git a/dist/js/tool.js b/dist/js/tool.js
index 0e3e7cc..00dbe00 100644
--- a/dist/js/tool.js
+++ b/dist/js/tool.js
@@ -1 +1 @@
-(()=>{"use strict";var e,t={210:(e,t,n)=>{const r=Vue;var l={id:"nc-control"},o={class:"left-items"},a=[(0,r.createElementVNode)("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"2"},[(0,r.createElementVNode)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M11 19l-7-7 7-7m8 14l-7-7 7-7"})],-1)],i=[(0,r.createElementVNode)("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"2"},[(0,r.createElementVNode)("circle",{cx:"12",cy:"12",r:"2",fill:"currentColor"})],-1)],s=[(0,r.createElementVNode)("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"2"},[(0,r.createElementVNode)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M13 5l7 7-7 7M5 5l7 7-7 7"})],-1)],c=(0,r.createElementVNode)("div",{class:"center-items"},null,-1),d={class:"right-items"},u=["innerHTML"],m={ref:"theForm",class:"divide-y divide-gray-200 dark:divide-gray-800 divide-solid"},v={key:0,class:"bg-gray-100"},h=["innerHTML"],f=["innerHTML","onClick"],g={style:{width:"100%",overflow:"scroll"}},p={key:0,class:"nova-calendar noselect"},y={class:"nc-header"},k={class:"border-gray-200 dark:border-gray-900 dark:text-gray-300"},b={class:"nc-content"},w={class:"week"},E={class:"dayheader text-gray-400 noselect"},B={class:"daylabel"},N={class:"badges"},C={class:"badge-bg text-gray-200"},F=["innerHTML"],x=["innerHTML"],V={class:"week-events"},L=["onClick"],M={class:"name noscrollbar"},T={class:"badges noscrollbar"},S={class:"badge-bg text-gray-200"},K=["innerHTML"],H={class:"content noscrollbar"},O={key:0,class:"time"},D=["innerHTML"],j=["onClick"],_={class:"name noscrollbar"},A={key:0,class:"badges"},z={class:"badge-bg text-gray-200"},R=["innerHTML"],I={class:"content noscrollbar"},$={key:0,class:"time"},U={key:1,class:"time"},Z=["innerHTML"];const W={mounted:function(){var e=this;this.init(),Nova.addShortcut("alt+right",(function(t){e.nextMonth()})),Nova.addShortcut("alt+left",(function(t){e.prevMonth()})),Nova.addShortcut("alt+h",(function(t){e.reset()}))},methods:{reset:function(){this.month=null,this.year=null,this.reload()},init:function(){this.hasStoredSettings()?(this.restoreSettings(),this.reload(!1)):this.reload(!0)},prevMonth:function(){this.month-=1,this.reload()},nextMonth:function(){this.month+=1,this.reload()},reload:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=this;n.loading=!0;var r="/nova-vendor/wdelfuego/nova-calendar"+this.calendarUrl()+"/month?y="+n.year+"&m="+n.month;n.activeFilterKey?r+="&filter="+n.activeFilterKey:t&&(r+="&isInitRequest=1"),Nova.request().get(r).then((function(t){n.styles=t.data.styles,n.year=t.data.year,n.month=t.data.month,n.windowTitle=t.data.windowTitle,n.resetFiltersLabel=t.data.resetFiltersLabel,n.availableFilters=t.data.filters,n.activeFilterKey=t.data.activeFilterKey,n.title=t.data.title,n.columns=t.data.columns,n.weeks=t.data.weeks,e.setFilter(n.activeFilterKey),n.loading=!1,e.storeSettings()}))},open:function(e,t){e.metaKey||e.ctrlKey?window.open(Nova.url(t)):Nova.visit(t)},stylesForEvent:function(e){var t=this;if(e.options.styles){var n=[this.styles.default];return e.options.styles.forEach((function(e){void 0===t.styles[e]?console.log("[nova-calendar] Unknown custom style name '"+e+"'; does the eventStyles method of your CalendarDataProvider define it properly?"):n.push(t.styles[e])})),n}return this.styles.default},chooseFilter:function(e){this.setFilter(e),this.reload()},setFilter:function(e){for(var e in this.activeFilterKey=e,this.availableFilters)this.activeFilterKey==e&&(this.activeFilterLabel=this.availableFilters[e])},calendarUrl:function(){return window.location.pathname.substring(Nova.url("").length)},storageKey:function(){return"wdelfuego-nova-calendar-"+this.calendarUrl()},hasStoredSettings:function(){return null!==localStorage.getItem(this.storageKey())},storeSettings:function(){localStorage.setItem(this.storageKey(),JSON.stringify({year:this.year,month:this.month,activeFilterKey:this.activeFilterKey}))},restoreSettings:function(){var e=JSON.parse(localStorage.getItem(this.storageKey()));e&&(this.year=e.year,this.month=e.month,this.activeFilterKey=e.activeFilterKey)}},props:{},data:function(){return{loading:!0,resetFiltersLabel:"All events",availableFilters:{},activeFilterKey:null,activeFilterLabel:null,year:null,month:null,windowTitle:"",title:"",columns:Array(7).fill("-"),weeks:Array(6).fill(Array(7).fill({})),styles:{default:{color:"#fff","background-color":"rgba(var(--colors-primary-500), 0.9)"}}}}};var q=n(379),J=n.n(q),P=n(594),G={insert:"head",singleton:!1};J()(P.Z,G);P.Z.locals;const Q=(0,n(744).Z)(W,[["render",function(e,t,n,W,q,J){var P=this,G=(0,r.resolveComponent)("Head"),Q=(0,r.resolveComponent)("Icon"),X=(0,r.resolveComponent)("DropdownTrigger"),Y=(0,r.resolveComponent)("ScrollWrap"),ee=(0,r.resolveComponent)("DropdownMenu"),te=(0,r.resolveComponent)("Dropdown"),ne=(0,r.resolveComponent)("Tooltip"),re=(0,r.resolveComponent)("Card");return(0,r.openBlock)(),(0,r.createElementBlock)("div",null,[(0,r.createVNode)(G,{title:e.$data.windowTitle||e.$data.title},null,8,["title"]),(0,r.createElementVNode)("div",l,[(0,r.createElementVNode)("div",o,[(0,r.createElementVNode)("a",{onClick:t[0]||(t[0]=function(){return J.prevMonth&&J.prevMonth.apply(J,arguments)}),href:"#",class:"button hover:bg-gray-100 dark:hover:bg-gray-700",title:"Alt + ←"},a),(0,r.createElementVNode)("a",{onClick:t[1]||(t[1]=function(){return J.reset&&J.reset.apply(J,arguments)}),href:"#",class:"button hover:bg-gray-100 dark:hover:bg-gray-700",title:"Alt + H"},i),(0,r.createElementVNode)("a",{onClick:t[2]||(t[2]=function(){return J.nextMonth&&J.nextMonth.apply(J,arguments)}),href:"#",class:"button hover:bg-gray-100 dark:hover:bg-gray-700",title:"Alt + →"},s),(0,r.createElementVNode)("h1",{onClick:t[3]||(t[3]=function(){return J.reset&&J.reset.apply(J,arguments)}),class:"text-90 font-normal text-xl md:text-2xl noselect"},[(0,r.createElementVNode)("span",null,(0,r.toDisplayString)(e.$data.title),1)])]),c,(0,r.createElementVNode)("div",d,[Object.keys(q.availableFilters).length?((0,r.openBlock)(),(0,r.createBlock)(te,{key:0,"handle-internal-clicks":!0,class:(0,r.normalizeClass)([{"bg-primary-500 hover:bg-primary-600 border-primary-500":null!=q.activeFilterKey,"dark:bg-primary-500 dark:hover:bg-primary-600 dark:border-primary-500":null!=q.activeFilterKey},"flex h-9 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"]),dusk:"filter-selector"},{menu:(0,r.withCtx)((function(){return[(0,r.createVNode)(ee,{width:"260"},{default:(0,r.withCtx)((function(){return[(0,r.createVNode)(Y,{height:350,class:"bg-white dark:bg-gray-900"},{default:(0,r.withCtx)((function(){return[(0,r.createElementVNode)("div",m,[null!=q.activeFilterKey?((0,r.openBlock)(),(0,r.createElementBlock)("div",v,[(0,r.createElementVNode)("button",{class:"py-2 w-full block tracking-wide text-center text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none",onClick:t[4]||(t[4]=function(e){return J.chooseFilter(null)}),innerHTML:e.$data.resetFiltersLabel},null,8,h)])):(0,r.createCommentVNode)("",!0),(0,r.createElementVNode)("div",null,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.$data.availableFilters,(function(e,t){return(0,r.openBlock)(),(0,r.createElementBlock)("button",{class:(0,r.normalizeClass)(["py-2 w-full block dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-200",{"font-bold":q.activeFilterKey==t}]),innerHTML:e,onClick:function(e){return J.chooseFilter(t)}},null,10,f)})),256))])],512)]})),_:1})]})),_:1})]})),default:(0,r.withCtx)((function(){return[(0,r.createVNode)(X,{class:(0,r.normalizeClass)([{"text-white hover:text-white dark:text-gray-800 dark:hover:text-gray-800":null!=q.activeFilterKey},"toolbar-button px-2"])},{default:(0,r.withCtx)((function(){return[(0,r.createVNode)(Q,{type:"filter"}),null!=q.activeFilterKey?((0,r.openBlock)(),(0,r.createElementBlock)("span",{key:0,class:(0,r.normalizeClass)([{"text-white dark:text-gray-800":null!=q.activeFilterKey},"ml-2 font-bold"]),innerHTML:q.activeFilterLabel},null,10,u)):(0,r.createCommentVNode)("",!0)]})),_:1},8,["class"])]})),_:1},8,["class"])):(0,r.createCommentVNode)("",!0)])]),(0,r.createElementVNode)("div",g,[(0,r.createVNode)(re,{class:"flex flex-col items-center justify-center dark:bg-gray-800",style:{"min-height":"300px","min-width":"800px","background-color":"var(--bg-gray-800)"}},{default:(0,r.withCtx)((function(){return[q.title.length?((0,r.openBlock)(),(0,r.createElementBlock)("div",p,[(0,r.createElementVNode)("div",y,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.$data.columns,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("div",k,[(0,r.createElementVNode)("span",null,(0,r.toDisplayString)(e),1)])})),256))]),(0,r.createElementVNode)("div",b,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.$data.weeks,(function(e,t){return(0,r.openBlock)(),(0,r.createElementBlock)("div",w,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("div",{class:(0,r.normalizeClass)(["day dark:bg-gray-900 dark:border-gray-800",["nc-col-"+e.weekdayColumn],{withinRange:e.isWithinRange,today:e.isToday}])},[(0,r.createElementVNode)("div",E,[(0,r.createElementVNode)("span",B,(0,r.toDisplayString)(e.label),1),(0,r.createElementVNode)("div",N,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.badges,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("span",C,[(0,r.createVNode)(ne,null,{content:(0,r.withCtx)((function(){return[(0,r.createElementVNode)("span",{innerHTML:e.tooltip},null,8,F)]})),default:(0,r.withCtx)((function(){return[(0,r.createElementVNode)("span",{class:"badge",innerHTML:e.badge},null,8,x)]})),_:2},1024)])})),256))])])],2)})),256)),(0,r.createElementVNode)("div",V,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,null,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.eventsMultiDay,(function(t){return(0,r.openBlock)(),(0,r.createElementBlock)("div",{class:(0,r.normalizeClass)([["nc-event","multi","nc-col-"+e.weekdayColumn,"span-"+t.spansDaysN],{clickable:t.url,starts:t.startsEvent,ends:t.endsEvent,withinRange:t.isWithinRange}]),onClick:function(e){return J.open(e,t.url)},style:(0,r.normalizeStyle)(P.stylesForEvent(t))},[(0,r.createElementVNode)("div",M,(0,r.toDisplayString)(t.name),1),(0,r.createElementVNode)("div",T,[t.startsEvent?((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,{key:0},(0,r.renderList)(t.badges,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("span",S,[(0,r.createElementVNode)("span",{class:"badge",innerHTML:e},null,8,K)])})),256)):(0,r.createCommentVNode)("",!0)]),(0,r.createElementVNode)("div",H,[t.startsEvent&&t.options.displayTime?((0,r.openBlock)(),(0,r.createElementBlock)("span",O,(0,r.toDisplayString)(t.startTime),1)):(0,r.createCommentVNode)("",!0),t.startsEvent?((0,r.openBlock)(),(0,r.createElementBlock)("span",{key:1,class:"notes",innerHTML:t.notes},null,8,D)):(0,r.createCommentVNode)("",!0)])],14,L)})),256))],64)})),256)),((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("div",{class:(0,r.normalizeClass)(["single-day-events","nc-col-"+e.weekdayColumn])},[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.eventsSingleDay,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("div",{class:(0,r.normalizeClass)([["nc-event"],{clickable:e.url,starts:e.startsEvent,ends:e.endsEvent,withinRange:e.isWithinRange}]),onClick:function(t){return J.open(t,e.url)},style:(0,r.normalizeStyle)(P.stylesForEvent(e))},[(0,r.createElementVNode)("div",_,(0,r.toDisplayString)(e.name),1),e.badges.length>0?((0,r.openBlock)(),(0,r.createElementBlock)("div",A,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.badges,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("span",z,[(0,r.createElementVNode)("span",{class:"badge",innerHTML:e},null,8,R)])})),256))])):(0,r.createCommentVNode)("",!0),(0,r.createElementVNode)("div",I,[e.options.displayTime?((0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,{key:0},[e.endTime?((0,r.openBlock)(),(0,r.createElementBlock)("span",$,(0,r.toDisplayString)(e.startTime)+" - "+(0,r.toDisplayString)(e.endTime),1)):((0,r.openBlock)(),(0,r.createElementBlock)("span",U,(0,r.toDisplayString)(e.startTime),1))],64)):(0,r.createCommentVNode)("",!0),(0,r.createElementVNode)("span",{class:"notes",innerHTML:e.notes},null,8,Z)])],14,j)})),256))],2)})),256))])])})),256))])])):(0,r.createCommentVNode)("",!0)]})),_:1})])])}]]);Nova.booting((function(e,t){Nova.inertia("NovaCalendar",Q)}))},594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=n(645),l=n.n(r)()((function(e){return e[1]}));l.push([e.id,"",""]);const o=l},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=e(t);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,r){"string"==typeof e&&(e=[[null,e,""]]);var l={};if(r)for(var o=0;o<this.length;o++){var a=this[o][0];null!=a&&(l[a]=!0)}for(var i=0;i<e.length;i++){var s=[].concat(e[i]);r&&l[s[0]]||(n&&(s[2]?s[2]="".concat(n," and ").concat(s[2]):s[2]=n),t.push(s))}},t}},762:()=>{},379:(e,t,n)=>{var r,l=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},o=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),a=[];function i(e){for(var t=-1,n=0;n<a.length;n++)if(a[n].identifier===e){t=n;break}return t}function s(e,t){for(var n={},r=[],l=0;l<e.length;l++){var o=e[l],s=t.base?o[0]+t.base:o[0],c=n[s]||0,d="".concat(s," ").concat(c);n[s]=c+1;var u=i(d),m={css:o[1],media:o[2],sourceMap:o[3]};-1!==u?(a[u].references++,a[u].updater(m)):a.push({identifier:d,updater:g(m,t),references:1}),r.push(d)}return r}function c(e){var t=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var l=n.nc;l&&(r.nonce=l)}if(Object.keys(r).forEach((function(e){t.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(t);else{var a=o(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(t)}return t}var d,u=(d=[],function(e,t){return d[e]=t,d.filter(Boolean).join("\n")});function m(e,t,n,r){var l=n?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=u(t,l);else{var o=document.createTextNode(l),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(o,a[t]):e.appendChild(o)}}function v(e,t,n){var r=n.css,l=n.media,o=n.sourceMap;if(l?e.setAttribute("media",l):e.removeAttribute("media"),o&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var h=null,f=0;function g(e,t){var n,r,l;if(t.singleton){var o=f++;n=h||(h=c(t)),r=m.bind(null,n,o,!1),l=m.bind(null,n,o,!0)}else n=c(t),r=v.bind(null,n,t),l=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else l()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=l());var n=s(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<n.length;r++){var l=i(n[r]);a[l].references--}for(var o=s(e,t),c=0;c<n.length;c++){var d=i(n[c]);0===a[d].references&&(a[d].updater(),a.splice(d,1))}n=o}}}},744:(e,t)=>{t.Z=(e,t)=>{const n=e.__vccOpts||e;for(const[e,r]of t)n[e]=r;return n}}},n={};function r(e){var l=n[e];if(void 0!==l)return l.exports;var o=n[e]={id:e,exports:{}};return t[e](o,o.exports,r),o.exports}r.m=t,e=[],r.O=(t,n,l,o)=>{if(!n){var a=1/0;for(d=0;d<e.length;d++){for(var[n,l,o]=e[d],i=!0,s=0;s<n.length;s++)(!1&o||a>=o)&&Object.keys(r.O).every((e=>r.O[e](n[s])))?n.splice(s--,1):(i=!1,o<a&&(a=o));if(i){e.splice(d--,1);var c=l();void 0!==c&&(t=c)}}return t}o=o||0;for(var d=e.length;d>0&&e[d-1][2]>o;d--)e[d]=e[d-1];e[d]=[n,l,o]},r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={103:0,990:0};r.O.j=t=>0===e[t];var t=(t,n)=>{var l,o,[a,i,s]=n,c=0;if(a.some((t=>0!==e[t]))){for(l in i)r.o(i,l)&&(r.m[l]=i[l]);if(s)var d=s(r)}for(t&&t(n);c<a.length;c++)o=a[c],r.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return r.O(d)},n=self.webpackChunkwdelfuego_nova_calendar=self.webpackChunkwdelfuego_nova_calendar||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))})(),r.O(void 0,[990],(()=>r(210)));var l=r.O(void 0,[990],(()=>r(762)));l=r.O(l)})();
\ No newline at end of file
+(()=>{"use strict";var e,t={335:(e,t,n)=>{const r=Vue;var l={id:"nc-control"},o={class:"left-items"},a=[(0,r.createElementVNode)("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"2"},[(0,r.createElementVNode)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M11 19l-7-7 7-7m8 14l-7-7 7-7"})],-1)],i=[(0,r.createElementVNode)("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"2"},[(0,r.createElementVNode)("circle",{cx:"12",cy:"12",r:"2",fill:"currentColor"})],-1)],s=[(0,r.createElementVNode)("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"2"},[(0,r.createElementVNode)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M13 5l7 7-7 7M5 5l7 7-7 7"})],-1)],c=(0,r.createElementVNode)("div",{class:"center-items"},null,-1),d={class:"right-items"},u=["innerHTML"],m={ref:"theForm",class:"divide-y divide-gray-200 dark:divide-gray-800 divide-solid"},g={key:0,class:"bg-gray-100"},h=["innerHTML"],v=["innerHTML","onClick"],k={key:1},y=["onClick"],p={class:"font-bold capitalize"},f={style:{width:"100%",overflow:"scroll"}},w={key:0,class:"nova-calendar month-view noselect"},b={key:0,class:"border-gray-200 dark:border-gray-900 dark:text-gray-300"},E={class:"nc-header"},B={class:"border-gray-200 dark:border-gray-900 dark:text-gray-300"},N={class:"nc-content"},V={key:0,class:"weeknumber dark:bg-gray-900 dark:border-gray-800 nc-col-0"},C=["onClick"],F={class:"weeknumberheader text-gray-400 button relative"},S={class:"weeknumberlabel absolute w-full text-right"},x={key:1,class:"weeknumberheader text-gray-400 noselect relative"},T={class:"weeknumberlabel absolute w-full text-right"},L={class:"week"},M={class:"dayheader text-gray-400 noselect"},D={class:"daylabel"},K={class:"badges"},H={class:"badge-bg text-gray-200"},O=["innerHTML"],_=["innerHTML"],z={class:"week-events"},W=["onClick"],R={class:"name noscrollbar"},A={class:"badges noscrollbar"},I={class:"badge-bg text-gray-200"},$=["innerHTML"],j={class:"content noscrollbar"},U={key:0,class:"time"},Z=["innerHTML"],J=["onClick"],q={class:"name noscrollbar"},P={key:0,class:"badges"},G={class:"badge-bg text-gray-200"},Q=["innerHTML"],X={class:"content noscrollbar"},Y={key:0,class:"time"},ee={key:1,class:"time"},te=["innerHTML"];const ne={props:["calendarViews"],emits:["set-active-view"],mounted:function(){var e=this;this.init(),Nova.addShortcut("alt+right",(function(t){e.nextMonth()})),Nova.addShortcut("alt+left",(function(t){e.prevMonth()})),Nova.addShortcut("alt+h",(function(t){e.reset()}))},methods:{reset:function(){this.month=null,this.year=null,this.week=null,this.reload()},init:function(){this.hasStoredSettings()?(this.restoreSettings(),this.reload(!1)):this.reload(!0)},prevMonth:function(){this.month-=1,this.reload()},nextMonth:function(){this.month+=1,this.reload()},chooseWeek:function(e){this.week=e,this.$emit("set-active-view","week")},reload:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=this;n.loading=!0;var r="/nova-vendor/wdelfuego/nova-calendar"+this.calendarUrl()+"/month?y="+n.year+"&m="+n.month;n.activeFilterKey?r+="&filter="+n.activeFilterKey:t&&(r+="&isInitRequest=1"),Nova.request().get(r).then((function(t){n.styles=t.data.styles,n.year=t.data.year,n.month=t.data.month,n.week=t.data.week,n.resetFiltersLabel=t.data.resetFiltersLabel,n.availableFilters=t.data.filters,n.activeFilterKey=t.data.activeFilterKey,n.shouldShowWeekNumbers=t.data.shouldShowWeekNumbers,n.title=t.data.title,n.columns=t.data.columns,n.weeks=t.data.weeks,e.setFilter(n.activeFilterKey),n.loading=!1,e.storeSettings()}))},open:function(e,t){e.metaKey||e.ctrlKey?window.open(Nova.url(t)):Nova.visit(t)},stylesForEvent:function(e){var t=this;if(e.options.styles){var n=[this.styles.default];return e.options.styles.forEach((function(e){void 0===t.styles[e]?console.log("[nova-calendar] Unknown custom style name '"+e+"'; does the eventStyles method of your CalendarDataProvider define it properly?"):n.push(t.styles[e])})),n}return this.styles.default},chooseFilter:function(e){this.setFilter(e),this.reload()},setFilter:function(e){for(var e in this.activeFilterKey=e,this.availableFilters)this.activeFilterKey==e&&(this.activeFilterLabel=this.availableFilters[e])},calendarUrl:function(){return window.location.pathname.substring(Nova.url("").length)},storageKey:function(){return"wdelfuego-nova-calendar-"+this.calendarUrl()},hasStoredSettings:function(){return null!==localStorage.getItem(this.storageKey())},storeSettings:function(){localStorage.setItem(this.storageKey(),JSON.stringify({year:this.year,month:this.month,week:this.week,activeFilterKey:this.activeFilterKey}))},restoreSettings:function(){var e=JSON.parse(localStorage.getItem(this.storageKey()));e&&(this.year=e.year,this.month=e.month,this.week=e.week,this.activeFilterKey=e.activeFilterKey)}},data:function(){return{loading:!0,resetFiltersLabel:"All events",availableFilters:{},activeFilterKey:null,activeFilterLabel:null,shouldShowWeekNumbers:!1,title:"",year:null,month:null,week:null,columns:Array(7).fill("-"),weeks:Array(6).fill(Array(7).fill({})),styles:{default:{color:"#fff","background-color":"rgba(var(--colors-primary-500), 0.9)"}}}},computed:{weekViewEnabled:function(){return this.calendarViews.includes("week")}}};var re=n(379),le=n.n(re),oe=n(100),ae={insert:"head",singleton:!1};le()(oe.Z,ae);oe.Z.locals;var ie=n(744);const se=(0,ie.Z)(ne,[["render",function(e,t,n,ne,re,le){var oe=this,ae=(0,r.resolveComponent)("Icon"),ie=(0,r.resolveComponent)("DropdownTrigger"),se=(0,r.resolveComponent)("ScrollWrap"),ce=(0,r.resolveComponent)("DropdownMenu"),de=(0,r.resolveComponent)("Dropdown"),ue=(0,r.resolveComponent)("Tooltip"),me=(0,r.resolveComponent)("Card");return(0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,null,[(0,r.createElementVNode)("div",l,[(0,r.createElementVNode)("div",o,[(0,r.createElementVNode)("a",{onClick:t[0]||(t[0]=function(){return le.prevMonth&&le.prevMonth.apply(le,arguments)}),href:"#",class:"button hover:bg-gray-100 dark:hover:bg-gray-700",title:"Alt + ←"},a),(0,r.createElementVNode)("a",{onClick:t[1]||(t[1]=function(){return le.reset&&le.reset.apply(le,arguments)}),href:"#",class:"button hover:bg-gray-100 dark:hover:bg-gray-700",title:"Alt + H"},i),(0,r.createElementVNode)("a",{onClick:t[2]||(t[2]=function(){return le.nextMonth&&le.nextMonth.apply(le,arguments)}),href:"#",class:"button hover:bg-gray-100 dark:hover:bg-gray-700",title:"Alt + →"},s),(0,r.createElementVNode)("h1",{onClick:t[3]||(t[3]=function(){return le.reset&&le.reset.apply(le,arguments)}),class:"text-90 font-normal text-xl md:text-2xl noselect"},[(0,r.createElementVNode)("span",null,(0,r.toDisplayString)(e.$data.title),1)])]),c,(0,r.createElementVNode)("div",d,[Object.keys(re.availableFilters).length?((0,r.openBlock)(),(0,r.createBlock)(de,{key:0,"handle-internal-clicks":!0,class:(0,r.normalizeClass)([{"bg-primary-500 hover:bg-primary-600 border-primary-500":null!=re.activeFilterKey,"dark:bg-primary-500 dark:hover:bg-primary-600 dark:border-primary-500":null!=re.activeFilterKey},"flex h-9 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"]),dusk:"filter-selector"},{menu:(0,r.withCtx)((function(){return[(0,r.createVNode)(ce,{width:"260"},{default:(0,r.withCtx)((function(){return[(0,r.createVNode)(se,{height:350,class:"bg-white dark:bg-gray-900"},{default:(0,r.withCtx)((function(){return[(0,r.createElementVNode)("div",m,[null!=re.activeFilterKey?((0,r.openBlock)(),(0,r.createElementBlock)("div",g,[(0,r.createElementVNode)("button",{class:"py-2 w-full block tracking-wide text-center text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none",onClick:t[4]||(t[4]=function(e){return le.chooseFilter(null)}),innerHTML:e.$data.resetFiltersLabel},null,8,h)])):(0,r.createCommentVNode)("",!0),(0,r.createElementVNode)("div",null,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.$data.availableFilters,(function(e,t){return(0,r.openBlock)(),(0,r.createElementBlock)("button",{class:(0,r.normalizeClass)(["py-2 w-full block dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-200",{"font-bold":re.activeFilterKey==t}]),innerHTML:e,onClick:function(e){return le.chooseFilter(t)}},null,10,v)})),256))])],512)]})),_:1})]})),_:1})]})),default:(0,r.withCtx)((function(){return[(0,r.createVNode)(ie,{class:(0,r.normalizeClass)([{"text-white hover:text-white dark:text-gray-800 dark:hover:text-gray-800":null!=re.activeFilterKey},"toolbar-button px-2"])},{default:(0,r.withCtx)((function(){return[(0,r.createVNode)(ae,{type:"filter"}),null!=re.activeFilterKey?((0,r.openBlock)(),(0,r.createElementBlock)("span",{key:0,class:(0,r.normalizeClass)([{"text-white dark:text-gray-800":null!=re.activeFilterKey},"ml-2 font-bold"]),innerHTML:re.activeFilterLabel},null,10,u)):(0,r.createCommentVNode)("",!0)]})),_:1},8,["class"])]})),_:1},8,["class"])):(0,r.createCommentVNode)("",!0),n.calendarViews.length>1?((0,r.openBlock)(),(0,r.createElementBlock)("div",k,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(n.calendarViews,(function(t){return(0,r.openBlock)(),(0,r.createElementBlock)("a",{href:"#",onClick:function(n){return e.$emit("set-active-view",t)},class:(0,r.normalizeClass)(["button hover:bg-gray-100 dark:hover:bg-gray-700 ml-2",[{"bg-primary-500 text-white":"month"===t}]])},[(0,r.createElementVNode)("span",p,(0,r.toDisplayString)(e.__(t)),1)],10,y)})),256))])):(0,r.createCommentVNode)("",!0)])]),(0,r.createElementVNode)("div",f,[(0,r.createVNode)(me,{class:"flex flex-col items-center justify-center dark:bg-gray-800",style:{"min-height":"300px","min-width":"800px","background-color":"var(--bg-gray-800)"}},{default:(0,r.withCtx)((function(){return[re.title.length?((0,r.openBlock)(),(0,r.createElementBlock)("div",w,[(0,r.createElementVNode)("div",{class:(0,r.normalizeClass)({shouldShowWeekNumbers:re.shouldShowWeekNumbers})},[re.shouldShowWeekNumbers?((0,r.openBlock)(),(0,r.createElementBlock)("div",b)):(0,r.createCommentVNode)("",!0),(0,r.createElementVNode)("div",E,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.$data.columns,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("div",B,[(0,r.createElementVNode)("span",null,(0,r.toDisplayString)(e),1)])})),256))])],2),(0,r.createElementVNode)("div",N,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.$data.weeks,(function(t,n){return(0,r.openBlock)(),(0,r.createElementBlock)("div",{class:(0,r.normalizeClass)({shouldShowWeekNumbers:re.shouldShowWeekNumbers})},[re.shouldShowWeekNumbers?((0,r.openBlock)(),(0,r.createElementBlock)("div",V,[oe.weekViewEnabled?((0,r.openBlock)(),(0,r.createElementBlock)("a",{key:0,href:"#",onClick:function(e){return le.chooseWeek(t.number)}},[(0,r.createElementVNode)("div",F,[(0,r.createElementVNode)("div",S,(0,r.toDisplayString)(e.__("W"))+(0,r.toDisplayString)(t.number),1)])],8,C)):((0,r.openBlock)(),(0,r.createElementBlock)("div",x,[(0,r.createElementVNode)("div",T,(0,r.toDisplayString)(e.__("W"))+(0,r.toDisplayString)(t.number),1)]))])):(0,r.createCommentVNode)("",!0),(0,r.createElementVNode)("div",L,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(t.days,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("div",{class:(0,r.normalizeClass)(["day dark:bg-gray-900 dark:border-gray-800",["nc-col-"+e.weekdayColumn],{withinRange:e.isWithinRange,today:e.isToday}])},[(0,r.createElementVNode)("div",M,[(0,r.createElementVNode)("span",D,(0,r.toDisplayString)(e.label),1),(0,r.createElementVNode)("div",K,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.badges,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("span",H,[(0,r.createVNode)(ue,null,{content:(0,r.withCtx)((function(){return[(0,r.createElementVNode)("span",{innerHTML:e.tooltip},null,8,O)]})),default:(0,r.withCtx)((function(){return[(0,r.createElementVNode)("span",{class:"badge",innerHTML:e.badge},null,8,_)]})),_:2},1024)])})),256))])])],2)})),256)),(0,r.createElementVNode)("div",z,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(t.days,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,null,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.eventsMultiDay,(function(t){return(0,r.openBlock)(),(0,r.createElementBlock)("div",{class:(0,r.normalizeClass)([["nc-event","multi","nc-col-"+e.weekdayColumn,"span-"+t.spansDaysN],{clickable:t.url,starts:t.startsEvent,ends:t.endsEvent,withinRange:t.isWithinRange}]),onClick:function(e){return le.open(e,t.url)},style:(0,r.normalizeStyle)(oe.stylesForEvent(t))},[(0,r.createElementVNode)("div",R,(0,r.toDisplayString)(t.name),1),(0,r.createElementVNode)("div",A,[t.startsEvent?((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,{key:0},(0,r.renderList)(t.badges,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("span",I,[(0,r.createElementVNode)("span",{class:"badge",innerHTML:e},null,8,$)])})),256)):(0,r.createCommentVNode)("",!0)]),(0,r.createElementVNode)("div",j,[t.startsEvent&&t.options.displayTime?((0,r.openBlock)(),(0,r.createElementBlock)("span",U,(0,r.toDisplayString)(t.startTime),1)):(0,r.createCommentVNode)("",!0),t.startsEvent?((0,r.openBlock)(),(0,r.createElementBlock)("span",{key:1,class:"notes",innerHTML:t.notes},null,8,Z)):(0,r.createCommentVNode)("",!0)])],14,W)})),256))],64)})),256)),((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(t.days,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("div",{class:(0,r.normalizeClass)(["single-day-events","nc-col-"+e.weekdayColumn])},[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.eventsSingleDay,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("div",{class:(0,r.normalizeClass)([["nc-event"],{clickable:e.url,starts:e.startsEvent,ends:e.endsEvent,withinRange:e.isWithinRange}]),onClick:function(t){return le.open(t,e.url)},style:(0,r.normalizeStyle)(oe.stylesForEvent(e))},[(0,r.createElementVNode)("div",q,(0,r.toDisplayString)(e.name),1),e.badges.length>0?((0,r.openBlock)(),(0,r.createElementBlock)("div",P,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.badges,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("span",G,[(0,r.createElementVNode)("span",{class:"badge",innerHTML:e},null,8,Q)])})),256))])):(0,r.createCommentVNode)("",!0),(0,r.createElementVNode)("div",X,[e.options.displayTime?((0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,{key:0},[e.endTime?((0,r.openBlock)(),(0,r.createElementBlock)("span",Y,(0,r.toDisplayString)(e.startTime)+" - "+(0,r.toDisplayString)(e.endTime),1)):((0,r.openBlock)(),(0,r.createElementBlock)("span",ee,(0,r.toDisplayString)(e.startTime),1))],64)):(0,r.createCommentVNode)("",!0),(0,r.createElementVNode)("span",{class:"notes",innerHTML:e.notes},null,8,te)])],14,J)})),256))],2)})),256))])])],2)})),256))])])):(0,r.createCommentVNode)("",!0)]})),_:1})])],64)}]]);var ce={id:"nc-control"},de={class:"left-items"},ue=[(0,r.createElementVNode)("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"2"},[(0,r.createElementVNode)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M11 19l-7-7 7-7m8 14l-7-7 7-7"})],-1)],me=[(0,r.createElementVNode)("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"2"},[(0,r.createElementVNode)("circle",{cx:"12",cy:"12",r:"2",fill:"currentColor"})],-1)],ge=[(0,r.createElementVNode)("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"2"},[(0,r.createElementVNode)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M13 5l7 7-7 7M5 5l7 7-7 7"})],-1)],he=(0,r.createElementVNode)("div",{class:"center-items"},null,-1),ve={class:"right-items"},ke=["innerHTML"],ye={ref:"theForm",class:"divide-y divide-gray-200 dark:divide-gray-800 divide-solid"},pe={key:0,class:"bg-gray-100"},fe=["innerHTML"],we=["innerHTML","onClick"],be={key:1},Ee=["onClick"],Be={class:"font-bold capitalize"},Ne={style:{width:"100%",overflow:"scroll"}},Ve={class:"nova-calendar week-view noselect"},Ce={class:"nc-header"},Fe={class:"border-gray-200 dark:border-gray-900 dark:text-gray-300 nc-col-0"},Se={class:"week"},xe={class:"week-events"},Te={class:"rotated dark:bg-gray-900 nc-col-0"},Le={class:"rotated-header text-gray-400 noselect relative"},Me={class:"rotated-label dark:bg-gray-900 nc-col-0"},De={class:"dayheader text-gray-400 noselect"},Ke={class:"daylabel"},He={class:"badges noscrollbar"},Oe={class:"badge-bg text-gray-200"},_e=["innerHTML"],ze=["innerHTML"],We={key:1,class:"dayheader text-gray-400 noselect"},Re={class:"daylabel"},Ae={class:"badges"},Ie={class:"badge-bg text-gray-200"},$e=["innerHTML"],je=["innerHTML"],Ue=["onClick"],Ze={class:"name noscrollbar"},Je={class:"badges noscrollbar"},qe={class:"badge-bg text-gray-200"},Pe=["innerHTML"],Ge={class:"content noscrollbar"},Qe={key:0,class:"time"},Xe={class:"notes"},Ye={key:0},et=["onClick"],tt={class:"name noscrollbar"},nt={class:"badges"},rt={class:"badge-bg text-gray-200"},lt=["innerHTML"],ot={class:"content noscrollbar"},at={key:0,class:"time"},it={key:1,class:"time"},st={class:"notes"};const ct={props:["calendarViews"],emits:["set-active-view"],mounted:function(){var e=this;this.init(),Nova.addShortcut("alt+right",(function(t){e.nextWeek()})),Nova.addShortcut("alt+left",(function(t){e.prevWeek()})),Nova.addShortcut("alt+h",(function(t){e.reset()}))},methods:{reset:function(){this.year=null,this.month=null,this.week=null,this.reload()},init:function(){this.hasStoredSettings()?(this.restoreSettings(),this.reload(!1)):this.reload(!0)},prevWeek:function(){this.week-=1,this.reload()},nextWeek:function(){this.week+=1,this.reload()},reload:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=this;n.loading=!0;var r="/nova-vendor/wdelfuego/nova-calendar"+this.calendarUrl()+"/week?y="+n.year+"&w="+n.week;n.activeFilterKey?r+="&filter="+n.activeFilterKey:t&&(r+="&isInitRequest=1"),Nova.request().get(r).then((function(t){n.styles=t.data.styles,n.year=t.data.year,n.month=t.data.month,n.week=t.data.week,n.resetFiltersLabel=t.data.resetFiltersLabel,n.availableFilters=t.data.filters,n.activeFilterKey=t.data.activeFilterKey,n.shouldShowWeekNumbers=t.data.shouldShowWeekNumbers,n.title=t.data.title,n.columns=t.data.columns,n.layout=t.data.layout,n.weekData=t.data.weekData,n.timeline=t.data.timeline,e.setFilter(n.activeFilterKey),n.loading=!1,e.storeSettings()}))},open:function(e,t){e.metaKey||e.ctrlKey?window.open(Nova.url(t)):Nova.visit(t)},stylesForEvent:function(e){var t=this;if(e.options.styles){var n=[this.styles.default];return e.options.styles.forEach((function(e){void 0===t.styles[e]?console.log("[nova-calendar] Unknown custom style name '"+e+"'; does the eventStyles method of your CalendarDataProvider define it properly?"):n.push(t.styles[e])})),n}return this.styles.default},chooseFilter:function(e){this.setFilter(e),this.reload()},setFilter:function(e){for(var e in this.activeFilterKey=e,this.availableFilters)this.activeFilterKey==e&&(this.activeFilterLabel=this.availableFilters[e])},calendarUrl:function(){return window.location.pathname.substring(Nova.url("").length)},storageKey:function(){return"wdelfuego-nova-calendar-"+this.calendarUrl()},hasStoredSettings:function(){return null!==localStorage.getItem(this.storageKey())},storeSettings:function(){localStorage.setItem(this.storageKey(),JSON.stringify({year:this.year,month:this.month,week:this.week,activeFilterKey:this.activeFilterKey}))},restoreSettings:function(){var e=JSON.parse(localStorage.getItem(this.storageKey()));e&&(this.year=e.year,this.month=e.month,this.week=e.week,this.activeFilterKey=e.activeFilterKey)},minuteForTime:function(e,t){return 60*e+t},rowForTime:function(e,t){return Math.round(this.minuteForTime(e,t)/10)-this.morningOffsetRow+1},eventStartRow:function(e,t){var n=this.rowForTime(e,t);return n<1?1:n>this.gridRows-2?this.gridRows-2:n},eventEndRow:function(e,t){var n=this.rowForTime(e,t);return n<3?3:n>this.gridRows?-1:n},withinTimeline:function(e,t){return this.minuteForTime(e,t)>=this.openingMinute&&this.minuteForTime(e,t)<=this.closingMinute},withinView:function(e,t){return this.minuteForTime(e,t)>this.morningOffset&&this.minuteForTime(e,t)<this.eveningOffset},slotIsShown:function(e,t){var n=this.minuteForTime(e,t);return n>=this.morningOffset&&n<this.eveningOffset}},data:function(){return{loading:!0,resetFiltersLabel:"All events",availableFilters:{},activeFilterKey:null,activeFilterLabel:null,shouldShowWeekNumbers:!1,title:"",year:null,month:null,week:null,columns:Array(7).fill("-"),layout:Array(),weekData:Array(7).fill({}),timeline:Array(),styles:{default:{color:"#fff","background-color":"rgba(var(--colors-primary-500), 0.9)"}}}},computed:{openingMinute:function(){return 60*this.layout.openingHour},closingMinute:function(){return 60*this.layout.closingHour},morningOffset:function(){return this.openingMinute-60},eveningOffset:function(){return this.closingMinute+60},morningOffsetRow:function(){return this.morningOffset/10},eveningOffsetRow:function(){return this.eveningOffset/10},gridRows:function(){return 145-(this.morningOffsetRow+145-this.eveningOffsetRow)},dayViewEnabled:function(){return this.calendarViews.includes("day")}}};var dt=n(188),ut={insert:"head",singleton:!1};le()(dt.Z,ut);dt.Z.locals;const mt={components:{Month:se,Week:(0,ie.Z)(ct,[["render",function(e,t,n,l,o,a){var i=this,s=(0,r.resolveComponent)("Icon"),c=(0,r.resolveComponent)("DropdownTrigger"),d=(0,r.resolveComponent)("ScrollWrap"),u=(0,r.resolveComponent)("DropdownMenu"),m=(0,r.resolveComponent)("Dropdown"),g=(0,r.resolveComponent)("Tooltip"),h=(0,r.resolveComponent)("Card");return(0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,null,[(0,r.createElementVNode)("div",ce,[(0,r.createElementVNode)("div",de,[(0,r.createElementVNode)("a",{onClick:t[0]||(t[0]=function(){return a.prevWeek&&a.prevWeek.apply(a,arguments)}),href:"#",class:"button hover:bg-gray-100 dark:hover:bg-gray-700",title:"Alt + ←"},ue),(0,r.createElementVNode)("a",{onClick:t[1]||(t[1]=function(){return a.reset&&a.reset.apply(a,arguments)}),href:"#",class:"button hover:bg-gray-100 dark:hover:bg-gray-700",title:"Alt + H"},me),(0,r.createElementVNode)("a",{onClick:t[2]||(t[2]=function(){return a.nextWeek&&a.nextWeek.apply(a,arguments)}),href:"#",class:"button hover:bg-gray-100 dark:hover:bg-gray-700",title:"Alt + →"},ge),(0,r.createElementVNode)("h1",{onClick:t[3]||(t[3]=function(){return a.reset&&a.reset.apply(a,arguments)}),class:"text-90 font-normal text-xl md:text-2xl noselect"},[(0,r.createElementVNode)("span",null,(0,r.toDisplayString)(e.$data.title),1)])]),he,(0,r.createElementVNode)("div",ve,[Object.keys(o.availableFilters).length?((0,r.openBlock)(),(0,r.createBlock)(m,{key:0,"handle-internal-clicks":!0,class:(0,r.normalizeClass)([{"bg-primary-500 hover:bg-primary-600 border-primary-500":null!=o.activeFilterKey,"dark:bg-primary-500 dark:hover:bg-primary-600 dark:border-primary-500":null!=o.activeFilterKey},"flex h-9 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"]),dusk:"filter-selector"},{menu:(0,r.withCtx)((function(){return[(0,r.createVNode)(u,{width:"260"},{default:(0,r.withCtx)((function(){return[(0,r.createVNode)(d,{height:350,class:"bg-white dark:bg-gray-900"},{default:(0,r.withCtx)((function(){return[(0,r.createElementVNode)("div",ye,[null!=o.activeFilterKey?((0,r.openBlock)(),(0,r.createElementBlock)("div",pe,[(0,r.createElementVNode)("button",{class:"py-2 w-full block tracking-wide text-center text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none",onClick:t[4]||(t[4]=function(e){return a.chooseFilter(null)}),innerHTML:e.$data.resetFiltersLabel},null,8,fe)])):(0,r.createCommentVNode)("",!0),(0,r.createElementVNode)("div",null,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.$data.availableFilters,(function(e,t){return(0,r.openBlock)(),(0,r.createElementBlock)("button",{class:(0,r.normalizeClass)(["py-2 w-full block dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-200",{"font-bold":o.activeFilterKey==t}]),innerHTML:e,onClick:function(e){return a.chooseFilter(t)}},null,10,we)})),256))])],512)]})),_:1})]})),_:1})]})),default:(0,r.withCtx)((function(){return[(0,r.createVNode)(c,{class:(0,r.normalizeClass)([{"text-white hover:text-white dark:text-gray-800 dark:hover:text-gray-800":null!=o.activeFilterKey},"toolbar-button px-2"])},{default:(0,r.withCtx)((function(){return[(0,r.createVNode)(s,{type:"filter"}),null!=o.activeFilterKey?((0,r.openBlock)(),(0,r.createElementBlock)("span",{key:0,class:(0,r.normalizeClass)([{"text-white dark:text-gray-800":null!=o.activeFilterKey},"ml-2 font-bold"]),innerHTML:o.activeFilterLabel},null,10,ke)):(0,r.createCommentVNode)("",!0)]})),_:1},8,["class"])]})),_:1},8,["class"])):(0,r.createCommentVNode)("",!0),n.calendarViews.length>1?((0,r.openBlock)(),(0,r.createElementBlock)("div",be,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(n.calendarViews,(function(t){return(0,r.openBlock)(),(0,r.createElementBlock)("a",{href:"#",onClick:function(n){return e.$emit("set-active-view",t)},class:(0,r.normalizeClass)(["button hover:bg-gray-100 dark:hover:bg-gray-700 ml-2",[{"bg-primary-500 text-white":"week"===t}]])},[(0,r.createElementVNode)("span",Be,(0,r.toDisplayString)(e.__(t)),1)],10,Ee)})),256))])):(0,r.createCommentVNode)("",!0)])]),(0,r.createElementVNode)("div",Ne,[(0,r.createVNode)(h,{class:"flex flex-col items-center justify-center dark:bg-gray-800",style:{"min-height":"100px","min-width":"800px","background-color":"var(--bg-gray-800)"}},{default:(0,r.withCtx)((function(){return[(0,r.createElementVNode)("div",Ve,[(0,r.createElementVNode)("div",Ce,[(0,r.createElementVNode)("div",Fe,[(0,r.createElementVNode)("span",null,(0,r.toDisplayString)(e.__("W"))+(0,r.toDisplayString)(i.week),1)]),((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.$data.columns,(function(e,t){return(0,r.openBlock)(),(0,r.createElementBlock)("div",{class:(0,r.normalizeClass)(["border-gray-200 dark:border-gray-900 dark:text-gray-300",["nc-col-"+(t+1)]])},[(0,r.createElementVNode)("span",null,(0,r.toDisplayString)(e),1)],2)})),256))]),(0,r.createElementVNode)("div",Se,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.$data.weekData,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("div",{class:(0,r.normalizeClass)(["day multi dark:border-gray-800 withinRange",["nc-col-"+e.weekdayColumn],{today:e.isToday}])},null,2)})),256)),(0,r.createElementVNode)("div",xe,[(0,r.createElementVNode)("div",Te,[(0,r.createElementVNode)("div",Le,[(0,r.createElementVNode)("div",Me,(0,r.toDisplayString)(e.__("All day")),1)])]),((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.$data.weekData,(function(n){return(0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,null,[(0,r.createElementVNode)("div",{class:(0,r.normalizeClass)([["nc-col-"+n.weekdayColumn],{today:n.isToday}])},[i.dayViewEnabled?((0,r.openBlock)(),(0,r.createElementBlock)("button",{key:0,onClick:t[5]||(t[5]=function(t){return e.$emit("set-active-view","day")})},[(0,r.createElementVNode)("div",De,[(0,r.createElementVNode)("span",Ke,(0,r.toDisplayString)(n.label),1),(0,r.createElementVNode)("div",He,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(n.badges,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("span",Oe,[(0,r.createVNode)(g,null,{content:(0,r.withCtx)((function(){return[(0,r.createElementVNode)("span",{innerHTML:e.tooltip},null,8,_e)]})),default:(0,r.withCtx)((function(){return[(0,r.createElementVNode)("span",{class:"badge",innerHTML:e.badge},null,8,ze)]})),_:2},1024)])})),256))])])])):((0,r.openBlock)(),(0,r.createElementBlock)("div",We,[(0,r.createElementVNode)("span",Re,(0,r.toDisplayString)(n.label),1),(0,r.createElementVNode)("div",Ae,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(n.badges,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("span",Ie,[(0,r.createVNode)(g,null,{content:(0,r.withCtx)((function(){return[(0,r.createElementVNode)("span",{innerHTML:e.tooltip},null,8,$e)]})),default:(0,r.withCtx)((function(){return[(0,r.createElementVNode)("span",{class:"badge",innerHTML:e.badge},null,8,je)]})),_:2},1024)])})),256))])]))],2),((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(n.eventsMultiDay,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("div",{class:(0,r.normalizeClass)([["nc-event","multi","nc-col-"+n.weekdayColumn,"span-"+e.spansDaysN],{clickable:e.url,starts:e.startsEvent,ends:e.endsEvent,withinRange:e.isWithinRange}]),onClick:function(t){return a.open(t,e.url)},style:(0,r.normalizeStyle)(i.stylesForEvent(e))},[(0,r.createElementVNode)("div",Ze,(0,r.toDisplayString)(e.name),1),(0,r.createElementVNode)("div",Je,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.badges,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("span",qe,[(0,r.createElementVNode)("span",{class:"badge",innerHTML:e},null,8,Pe)])})),256))]),(0,r.createElementVNode)("div",Ge,[e.options.displayTime?((0,r.openBlock)(),(0,r.createElementBlock)("span",Qe,(0,r.toDisplayString)(e.startDate)+" "+(0,r.toDisplayString)(e.startTime),1)):(0,r.createCommentVNode)("",!0),(0,r.createElementVNode)("span",Xe,(0,r.toDisplayString)(e.notes),1)])],14,Ue)})),256))],64)})),256))])]),(0,r.createElementVNode)("div",{class:"week",style:(0,r.normalizeStyle)(["grid-template-rows: repeat("+i.gridRows+", 10px);"])},[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.$data.timeline,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,null,[a.slotIsShown(e.hour,e.minute)?((0,r.openBlock)(),(0,r.createElementBlock)("div",{key:0,class:"hour-label dark:bg-gray-900 dark:border-gray-800 nc-col-0",style:(0,r.normalizeStyle)(["grid-row: "+a.rowForTime(e.hour,e.minute)+" / "+a.rowForTime(e.hour,e.minute+i.layout.timelineInterval)+";"])},[a.withinTimeline(e.hour,e.minute)?((0,r.openBlock)(),(0,r.createElementBlock)("div",Ye,(0,r.toDisplayString)(e.hour_minute),1)):(0,r.createCommentVNode)("",!0)],4)):(0,r.createCommentVNode)("",!0)],64)})),256)),((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.$data.weekData,(function(t){return(0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,null,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.$data.timeline,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,null,[a.slotIsShown(e.hour,e.minute)?((0,r.openBlock)(),(0,r.createElementBlock)("div",{key:0,class:(0,r.normalizeClass)(["slot dark:border-gray-800 dark:bg-gray-900",["nc-col-"+t.weekdayColumn],{withinRange:e.is_open}]),style:(0,r.normalizeStyle)(["grid-row: "+a.rowForTime(e.hour,e.minute)+" / "+a.rowForTime(e.hour,e.minute+i.layout.timelineInterval)+";"])},null,6)):(0,r.createCommentVNode)("",!0)],64)})),256)),(0,r.createElementVNode)("div",{class:(0,r.normalizeClass)(["nc-col-"+t.weekdayColumn]),style:(0,r.normalizeStyle)(["grid-row: 1 / span "+i.gridRows+";","display: grid;","grid-template-rows: repeat("+i.gridRows+", 10px);"])},[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(t.eventsSingleDay,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("div",{class:(0,r.normalizeClass)([["nc-event"],{clickable:e.url,starts:a.withinView(e.startHour,e.startMinute),ends:a.withinView(e.startHour,e.startMinute+e.durationInMinutes),withinRange:e.isWithinRange}]),onClick:function(t){return a.open(t,e.url)},style:(0,r.normalizeStyle)([i.stylesForEvent(e),"grid-row-start: "+a.eventStartRow(e.startHour,e.startMinute)+";","grid-row-end: "+a.eventEndRow(e.startHour,e.startMinute+e.durationInMinutes)+";"])},[(0,r.createElementVNode)("div",tt,(0,r.toDisplayString)(e.name),1),(0,r.createElementVNode)("div",nt,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(e.badges,(function(e){return(0,r.openBlock)(),(0,r.createElementBlock)("span",rt,[(0,r.createElementVNode)("span",{class:"badge",innerHTML:e},null,8,lt)])})),256))]),(0,r.createElementVNode)("div",ot,[e.options.displayTime?((0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,{key:0},[e.endTime?((0,r.openBlock)(),(0,r.createElementBlock)("span",at,(0,r.toDisplayString)(e.startTime)+"-"+(0,r.toDisplayString)(e.endTime),1)):((0,r.openBlock)(),(0,r.createElementBlock)("span",it,(0,r.toDisplayString)(e.startTime),1))],64)):(0,r.createCommentVNode)("",!0),(0,r.createElementVNode)("span",st,(0,r.toDisplayString)(e.notes),1)])],14,et)})),256))],6)],64)})),256))],4)])]})),_:1})])],64)}]])},data:function(){return{loading:!0,calendarViews:Array(),windowTitle:"",activeView:null}},mounted:function(){this.init()},methods:{init:function(){this.hasStoredSettings()?(this.restoreSettings(),this.reload(!1)):this.reload(!0)},reload:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=this;n.loading=!0;var r="/nova-vendor/wdelfuego/nova-calendar"+this.calendarUrl()+"/calendar-views/";Nova.request().get(r).then((function(r){n.calendarViews=r.data.calendar_views,n.windowTitle=r.data.windowTitle,t?e.setActiveView(n.calendarViews[0]):e.setActiveView(e.activeView),n.loading=!1}))},setActiveView:function(e){this.activeView=e,this.storeSettings()},calendarUrl:function(){return window.location.pathname.substring(Nova.url("").length)},storageKey:function(){return"wdelfuego-nova-calendar-"+this.calendarUrl()+"-views"},hasStoredSettings:function(){return null!==localStorage.getItem(this.storageKey())},storeSettings:function(){localStorage.setItem(this.storageKey(),JSON.stringify({activeView:this.activeView}))},restoreSettings:function(){var e=JSON.parse(localStorage.getItem(this.storageKey()));e&&(this.activeView=e.activeView)}}};var gt=n(195),ht={insert:"head",singleton:!1};le()(gt.Z,ht);gt.Z.locals;const vt=(0,ie.Z)(mt,[["render",function(e,t,n,l,o,a){var i=(0,r.resolveComponent)("Head"),s=(0,r.resolveComponent)("LoadingView");return(0,r.openBlock)(),(0,r.createBlock)(s,{loading:o.loading},{default:(0,r.withCtx)((function(){return[(0,r.createVNode)(i,{title:e.$data.windowTitle},null,8,["title"]),((0,r.openBlock)(),(0,r.createBlock)((0,r.resolveDynamicComponent)(o.activeView),{"calendar-views":o.calendarViews,onSetActiveView:a.setActiveView},null,40,["calendar-views","onSetActiveView"]))]})),_:1},8,["loading"])}]]);Nova.booting((function(e,t){Nova.inertia("NovaCalendar",vt)}))},100:(e,t,n)=>{n.d(t,{Z:()=>o});var r=n(645),l=n.n(r)()((function(e){return e[1]}));l.push([e.id,"",""]);const o=l},188:(e,t,n)=>{n.d(t,{Z:()=>o});var r=n(645),l=n.n(r)()((function(e){return e[1]}));l.push([e.id,"",""]);const o=l},195:(e,t,n)=>{n.d(t,{Z:()=>o});var r=n(645),l=n.n(r)()((function(e){return e[1]}));l.push([e.id,"",""]);const o=l},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=e(t);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,r){"string"==typeof e&&(e=[[null,e,""]]);var l={};if(r)for(var o=0;o<this.length;o++){var a=this[o][0];null!=a&&(l[a]=!0)}for(var i=0;i<e.length;i++){var s=[].concat(e[i]);r&&l[s[0]]||(n&&(s[2]?s[2]="".concat(n," and ").concat(s[2]):s[2]=n),t.push(s))}},t}},762:()=>{},379:(e,t,n)=>{var r,l=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},o=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),a=[];function i(e){for(var t=-1,n=0;n<a.length;n++)if(a[n].identifier===e){t=n;break}return t}function s(e,t){for(var n={},r=[],l=0;l<e.length;l++){var o=e[l],s=t.base?o[0]+t.base:o[0],c=n[s]||0,d="".concat(s," ").concat(c);n[s]=c+1;var u=i(d),m={css:o[1],media:o[2],sourceMap:o[3]};-1!==u?(a[u].references++,a[u].updater(m)):a.push({identifier:d,updater:k(m,t),references:1}),r.push(d)}return r}function c(e){var t=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var l=n.nc;l&&(r.nonce=l)}if(Object.keys(r).forEach((function(e){t.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(t);else{var a=o(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(t)}return t}var d,u=(d=[],function(e,t){return d[e]=t,d.filter(Boolean).join("\n")});function m(e,t,n,r){var l=n?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=u(t,l);else{var o=document.createTextNode(l),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(o,a[t]):e.appendChild(o)}}function g(e,t,n){var r=n.css,l=n.media,o=n.sourceMap;if(l?e.setAttribute("media",l):e.removeAttribute("media"),o&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var h=null,v=0;function k(e,t){var n,r,l;if(t.singleton){var o=v++;n=h||(h=c(t)),r=m.bind(null,n,o,!1),l=m.bind(null,n,o,!0)}else n=c(t),r=g.bind(null,n,t),l=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else l()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=l());var n=s(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<n.length;r++){var l=i(n[r]);a[l].references--}for(var o=s(e,t),c=0;c<n.length;c++){var d=i(n[c]);0===a[d].references&&(a[d].updater(),a.splice(d,1))}n=o}}}},744:(e,t)=>{t.Z=(e,t)=>{const n=e.__vccOpts||e;for(const[e,r]of t)n[e]=r;return n}}},n={};function r(e){var l=n[e];if(void 0!==l)return l.exports;var o=n[e]={id:e,exports:{}};return t[e](o,o.exports,r),o.exports}r.m=t,e=[],r.O=(t,n,l,o)=>{if(!n){var a=1/0;for(d=0;d<e.length;d++){for(var[n,l,o]=e[d],i=!0,s=0;s<n.length;s++)(!1&o||a>=o)&&Object.keys(r.O).every((e=>r.O[e](n[s])))?n.splice(s--,1):(i=!1,o<a&&(a=o));if(i){e.splice(d--,1);var c=l();void 0!==c&&(t=c)}}return t}o=o||0;for(var d=e.length;d>0&&e[d-1][2]>o;d--)e[d]=e[d-1];e[d]=[n,l,o]},r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={103:0,990:0};r.O.j=t=>0===e[t];var t=(t,n)=>{var l,o,[a,i,s]=n,c=0;if(a.some((t=>0!==e[t]))){for(l in i)r.o(i,l)&&(r.m[l]=i[l]);if(s)var d=s(r)}for(t&&t(n);c<a.length;c++)o=a[c],r.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return r.O(d)},n=self.webpackChunkwdelfuego_nova_calendar=self.webpackChunkwdelfuego_nova_calendar||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))})(),r.nc=void 0,r.O(void 0,[990],(()=>r(335)));var l=r.O(void 0,[990],(()=>r(762)));l=r.O(l)})();
\ No newline at end of file
diff --git a/docs/customizing-the-calendar.md b/docs/customizing-the-calendar.md
index 6a01c17..fa27027 100644
--- a/docs/customizing-the-calendar.md
+++ b/docs/customizing-the-calendar.md
@@ -55,7 +55,7 @@ You can add tooltips to calendar day badges to show more details to the user.
 Simply supply a second string argument to the `addBadge` method:
 
 ```php
-protected function customizeCalendarDay(CalendarDay $day) : CalendarDay
+public function customizeCalendarDay(CalendarDay $day) : CalendarDay
 {
     if($day->start->format('d') % 2 == 0)
     {
diff --git a/resources/css/tool.css b/resources/css/tool.css
index 0ab680b..fc22647 100644
--- a/resources/css/tool.css
+++ b/resources/css/tool.css
@@ -23,7 +23,7 @@
   --nc-highlight-border: rgba(var(--colors-primary-500), 0.4);
   --nc-weekend-border: rgba(var(--colors-gray-500), 0.2);
   --nc-weekend-bg: rgba(var(--colors-gray-900), 0);
-  --nc-event-height-multi-day: 2.2em;
+  --nc-event-height-multi-day: 2em;
   --nc-event-border: rgba(10, 10, 10, 0.3);
   --nc-event-border-radius: 7px;
 }
@@ -108,12 +108,6 @@ div.nova-calendar {
   width: 100%;
 }
 
-div.nova-calendar div.nc-header {
-  display: grid;
-  width: 100%;
-  grid-template-columns: repeat(7, 1fr);
-}
-
 div.nova-calendar div.nc-header div {
   padding: 0.6em 0.6em 0.5em 0.6em;
   text-align: left;
@@ -121,28 +115,150 @@ div.nova-calendar div.nc-header div {
   word-break: break-all;
 }
 
-div.nova-calendar .week {
+/*
+ *  Month View
+ */
+
+div.nova-calendar.month-view div.nc-header {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+div.nova-calendar.month-view .week {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(7, 1fr);
 }
 
-div.nova-calendar .nc-col-1 { grid-column: 1 / 2; }
-div.nova-calendar .nc-col-2 { grid-column: 2 / 3; }
-div.nova-calendar .nc-col-3 { grid-column: 3 / 4; }
-div.nova-calendar .nc-col-4 { grid-column: 4 / 5; }
-div.nova-calendar .nc-col-5 { grid-column: 5 / 6; }
-div.nova-calendar .nc-col-6 { grid-column: 6 / 7; }
-div.nova-calendar .nc-col-7 { grid-column: 7 / -1; }
+div.nova-calendar.month-view .nc-col-1 { grid-column: 1 / 2; }
+div.nova-calendar.month-view .nc-col-2 { grid-column: 2 / 3; }
+div.nova-calendar.month-view .nc-col-3 { grid-column: 3 / 4; }
+div.nova-calendar.month-view .nc-col-4 { grid-column: 4 / 5; }
+div.nova-calendar.month-view .nc-col-5 { grid-column: 5 / 6; }
+div.nova-calendar.month-view .nc-col-6 { grid-column: 6 / 7; }
+div.nova-calendar.month-view .nc-col-7 { grid-column: 7 / -1; }
+
+div.nova-calendar.month-view .nc-event.multi.span-1 { grid-column-end: span 1; }
+div.nova-calendar.month-view .nc-event.multi.span-2 { grid-column-end: span 2; }
+div.nova-calendar.month-view .nc-event.multi.span-3 { grid-column-end: span 3; }
+div.nova-calendar.month-view .nc-event.multi.span-4 { grid-column-end: span 4; }
+div.nova-calendar.month-view .nc-event.multi.span-5 { grid-column-end: span 5; }
+div.nova-calendar.month-view .nc-event.multi.span-6 { grid-column-end: span 6; }
+div.nova-calendar.month-view .nc-event.multi.span-7 { grid-column-end: span 7; }
+
+div.nova-calendar.month-view .shouldShowWeekNumbers {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 2em 1fr;
+}
+
+div.nova-calendar.month-view .weeknumber {
+  z-index: 0;
+  grid-row: 1/-1;
+  border-width: 0.5px;
+  border-color: rgba(var(--colors-gray-500), 0.15);
+}
+
+div.nova-calendar.month-view .weeknumberheader {
+  z-index: 1;
+}
+
+div.nova-calendar.month-view .weeknumberlabel {
+  font-size: 8pt;
+  transform-origin: 75% 80%;
+  transform: rotate(270deg);
+}
+
+div.nova-calendar.month-view .week-events {
+  z-index: 2;
+  margin-top: 2.2em;
+  grid-column: 1 / -1;
+  grid-row: 1;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-auto-flow: column dense;
+}
+
+/*
+ *  Week View
+ */
+
+div.nova-calendar.week-view .week {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 4em repeat(7, 1fr);
+}
+
+div.nova-calendar.week-view div.nc-header {
+  display: grid;
+  grid-row: 1 / 2;
+  width: 100%;
+  grid-template-columns: 4em repeat(7, 1fr);
+}
+
+div.nova-calendar.week-view .nc-col-0 { grid-column: 1 / 2; }
+div.nova-calendar.week-view .nc-col-1 { grid-column: 2 / 3; }
+div.nova-calendar.week-view .nc-col-2 { grid-column: 3 / 4; }
+div.nova-calendar.week-view .nc-col-3 { grid-column: 4 / 5; }
+div.nova-calendar.week-view .nc-col-4 { grid-column: 5 / 6; }
+div.nova-calendar.week-view .nc-col-5 { grid-column: 6 / 7; }
+div.nova-calendar.week-view .nc-col-6 { grid-column: 7 / 8; }
+div.nova-calendar.week-view .nc-col-7 { grid-column: 8 / -1; }
+
+div.nova-calendar.week-view .nc-event.multi.span-1 { grid-column-end: span 1; }
+div.nova-calendar.week-view .nc-event.multi.span-2 { grid-column-end: span 2; }
+div.nova-calendar.week-view .nc-event.multi.span-3 { grid-column-end: span 3; }
+div.nova-calendar.week-view .nc-event.multi.span-4 { grid-column-end: span 4; }
+div.nova-calendar.week-view .nc-event.multi.span-5 { grid-column-end: span 5; }
+div.nova-calendar.week-view .nc-event.multi.span-6 { grid-column-end: span 6; }
+div.nova-calendar.week-view .nc-event.multi.span-7 { grid-column-end: span 7; }
+div.nova-calendar.week-view .nc-event.multi.span-8 { grid-column-end: span 8; }
+
+div.nova-calendar.week-view .rotated {
+  z-index: 0;
+  
+  border-color: rgba(var(--colors-gray-500), 0.15);
+}
+
+div.nova-calendar.week-view .rotated-header {
+  z-index: 1;
+}
 
-div.nova-calendar .nc-event.multi.span-1 { grid-column-end: span 1; }
-div.nova-calendar .nc-event.multi.span-2 { grid-column-end: span 2; }
-div.nova-calendar .nc-event.multi.span-3 { grid-column-end: span 3; }
-div.nova-calendar .nc-event.multi.span-4 { grid-column-end: span 4; }
-div.nova-calendar .nc-event.multi.span-5 { grid-column-end: span 5; }
-div.nova-calendar .nc-event.multi.span-6 { grid-column-end: span 6; }
-div.nova-calendar .nc-event.multi.span-7 { grid-column-end: span 7; }
+div.nova-calendar.week-view .rotated-label {
+  font-size: 8pt;
+  transform-origin: 75% 80%;
+  transform: rotate(270deg);
+}
+
+div.nova-calendar.week-view .hour-label {
+  font-size: 0.6rem;
+  opacity: 0.84;
+  text-align: right;
+  border: none;
+  padding-right: 0.5rem;
+}
+
+div.nova-calendar.week-view .hour-label div {
+  margin-top: -1em;
+}
+
+div.nova-calendar.week-view .day-events-container {
+  grid-column: 2;
+  display: grid;
+  grid-template-rows: 1fr auto;
+}
 
+div.nova-calendar.week-view .week-events {
+  z-index: 0;
+  margin-top: 0;
+  min-height: 6em;
+  grid-column: 1 / -1;
+  grid-row: 2;
+  display: grid;
+  grid-template-columns: 4em repeat(7, 1fr);
+  grid-auto-flow: column dense;
+}
 
 /*
  *  Day cells
@@ -156,6 +272,11 @@ div.nova-calendar .day {
   border-color: rgba(var(--colors-gray-500), 0.15);
 }
 
+div.nova-calendar .day.multi {
+  border-bottom: none;
+  min-height: 0;
+}
+
 div.nova-calendar .day:not(.withinRange) {
   opacity: 0.5;
   background: repeating-linear-gradient(
@@ -181,7 +302,7 @@ div.nova-calendar .day .dayheader .daylabel {
   opacity: 0.84;
 }
 
-div.nova-calendar .day.today .dayheader .daylabel {
+div.nova-calendar .today .dayheader .daylabel {
   font-size: 10pt;
   font-weight: bold;
   opacity: 1.0;
@@ -190,6 +311,31 @@ div.nova-calendar .day.today .dayheader .daylabel {
   border-radius: 100%;
 }
 
+/*
+ *  Hour cells
+ */
+
+div.nova-calendar .slot {
+  border-width: 0.5px;
+  border-color: rgba(var(--colors-gray-500), 0.15);
+}
+
+div.nova-calendar .slot:not(.withinRange) {
+  opacity: 0.5;
+  background: repeating-linear-gradient(
+    -45deg,
+    rgba(225,225,255, 0.1),
+    rgba(225,225,255, 0.1) 4px,
+    rgba(100,100,100, 0.1) 4px,
+    rgba(100,100,100, 0.1) 6px
+  );
+}
+
+div.nova-calendar .day-events-container {
+  grid-column: 2;
+  display: grid;
+  grid-template-rows: 1fr auto;
+}
 
 /*
  *  Day Badges
@@ -213,16 +359,6 @@ div.nova-calendar .dayheader span.badge {
  *  Events, general
  */
 
-div.nova-calendar .week-events {
-  z-index: 2;
-  margin-top: 2.2em;
-  grid-column: 1 / -1;
-  grid-row: 1;
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  grid-auto-flow: column dense;
-}
-
 div.nova-calendar .single-day-events {
   border: 0px #f00 solid;      
   grid-row-start: span 9000;
@@ -230,14 +366,14 @@ div.nova-calendar .single-day-events {
   margin-bottom: 1em;
 }
 
-div.nova-calendar .nc-event {
+ div.nova-calendar .nc-event {
   transition: opacity 0.25s;
   opacity: 0.92;
   overflow: hidden;
   display: grid;
   grid-template-columns: 1fr auto;
-  grid-template-rows: auto auto;
-  align-items: center;
+  grid-template-rows: max-content auto;
+  align-items: start;
   min-height: var(--nc-event-height-multi-day);
   margin: 0.1em 0.1em;
   padding: 0.2em;
@@ -254,20 +390,76 @@ div.nova-calendar .nc-event:hover {
   opacity: 1.0;
 }
 
-div.nova-calendar .nc-event.starts {
+div.nova-calendar div.nc-event.clickable {
+  cursor: pointer;
+}
+
+/*
+ *  Event content - month view
+ */
+
+div.nova-calendar.month-view .nc-event.starts {
   border-top-left-radius: var(--nc-event-border-radius);
   border-bottom-left-radius: var(--nc-event-border-radius);
 }
 
-div.nova-calendar .nc-event.ends {
+div.nova-calendar.month-view .nc-event.ends {
   border-top-right-radius: var(--nc-event-border-radius);
   border-bottom-right-radius: var(--nc-event-border-radius);
 }
 
-div.nova-calendar div.nc-event.clickable {
-  cursor: pointer;
+/*
+ *  Event content - week view
+ */
+
+div.nova-calendar.week-view .nc-event.starts {
+  border-top-left-radius: var(--nc-event-border-radius);
+  border-top-right-radius: var(--nc-event-border-radius);
+}
+
+div.nova-calendar.week-view .nc-event.ends  {
+  border-bottom-left-radius: var(--nc-event-border-radius);
+  border-bottom-right-radius: var(--nc-event-border-radius);
 }
 
+div.nova-calendar.week-view .nc-event:not(.starts):not(.ends) {
+  border-top-left-radius: var(--nc-event-border-radius);
+  border-top-right-radius: var(--nc-event-border-radius);
+  border-bottom-left-radius: var(--nc-event-border-radius);
+  border-bottom-right-radius: var(--nc-event-border-radius);
+}
+
+div.nova-calendar.week-view .nc-event:not(.starts):not(.ends) div.name {
+  font-weight: normal;
+  font-size: 9pt;
+  opacity: 0.8;
+  padding-top: 0.1em;
+}
+
+/*
+ *  Event content
+ */
+
+div.nova-calendar .nc-event div.content {
+  grid-row: 2 / 3;
+  grid-column: 1 / span 2;
+  align-items: start;
+  overflow: scroll;
+  border: 0px #f00 dashed;
+  padding-left: 0.2em;
+}
+
+div.nova-calendar div.nc-event span.time {
+  display: inline-block;
+  font-size: 9pt;
+  opacity: 0.8;
+  margin-right: 0.2em;
+}
+
+div.nova-calendar div.nc-event span.notes {
+  font-size: 9pt;
+  line-height: 10pt;
+}
 
 /*
  *  Events, single day
@@ -284,7 +476,7 @@ div.nova-calendar div.nc-event div.name {
   margin-left: 0.2em;
 }
 
-div.nova-calendar div.nc-event:not(.starts) div.name {
+div.nova-calendar .week.events div.nc-event:not(.starts) div.name {
   font-weight: normal;
   font-size: 9pt;
   opacity: 0.8;
@@ -324,31 +516,6 @@ div.nova-calendar div.nc-event div.badges span.badge {
 }
 
 
-/*
- *  Event content
- */
-
-div.nova-calendar .nc-event div.content {
-  grid-row: 2 / 3;
-  grid-column: 1 / span 2;
-  overflow: scroll;
-  border: 0px #f00 dashed;
-  padding-left: 0.2em;
-}
-
-div.nova-calendar div.nc-event span.time {
-  display: inline-block;
-  font-size: 9pt;
-  opacity: 0.8;
-  margin-right: 0.2em;
-}
-
-div.nova-calendar div.nc-event span.notes {
-  font-size: 9pt;
-  line-height: 10pt;
-}
-
-
 /*
  *  Events, multi day
  */
@@ -361,15 +528,6 @@ div.nova-calendar .nc-event.multi {
   grid-template-rows: auto;
 }
 
-div.nova-calendar .nc-event:not(.starts) {
-  border-left: 1px rgba(228,228,228,0.6) dashed;
-  opacity: 0.8;
-}
-
-div.nova-calendar .nc-event:not(.ends) {
-  border-right: 1px rgba(228,228,228,0.6) dashed;
-}
-
 div.nova-calendar div.nc-event.multi div.name {
   white-space: nowrap; 
   overflow: scroll;
@@ -389,4 +547,29 @@ div.nova-calendar div.nc-event.multi div.content {
   overflow: scroll;
   grid-row: 1 / -1;
   grid-column: 2 / 3;
-}
\ No newline at end of file
+}
+
+/*
+ *  Events, multi day - month view
+ */
+
+div.nova-calendar.month-view .nc-event:not(.starts) {
+  border-left: 1px rgba(228,228,228,0.6) dashed;
+  opacity: 0.8;
+}
+
+div.nova-calendar.month-view .nc-event:not(.ends) {
+  border-right: 1px rgba(228,228,228,0.6) dashed;
+}
+
+/*
+ *  Events, multi day - week view
+ */
+
+div.nova-calendar.week-view .nc-event:not(.starts) {
+  border-top: 1px rgba(228,228,228,0.6) dashed;
+}
+
+div.nova-calendar.week-view .nc-event:not(.ends) {
+  border-bottom: 1px rgba(228,228,228,0.6) dashed;
+}
diff --git a/resources/js/components/Month.vue b/resources/js/components/Month.vue
new file mode 100644
index 0000000..dc8f014
--- /dev/null
+++ b/resources/js/components/Month.vue
@@ -0,0 +1,431 @@
+/*
+ * © Copyright 2022 · Willem Vervuurt, Studio Delfuego
+ * 
+ * You can modify, use and distribute this package under one of two licenses:
+ * 1. GNU AGPLv3
+ * 2. A perpetual, non-revocable and 100% free (as in beer) do-what-you-want 
+ *    license that allows both non-commercial and commercial use, under conditions.
+ *    See LICENSE.md for details.
+ * 
+ *    (it boils down to: do what you want as long as you're building and/or
+ *     using calendar views, but don't embed this package or a modified version
+ *     of it in free or paid-for software libraries and packages aimed at developers).
+ */
+ 
+<template>
+  
+    <div id="nc-control">
+
+        <div class="left-items">
+            <a @click="prevMonth" href="#" class="button hover:bg-gray-100 dark:hover:bg-gray-700" title="Alt + ←">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+                </svg>
+            </a>
+
+            <a @click="reset" href="#" class="button hover:bg-gray-100 dark:hover:bg-gray-700" title="Alt + H">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="2" fill="currentColor" />
+                </svg>
+            </a>
+
+            <a @click="nextMonth" href="#" class="button hover:bg-gray-100 dark:hover:bg-gray-700" title="Alt + →">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+                </svg>
+            </a>
+
+            <h1 @click="reset" class="text-90 font-normal text-xl md:text-2xl noselect">
+                <span>{{ $data.title }}</span>
+            </h1>
+
+        </div>
+
+        <div class="center-items">
+        </div>
+
+        <div class="right-items">
+
+            <Dropdown v-if="Object.keys(availableFilters).length" :handle-internal-clicks="true" :class="{
+                'bg-primary-500 hover:bg-primary-600 border-primary-500':
+                    activeFilterKey != null,
+                'dark:bg-primary-500 dark:hover:bg-primary-600 dark:border-primary-500':
+                    activeFilterKey != null,
+            }" class="flex h-9 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" dusk="filter-selector">
+                <DropdownTrigger :class="{
+                    'text-white hover:text-white dark:text-gray-800 dark:hover:text-gray-800':
+                        activeFilterKey != null,
+                }" class="toolbar-button px-2">
+                    <Icon type="filter" />
+                    <span v-if="activeFilterKey != null" :class="{
+                        'text-white dark:text-gray-800': activeFilterKey != null,
+                    }" class="ml-2 font-bold" v-html="activeFilterLabel">
+                    </span>
+                </DropdownTrigger>
+
+                <template #menu>
+                    <DropdownMenu width="260">
+
+                        <ScrollWrap :height="350" class="bg-white dark:bg-gray-900">
+                            <div ref="theForm" class="divide-y divide-gray-200 dark:divide-gray-800 divide-solid">
+                                <div v-if="activeFilterKey != null" class="bg-gray-100">
+                                    <button
+                                        class="py-2 w-full block tracking-wide text-center text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none"
+                                        @click="chooseFilter(null)" v-html="$data.resetFiltersLabel">
+                                    </button>
+                                </div>
+
+                                <div>
+                                    <template v-for="(filterLabel, filterKey) in $data.availableFilters">
+                                        <button
+                                            class="py-2 w-full block dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-200"
+                                            :class="{ 'font-bold': activeFilterKey == filterKey }" v-html="filterLabel"
+                                            @click="chooseFilter(filterKey)">
+                                        </button>
+                                    </template>
+                                </div>
+
+                            </div>
+                        </ScrollWrap>
+                    </DropdownMenu>
+                </template>
+            </Dropdown>
+
+            <div v-if="calendarViews.length > 1">
+                <a v-for="view in calendarViews"
+                    href="#"
+                    @click="$emit('set-active-view', view)"
+                    class="button hover:bg-gray-100 dark:hover:bg-gray-700 ml-2"
+                    :class="[{ 'bg-primary-500 text-white': view === 'month' }]">
+                    <span class="font-bold capitalize">
+                        {{ __(view) }}
+                    </span>
+                </a>
+            </div>
+        </div>
+
+    </div>
+
+    <div style="width:100%;overflow:scroll">
+        <Card class="flex flex-col items-center justify-center dark:bg-gray-800"
+            style="min-height: 300px;min-width:800px;background-color:var(--bg-gray-800)">
+
+            <div class="nova-calendar month-view noselect" v-if="title.length">
+
+                <div :class="{ 'shouldShowWeekNumbers': shouldShowWeekNumbers }">
+
+                    <!-- week numbers column-->
+                    <div v-if="shouldShowWeekNumbers" class="border-gray-200 dark:border-gray-900 dark:text-gray-300">
+                    </div>
+
+                    <!-- weekday headers-->
+                    <div class="nc-header">
+                        <div v-for="column in $data.columns"
+                            class="border-gray-200 dark:border-gray-900 dark:text-gray-300"><span>{{ column }}</span>
+                        </div>
+                    </div>
+
+                </div>
+
+                <div class="nc-content">
+
+                    <!-- week wrapper -->
+                    <div v-for="(week, weekIndex) in $data.weeks"
+                        :class="{ 'shouldShowWeekNumbers': shouldShowWeekNumbers }">
+
+                        <div v-if="shouldShowWeekNumbers"
+                            class="weeknumber dark:bg-gray-900 dark:border-gray-800 nc-col-0">
+
+                            <!-- week numbers column-->
+                            <a v-if="this.weekViewEnabled"
+                                href="#"
+                                @click=chooseWeek(week.number)>
+                                <div class="weeknumberheader text-gray-400 button relative">
+                                    <div class="weeknumberlabel absolute w-full text-right">{{ __('W') }}{{ week.number }}
+                                    </div>
+                                </div>
+                            </a>
+                            <div v-else class="weeknumberheader text-gray-400 noselect relative">
+                                <div class="weeknumberlabel absolute w-full text-right">{{ __('W') }}{{ week.number }}
+                                </div>
+                            </div>
+
+                        </div>
+
+                        <!-- a cell per day, background -->
+                        <div class="week">
+                            <template v-for="day in week.days">
+                                <div class="day dark:bg-gray-900 dark:border-gray-800"
+                                    :class="['nc-col-' + day.weekdayColumn]"
+                                    v-bind:class="{ 'withinRange': day.isWithinRange, 'today': day.isToday }">
+                                    <div class="dayheader text-gray-400 noselect">
+                                        <span class="daylabel">{{ day.label }}</span>
+                                        <div class="badges">
+                                            <span class="badge-bg text-gray-200" v-for="badge in day.badges">
+                                                <Tooltip><template #content><span
+                                                            v-html="badge.tooltip"></span></template>
+                                                    <span class="badge" v-html="badge.badge"></span>
+                                                </Tooltip>
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+
+                            <!-- events, overlaid -->
+                            <div class="week-events">
+
+                                <!-- multi day events for all days first -->
+                                <template v-for="day in week.days">
+                                    <template v-for="event in day.eventsMultiDay">
+                                        <div :class="['nc-event', 'multi', 'nc-col-' + day.weekdayColumn, 'span-' + event.spansDaysN]"
+                                            @click="open($event, event.url)" :style="this.stylesForEvent(event)"
+                                            v-bind:class="{ 'clickable': event.url, 'starts': event.startsEvent, 'ends': event.endsEvent, 'withinRange': event.isWithinRange }">
+                                            <div class="name noscrollbar">{{ event.name }}</div>
+                                            <div class="badges noscrollbar">
+                                                <span v-if="event.startsEvent" class="badge-bg text-gray-200"
+                                                    v-for="badge in event.badges"><span class="badge"
+                                                        v-html="badge"></span></span>
+                                            </div>
+                                            <div class="content noscrollbar">
+                                                <template v-if="event.startsEvent && event.options.displayTime">
+                                                    <span class="time">{{ event.startTime }}</span>
+                                                </template>
+                                                <span v-if="event.startsEvent" class="notes"
+                                                    v-html="event.notes"></span>
+                                            </div>
+                                        </div>
+                                    </template>
+                                </template>
+
+                                <!-- then all single day events -->
+                                <template v-for="day in week.days">
+                                    <div :class="['single-day-events', 'nc-col-' + day.weekdayColumn]">
+                                        <template v-for="event in day.eventsSingleDay">
+                                            <div :class="['nc-event']" @click="open($event, event.url)"
+                                                :style="this.stylesForEvent(event)"
+                                                v-bind:class="{ 'clickable': event.url, 'starts': event.startsEvent, 'ends': event.endsEvent, 'withinRange': event.isWithinRange }">
+                                                <div class="name noscrollbar">{{ event.name }}</div>
+                                                <div class="badges" v-if="event.badges.length > 0">
+                                                    <span class="badge-bg text-gray-200"
+                                                        v-for="badge in event.badges"><span class="badge"
+                                                            v-html="badge"></span></span>
+                                                </div>
+                                                <div class="content noscrollbar">
+                                                    <template v-if="event.options.displayTime">
+                                                        <span class="time" v-if="event.endTime">{{ event.startTime }} -
+                                                            {{ event.endTime }}</span>
+                                                        <span class="time" v-else>{{ event.startTime }}</span>
+                                                    </template>
+                                                    <span class="notes" v-html="event.notes"></span>
+                                                </div>
+                                            </div>
+                                        </template>
+                                    </div>
+                                </template>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+        </Card>
+    </div>
+
+</template>
+
+<script>
+export default {
+
+    props: [
+        'calendarViews'
+    ],
+
+    emits: [
+        'set-active-view'
+    ],
+
+    mounted() {
+        this.init();
+
+        Nova.addShortcut('alt+right', event => { this.nextMonth(); });
+        Nova.addShortcut('alt+left', event => { this.prevMonth(); });
+        Nova.addShortcut('alt+h', event => { this.reset(); });
+    },
+
+    methods: {
+
+        reset() {
+            this.month = null;
+            this.year = null;
+            this.week = null;
+            this.reload();
+        },
+
+        init() {
+            if (this.hasStoredSettings()) {
+                this.restoreSettings();
+                this.reload(false);
+            }
+            else {
+                this.reload(true);
+            }
+        },
+
+        prevMonth() {
+            this.month -= 1;
+            this.reload();
+        },
+
+        nextMonth() {
+            this.month += 1;
+            this.reload();
+        },
+
+        chooseWeek(weekNo) {
+            this.week = weekNo;
+            this.$emit('set-active-view', 'week');
+        },
+
+        reload(isInitRequest = false) {
+            let vue = this;
+            vue.loading = true;
+
+            // Work out the apiPath from the current Tool path, this works
+            // because the ToolServiceProvider enforces that both use the same configurable uri part
+            let apiUrl = '/nova-vendor/wdelfuego/nova-calendar' + this.calendarUrl() + '/month?y=' + vue.year + '&m=' + vue.month;
+            if (vue.activeFilterKey) {
+                apiUrl += '&filter=' + vue.activeFilterKey;
+            }
+            else if (isInitRequest) {
+                apiUrl += '&isInitRequest=1';
+            }
+            Nova.request().get(apiUrl)
+                .then(response => {
+                    vue.styles = response.data.styles;
+                    vue.year = response.data.year;
+                    vue.month = response.data.month;
+                    vue.week = response.data.week;
+                    vue.resetFiltersLabel = response.data.resetFiltersLabel;
+                    vue.availableFilters = response.data.filters;
+                    vue.activeFilterKey = response.data.activeFilterKey;
+                    vue.shouldShowWeekNumbers = response.data.shouldShowWeekNumbers;
+                    vue.title = response.data.title;
+                    vue.columns = response.data.columns;
+                    vue.weeks = response.data.weeks;
+
+                    this.setFilter(vue.activeFilterKey);
+                    vue.loading = false;
+                    this.storeSettings();
+                });
+        },
+
+        open(e, url) {
+            if (e.metaKey || e.ctrlKey) {
+                window.open(Nova.url(url))
+            } else {
+                Nova.visit(url);
+            }
+        },
+
+        stylesForEvent(event) {
+            if (event.options.styles) {
+                let out = [this.styles.default];
+                event.options.styles.forEach(style => {
+                    if (this.styles[style] === undefined) {
+                        console.log("[nova-calendar] Unknown custom style name '" + style + "'; does the eventStyles method of your CalendarDataProvider define it properly?");
+                    }
+                    else {
+                        out.push(this.styles[style]);
+                    }
+                })
+                return out;
+            } else {
+                return this.styles.default;
+            }
+        },
+
+        chooseFilter(filterKey) {
+            this.setFilter(filterKey);
+            this.reload();
+        },
+
+        setFilter(filterKey) {
+            this.activeFilterKey = filterKey;
+            for (var filterKey in this.availableFilters) {
+                if (this.activeFilterKey == filterKey) {
+                    this.activeFilterLabel = this.availableFilters[filterKey];
+                }
+            }
+        },
+
+        calendarUrl() {
+            return window.location.pathname.substring(Nova.url('').length);
+        },
+
+        storageKey() {
+            return 'wdelfuego-nova-calendar-' + this.calendarUrl();
+        },
+
+        hasStoredSettings() {
+            return (localStorage.getItem(this.storageKey()) !== null);
+        },
+
+        storeSettings() {
+            localStorage.setItem(this.storageKey(), JSON.stringify({
+                year: this.year,
+                month: this.month,
+                week: this.week,
+                activeFilterKey: this.activeFilterKey
+            }));
+        },
+
+        restoreSettings() {
+            const storedData = JSON.parse(localStorage.getItem(this.storageKey()));
+            if (storedData) {
+                this.year = storedData.year;
+                this.month = storedData.month;
+                this.week = storedData.week;
+                this.activeFilterKey = storedData.activeFilterKey;
+            }
+        },
+
+    },
+
+    data() {
+        return {
+            loading: true,
+            resetFiltersLabel: 'All events',
+            availableFilters: {},
+            activeFilterKey: null,
+            activeFilterLabel: null,
+            shouldShowWeekNumbers: false,
+            title: '',
+            year: null,
+            month: null,
+            week: null,
+            columns: Array(7).fill('-'),
+            weeks: Array(6).fill(Array(7).fill({})),
+            styles: {
+                default: { color: '#fff', 'background-color': 'rgba(var(--colors-primary-500), 0.9)' }
+            }
+        }
+    },
+
+    computed: {
+        weekViewEnabled() {
+            return this.calendarViews.includes('week');
+        }
+    }
+
+}
+</script>
+
+<style>
+/* Scoped Styles */
+</style>
\ No newline at end of file
diff --git a/resources/js/components/Week.vue b/resources/js/components/Week.vue
new file mode 100644
index 0000000..ea9f2f6
--- /dev/null
+++ b/resources/js/components/Week.vue
@@ -0,0 +1,516 @@
+/*
+ * © Copyright 2022 · Willem Vervuurt, Studio Delfuego
+ * 
+ * You can modify, use and distribute this package under one of two licenses:
+ * 1. GNU AGPLv3
+ * 2. A perpetual, non-revocable and 100% free (as in beer) do-what-you-want 
+ *    license that allows both non-commercial and commercial use, under conditions.
+ *    See LICENSE.md for details.
+ * 
+ *    (it boils down to: do what you want as long as you're building and/or
+ *     using calendar views, but don't embed this package or a modified version
+ *     of it in free or paid-for software libraries and packages aimed at developers).
+ */
+ 
+<template>
+    <div id="nc-control">
+
+        <div class="left-items">
+            <a @click="prevWeek" href="#" class="button hover:bg-gray-100 dark:hover:bg-gray-700" title="Alt + ←">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+                </svg>
+            </a>
+
+            <a @click="reset" href="#" class="button hover:bg-gray-100 dark:hover:bg-gray-700" title="Alt + H">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="2" fill="currentColor" />
+                </svg>
+            </a>
+
+            <a @click="nextWeek" href="#" class="button hover:bg-gray-100 dark:hover:bg-gray-700" title="Alt + →">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+                </svg>
+            </a>
+
+            <h1 @click="reset" class="text-90 font-normal text-xl md:text-2xl noselect">
+                <span>{{ $data.title }}</span>
+            </h1>
+
+        </div>
+
+        <div class="center-items">
+        </div>
+
+        <div class="right-items">
+
+            <Dropdown v-if="Object.keys(availableFilters).length" :handle-internal-clicks="true" :class="{
+                'bg-primary-500 hover:bg-primary-600 border-primary-500':
+                    activeFilterKey != null,
+                'dark:bg-primary-500 dark:hover:bg-primary-600 dark:border-primary-500':
+                    activeFilterKey != null,
+            }" class="flex h-9 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" dusk="filter-selector">
+                <DropdownTrigger :class="{
+                    'text-white hover:text-white dark:text-gray-800 dark:hover:text-gray-800':
+                        activeFilterKey != null,
+                }" class="toolbar-button px-2">
+                    <Icon type="filter" />
+                    <span v-if="activeFilterKey != null" :class="{
+                        'text-white dark:text-gray-800': activeFilterKey != null,
+                    }" class="ml-2 font-bold" v-html="activeFilterLabel">
+                    </span>
+                </DropdownTrigger>
+
+                <template #menu>
+                    <DropdownMenu width="260">
+                        <ScrollWrap :height="350" class="bg-white dark:bg-gray-900">
+                            <div ref="theForm" class="divide-y divide-gray-200 dark:divide-gray-800 divide-solid">
+                                <div v-if="activeFilterKey != null" class="bg-gray-100">
+                                    <button
+                                        class="py-2 w-full block tracking-wide text-center text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none"
+                                        @click="chooseFilter(null)" v-html="$data.resetFiltersLabel">
+                                    </button>
+                                </div>
+
+                                <div>
+                                    <template v-for="(filterLabel, filterKey) in $data.availableFilters">
+                                        <button
+                                            class="py-2 w-full block dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-200"
+                                            :class="{ 'font-bold': activeFilterKey == filterKey }" v-html="filterLabel"
+                                            @click="chooseFilter(filterKey)">
+                                        </button>
+                                    </template>
+                                </div>
+
+                            </div>
+                        </ScrollWrap>
+                    </DropdownMenu>
+                </template>
+            </Dropdown>
+
+            <div v-if="calendarViews.length > 1">
+                <a v-for="view in calendarViews" href="#" @click="$emit('set-active-view', view)"
+                    class="button hover:bg-gray-100 dark:hover:bg-gray-700 ml-2"
+                    :class="[{ 'bg-primary-500 text-white': view === 'week' }]">
+                    <span class="font-bold capitalize">
+                        {{ __(view) }}
+                    </span>
+                </a>
+            </div>
+        </div>
+
+    </div>
+
+    <div style="width:100%;overflow:scroll">
+        <Card class="flex flex-col items-center justify-center dark:bg-gray-800"
+            style="min-height: 100px;min-width:800px;background-color:var(--bg-gray-800)">
+
+            <div class="nova-calendar week-view noselect">
+
+                <div class="nc-header">
+                    <div class="border-gray-200 dark:border-gray-900 dark:text-gray-300 nc-col-0">
+                        <span>{{ __('W') }}{{ this.week }}</span>
+                    </div>
+                    <div v-for="(column, index) in $data.columns"
+                        class="border-gray-200 dark:border-gray-900 dark:text-gray-300" :class="['nc-col-' + (index + 1)]">
+                        <span>{{ column }}</span>
+                    </div>
+                </div>
+
+                <!-- multi-day events part -->
+                <div class="week">
+                    <!-- multi-day background -->
+                    <div v-for="day in $data.weekData" class="day multi dark:border-gray-800 withinRange"
+                        :class="['nc-col-' + day.weekdayColumn]" v-bind:class="{ 'today': day.isToday }">
+                    </div>
+
+                    <!-- multi-da events, overlaid -->
+                    <div class="week-events">
+
+                        <div class="rotated dark:bg-gray-900 nc-col-0">
+                            <div class="rotated-header text-gray-400 noselect relative">
+                                <div class="rotated-label dark:bg-gray-900 nc-col-0">{{ __('All day') }}</div>
+                            </div>
+                        </div>
+
+                        <!-- col with events -->
+                        <template v-for="day in $data.weekData">
+
+                            <div :class="['nc-col-' + day.weekdayColumn]" v-bind:class="{ 'today': day.isToday }">
+                                <button v-if="this.dayViewEnabled"
+                                    @click="$emit('set-active-view', 'day')">
+                                    <div class="dayheader text-gray-400 noselect">
+                                        <span class="daylabel">{{ day.label }}</span>
+                                        <div class="badges noscrollbar">
+                                            <span class="badge-bg text-gray-200" v-for="badge in day.badges">
+                                                <Tooltip><template #content><span v-html="badge.tooltip"></span></template>
+                                                    <span class="badge" v-html="badge.badge"></span>
+                                                </Tooltip>
+                                            </span>
+                                        </div>
+                                    </div>
+                                </button>
+                                <div v-else class="dayheader text-gray-400 noselect">
+                                    <span class="daylabel">{{ day.label }}</span>
+                                    <div class="badges">
+                                        <span class="badge-bg text-gray-200" v-for="badge in day.badges">
+                                            <Tooltip><template #content><span v-html="badge.tooltip"></span></template>
+                                                <span class="badge" v-html="badge.badge"></span>
+                                            </Tooltip>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- multi-day events -->
+                            <template v-for="event in day.eventsMultiDay">
+                                <div :class="['nc-event', 'multi', 'nc-col-' + day.weekdayColumn, 'span-' + event.spansDaysN]"
+                                    @click="open($event, event.url)" :style="this.stylesForEvent(event)"
+                                    v-bind:class="{ 'clickable': event.url, 'starts': event.startsEvent, 'ends': event.endsEvent, 'withinRange': event.isWithinRange }">
+                                    <div class="name noscrollbar">{{ event.name }}</div>
+                                    <div class="badges noscrollbar">
+                                        <span class="badge-bg text-gray-200" v-for="badge in event.badges"><span
+                                                class="badge" v-html="badge"></span></span>
+                                    </div>
+                                    <div class="content noscrollbar">
+                                        <template v-if="event.options.displayTime">
+                                            <span class="time">{{ event.startDate }} {{ event.startTime }}</span>
+                                        </template>
+                                        <span class="notes">{{ event.notes }}</span>
+                                    </div>
+                                </div>
+                            </template>
+
+                        </template>
+                    </div>
+
+                </div>
+
+                <!-- single-day events part -->
+                <div class="week" :style="['grid-template-rows: repeat(' + this.gridRows + ', 10px);']">
+
+                    <!-- col with hour labels -->
+                    <template v-for="slot in $data.timeline">
+                        <template v-if="slotIsShown(slot.hour, slot.minute)">
+                            <div class="hour-label dark:bg-gray-900 dark:border-gray-800 nc-col-0"
+                                :style="['grid-row: ' + rowForTime(slot.hour, slot.minute) + ' / ' + rowForTime(slot.hour, (slot.minute + this.layout.timelineInterval)) + ';']">
+                                <div v-if="withinTimeline(slot.hour, slot.minute)">{{ slot.hour_minute }}</div>
+                            </div>
+                        </template>
+                    </template>
+
+                    <!-- cols with single-day events -->
+                    <template v-for="day in $data.weekData">
+
+                        <template v-for="slot in $data.timeline">
+                            <template v-if="slotIsShown(slot.hour, slot.minute)">
+                                <div class="slot dark:border-gray-800 dark:bg-gray-900"
+                                    :class="['nc-col-' + day.weekdayColumn]" v-bind:class="{ 'withinRange': slot.is_open }"
+                                    :style="['grid-row: ' + rowForTime(slot.hour, slot.minute) + ' / ' + rowForTime(slot.hour, (slot.minute + this.layout.timelineInterval)) + ';']">
+                                </div>
+                            </template>
+                        </template>
+
+                        <div :class="['nc-col-' + day.weekdayColumn]"
+                            :style="['grid-row: 1 / span ' + this.gridRows + ';', 'display: grid;', 'grid-template-rows: repeat(' + this.gridRows + ', 10px);']">
+                            <template v-for="event in day.eventsSingleDay">
+                                <div :class="['nc-event']" @click="open($event, event.url)" 
+                                    :style="[
+                                        this.stylesForEvent(event),
+                                        'grid-row-start: ' + eventStartRow(event.startHour, event.startMinute) + ';',
+                                        'grid-row-end: ' + eventEndRow(event.startHour, (event.startMinute + event.durationInMinutes)) + ';'
+                                        
+                                    ]"
+                                    v-bind:class="{ 'clickable': event.url, 'starts': withinView(event.startHour, event.startMinute), 'ends': withinView(event.startHour, event.startMinute + event.durationInMinutes), 'withinRange': event.isWithinRange }">
+                                    <div class="name noscrollbar">{{ event.name }}</div>
+                                    <div class="badges">
+                                        <span class="badge-bg text-gray-200" v-for="badge in event.badges"><span
+                                                class="badge" v-html="badge"></span></span>
+                                    </div>
+                                    <div class="content noscrollbar">
+                                        <template v-if="event.options.displayTime">
+                                            <span class="time" v-if="event.endTime">{{ event.startTime }}-{{ event.endTime
+                                            }}</span>
+                                            <span class="time" v-else>{{ event.startTime }}</span>
+                                        </template>
+                                        <span class="notes">{{ event.notes }}</span>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </Card>
+    </div>
+</template>
+
+<script>
+export default {
+
+    props: [
+        'calendarViews'
+    ],
+
+    emits: [
+        'set-active-view'
+    ],
+
+    mounted() {
+        this.init();
+
+        Nova.addShortcut('alt+right', event => { this.nextWeek(); });
+        Nova.addShortcut('alt+left', event => { this.prevWeek(); });
+        Nova.addShortcut('alt+h', event => { this.reset(); });
+    },
+
+    methods: {
+
+        reset() {
+            this.year = null;
+            this.month = null;
+            this.week = null;
+            this.reload();
+        },
+
+        init() {
+            if (this.hasStoredSettings()) {
+                this.restoreSettings();
+                this.reload(false);
+            }
+            else {
+                this.reload(true);
+            }
+        },
+
+        prevWeek() {
+            this.week -= 1;
+            this.reload();
+        },
+
+        nextWeek() {
+            this.week += 1;
+            this.reload();
+        },
+
+        reload(isInitRequest = false) {
+            let vue = this;
+            vue.loading = true;
+
+            // Work out the apiPath from the current Tool path, this works
+            // because the ToolServiceProvider enforces that both use the same configurable uri part
+            let apiUrl = '/nova-vendor/wdelfuego/nova-calendar' + this.calendarUrl() + '/week?y=' + vue.year + '&w=' + vue.week;
+            if (vue.activeFilterKey) {
+                apiUrl += '&filter=' + vue.activeFilterKey;
+            }
+            else if (isInitRequest) {
+                apiUrl += '&isInitRequest=1';
+            }
+            Nova.request().get(apiUrl)
+                .then(response => {
+                    vue.styles = response.data.styles;
+                    vue.year = response.data.year;
+                    vue.month = response.data.month;
+                    vue.week = response.data.week;
+                    vue.resetFiltersLabel = response.data.resetFiltersLabel;
+                    vue.availableFilters = response.data.filters;
+                    vue.activeFilterKey = response.data.activeFilterKey;
+                    vue.shouldShowWeekNumbers = response.data.shouldShowWeekNumbers;
+                    vue.title = response.data.title;
+                    vue.columns = response.data.columns;
+                    vue.layout = response.data.layout;
+                    vue.weekData = response.data.weekData;
+                    vue.timeline = response.data.timeline;
+
+                    this.setFilter(vue.activeFilterKey);
+                    vue.loading = false;
+                    this.storeSettings();
+                });
+        },
+
+        open(e, url) {
+            if (e.metaKey || e.ctrlKey) {
+                window.open(Nova.url(url))
+            } else {
+                Nova.visit(url);
+            }
+        },
+
+        stylesForEvent(event) {
+            if (event.options.styles) {
+                let out = [this.styles.default];
+                event.options.styles.forEach(style => {
+                    if (this.styles[style] === undefined) {
+                        console.log("[nova-calendar] Unknown custom style name '" + style + "'; does the eventStyles method of your CalendarDataProvider define it properly?");
+                    }
+                    else {
+                        out.push(this.styles[style]);
+                    }
+                })
+                return out;
+            } else {
+                return this.styles.default;
+            }
+        },
+
+        chooseFilter(filterKey) {
+            this.setFilter(filterKey);
+            this.reload();
+        },
+
+        setFilter(filterKey) {
+            this.activeFilterKey = filterKey;
+            for (var filterKey in this.availableFilters) {
+                if (this.activeFilterKey == filterKey) {
+                    this.activeFilterLabel = this.availableFilters[filterKey];
+                }
+            }
+        },
+
+        calendarUrl() {
+            return window.location.pathname.substring(Nova.url('').length);
+        },
+
+        storageKey() {
+            return 'wdelfuego-nova-calendar-' + this.calendarUrl();
+        },
+
+        hasStoredSettings() {
+            return (localStorage.getItem(this.storageKey()) !== null);
+        },
+
+        storeSettings() {
+            localStorage.setItem(this.storageKey(), JSON.stringify({
+                year: this.year,
+                month: this.month,
+                week: this.week,
+                activeFilterKey: this.activeFilterKey
+            }));
+        },
+
+        restoreSettings() {
+            const storedData = JSON.parse(localStorage.getItem(this.storageKey()));
+            if (storedData) {
+                this.year = storedData.year;
+                this.month = storedData.month;
+                this.week = storedData.week;
+                this.activeFilterKey = storedData.activeFilterKey;
+            }
+        },
+
+        minuteForTime(hour, minute) {
+            return hour * 60 + minute;
+        },
+
+        rowForTime(hour, minute) {
+            return Math.round(this.minuteForTime(hour, minute) / 10) - this.morningOffsetRow + 1;
+        },
+
+        eventStartRow(hour, minute) {
+            let row = this.rowForTime(hour, minute);
+
+            if (row < 1) {
+                return 1;
+            }
+
+            if (row > this.gridRows - 2) {
+                return this.gridRows - 2;
+            }
+
+            return row;
+        },
+
+        eventEndRow(hour, minute) {
+            let row = this.rowForTime(hour, minute);
+
+            if (row < 3) {
+                return 3;
+            }
+
+            if (row > this.gridRows) {
+                return -1;
+            }
+            return row;
+        },
+
+        withinTimeline(hour, minute) {
+            return ((this.minuteForTime(hour, minute) >= this.openingMinute) && (this.minuteForTime(hour, minute) <= this.closingMinute));
+        },
+
+        withinView(hour, minute) {
+            return ((this.minuteForTime(hour, minute) > this.morningOffset) && (this.minuteForTime(hour, minute) < this.eveningOffset));
+        },
+
+        slotIsShown(hour, minute) {
+            let slot = this.minuteForTime(hour, minute);
+            return ((slot >= this.morningOffset) && (slot < this.eveningOffset));
+        }
+
+    },
+
+    data() {
+        return {
+            loading: true,
+            resetFiltersLabel: 'All events',
+            availableFilters: {},
+            activeFilterKey: null,
+            activeFilterLabel: null,
+            shouldShowWeekNumbers: false,
+            title: '',
+            year: null,
+            month: null,
+            week: null,
+            columns: Array(7).fill('-'),
+            layout: Array(),
+            weekData: (Array(7).fill({})),
+            timeline: Array(),
+            styles: {
+                default: { color: '#fff', 'background-color': 'rgba(var(--colors-primary-500), 0.9)' }
+            }
+        }
+    },
+
+    computed: {
+        openingMinute() {
+            return this.layout.openingHour * 60
+        },
+
+        closingMinute() {
+            return this.layout.closingHour * 60
+        },
+
+        morningOffset() {
+            return this.openingMinute - 60;
+        },
+
+        eveningOffset() {
+            return this.closingMinute + 60;
+        },
+
+        morningOffsetRow() {
+            return this.morningOffset / 10;
+        },
+
+        eveningOffsetRow() {
+            return this.eveningOffset / 10;
+        },
+
+        gridRows() {
+            return 145 - (this.morningOffsetRow + 145 - this.eveningOffsetRow);
+        },
+
+        dayViewEnabled() {
+            return this.calendarViews.includes('day');
+        },
+    }
+
+}
+</script>
+
+<style>
+/* Scoped Styles */
+</style>
\ No newline at end of file
diff --git a/resources/js/pages/Tool.vue b/resources/js/pages/Tool.vue
index 9d1e8ca..46bfbe7 100644
--- a/resources/js/pages/Tool.vue
+++ b/resources/js/pages/Tool.vue
@@ -13,364 +13,105 @@
  */
  
 <template>
-  <div>
-    <Head :title="$data.windowTitle || $data.title" />
-
-    <div id="nc-control">
+  <LoadingView :loading="loading">
+    <Head :title="$data.windowTitle" />
     
-      <div class="left-items">
-        <a @click="prevMonth" href="#" class="button hover:bg-gray-100 dark:hover:bg-gray-700" title="Alt + ←">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" /></svg>
-        </a>
-
-        <a @click="reset" href="#" class="button hover:bg-gray-100 dark:hover:bg-gray-700" title="Alt + H">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="2" fill="currentColor"/></svg>
-        </a>
-          
-        <a @click="nextMonth" href="#" class="button hover:bg-gray-100 dark:hover:bg-gray-700" title="Alt + →">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M5 5l7 7-7 7" /></svg>
-        </a>
-        
-        <h1 @click="reset" class="text-90 font-normal text-xl md:text-2xl noselect">
-          <span>{{ $data.title }}</span>
-        </h1>
-
-      </div>
-
-      <div class="center-items">
-      </div>
-      
-      <div class="right-items">
-
-        <Dropdown
-          v-if="Object.keys(availableFilters).length"
-          :handle-internal-clicks="true"
-          :class="{
-            'bg-primary-500 hover:bg-primary-600 border-primary-500':
-              activeFilterKey != null,
-            'dark:bg-primary-500 dark:hover:bg-primary-600 dark:border-primary-500':
-              activeFilterKey != null,
-          }"
-          class="flex h-9 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
-          dusk="filter-selector"
-        >
-          <DropdownTrigger
-            :class="{
-              'text-white hover:text-white dark:text-gray-800 dark:hover:text-gray-800':
-                activeFilterKey != null,
-            }"
-            class="toolbar-button px-2"
-          >
-            <Icon type="filter" />
-            <span
-              v-if="activeFilterKey != null"
-              :class="{
-                'text-white dark:text-gray-800': activeFilterKey != null,
-              }"
-              class="ml-2 font-bold"
-              v-html="activeFilterLabel"
-            >
-            </span>
-          </DropdownTrigger>
-
-          <template #menu>
-            <DropdownMenu width="260">
-
-              <ScrollWrap :height="350" class="bg-white dark:bg-gray-900">
-                <div
-                  ref="theForm"
-                  class="divide-y divide-gray-200 dark:divide-gray-800 divide-solid"
-                >
-                  <div v-if="activeFilterKey != null" class="bg-gray-100">
-                    <button
-                      class="py-2 w-full block tracking-wide text-center text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none"
-                      @click="chooseFilter(null)"
-                      v-html="$data.resetFiltersLabel"
-                    >
-                    </button>
-                  </div>
-
-                  <div>
-                    <template v-for="(filterLabel, filterKey) in $data.availableFilters">
-                      <button
-                        class="py-2 w-full block dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-200"
-                        :class="{'font-bold': activeFilterKey == filterKey}"
-                        v-html="filterLabel"
-                        @click="chooseFilter(filterKey)"
-                      >
-                      </button>
-                    </template>
-                  </div>
-
-                </div>
-              </ScrollWrap>
-            </DropdownMenu>
-          </template>
-        </Dropdown>
-  
+    <component 
+      :is="activeView"
+      :calendar-views="calendarViews"
+      @set-active-view="setActiveView">
+    </component>
 
-      </div>
-      
-    </div>
-    
-    <div style="width:100%;overflow:scroll">
-      <Card
-        class="flex flex-col items-center justify-center dark:bg-gray-800"
-        style="min-height: 300px;min-width:800px;background-color:var(--bg-gray-800)"
-      >
-
-        <div class="nova-calendar noselect" v-if="title.length">
-
-          <div class="nc-header">
-            <div v-for="column in $data.columns" class="border-gray-200 dark:border-gray-900 dark:text-gray-300"><span>{{ column }}</span></div>
-          </div>
-
-          <div class="nc-content">
-
-            <!-- week wrapper -->
-            <div v-for="(week, weekIndex) in $data.weeks" class="week">
+  </LoadingView>
+</template>
 
-              <!-- a cell per day, background -->
-              <template v-for="day in week">
-                <div class="day dark:bg-gray-900 dark:border-gray-800"  :class="['nc-col-'+day.weekdayColumn]" v-bind:class="{'withinRange': day.isWithinRange, 'today': day.isToday }">
-                  <div class="dayheader text-gray-400 noselect">
-                    <span class="daylabel">{{ day.label }}</span>
-                    <div class="badges">
-                      <span class="badge-bg text-gray-200" v-for="badge in day.badges">
-                        <Tooltip><template #content><span v-html="badge.tooltip"></span></template>
-                          <span class="badge" v-html="badge.badge"></span>
-                        </Tooltip>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </template>
-              
-              <!-- events, overlaid -->
-              <div class="week-events">
-                
-                <!-- multi day events for all days first -->
-                <template v-for="day in week">
-                  <template v-for="event in day.eventsMultiDay">
-                    <div :class="['nc-event','multi','nc-col-'+day.weekdayColumn,'span-'+event.spansDaysN]" @click="open($event, event.url)" :style="this.stylesForEvent(event)" v-bind:class="{'clickable': event.url, 'starts': event.startsEvent, 'ends': event.endsEvent, 'withinRange': event.isWithinRange }">
-                      <div class="name noscrollbar">{{ event.name }}</div>
-                      <div class="badges noscrollbar">
-                        <span v-if="event.startsEvent" class="badge-bg text-gray-200" v-for="badge in event.badges"><span class="badge" v-html="badge"></span></span>
-                      </div>
-                      <div class="content noscrollbar">
-                        <template v-if="event.startsEvent && event.options.displayTime">
-                          <span class="time">{{ event.startTime }}</span>
-                        </template>
-                        <span v-if="event.startsEvent" class="notes" v-html="event.notes"></span>
-                      </div>
-                    </div>
-                  </template>
-                </template>
-                
-                <!-- then all single day events -->
-                <template v-for="day in week">
-                  <div :class="['single-day-events','nc-col-'+day.weekdayColumn]">
-                    <template v-for="event in day.eventsSingleDay">
-                      <div :class="['nc-event']" @click="open($event, event.url)" :style="this.stylesForEvent(event)" v-bind:class="{'clickable': event.url, 'starts': event.startsEvent, 'ends': event.endsEvent, 'withinRange': event.isWithinRange }">
-                        <div class="name noscrollbar">{{ event.name }}</div>
-                        <div class="badges" v-if="event.badges.length > 0">
-                          <span class="badge-bg text-gray-200" v-for="badge in event.badges"><span class="badge" v-html="badge"></span></span>
-                        </div>
-                        <div class="content noscrollbar">
-                          <template v-if="event.options.displayTime">
-                            <span class="time" v-if="event.endTime">{{ event.startTime }} - {{ event.endTime }}</span>
-                            <span class="time" v-else>{{ event.startTime }}</span>
-                          </template>
-                          <span class="notes" v-html="event.notes"></span>
-                        </div>
-                      </div>
-                    </template>
-                  </div>
-                </template>
-                
-              </div>
+<script>
 
-            </div>
-          </div>
+import Month from '../components/Month'
+import Week from '../components/Week'
 
-        </div>
+export default {
+  components: {
+    Month, Week
+  },
 
-      </Card>
-    </div>
-    
-  </div>
-</template>
+  data() {
+    return {
+      loading: true,
+      calendarViews: Array(),
+      windowTitle: '',
+      activeView: null,
+    }
+  },
 
-<script>
-export default {
-        
   mounted() {
     this.init();
-    
-    Nova.addShortcut('alt+right', event => {  this.nextMonth(); });
-    Nova.addShortcut('alt+left', event => {   this.prevMonth(); });
-    Nova.addShortcut('alt+h', event =>    {   this.reset(); });
   },
 
   methods: {
-
-    reset() {
-      this.month = null;
-      this.year = null;
-      this.reload();
-    },
-        
     init() {
-      if(this.hasStoredSettings()) {
+      if (this.hasStoredSettings()) {
         this.restoreSettings();
         this.reload(false);
       }
-      else
-      {
+      else {
         this.reload(true);
       }
     },
 
-    prevMonth() {
-      this.month -= 1;
-      this.reload();
-    },
-  
-    nextMonth() {
-      this.month += 1;
-      this.reload();
-    },
-
     reload(isInitRequest = false) {
       let vue = this;
       vue.loading = true;
-      
-      // Work out the apiPath from the current Tool path, this works
-      // because the ToolServiceProvider enforces that both use the same configurable uri part
-      let apiUrl = '/nova-vendor/wdelfuego/nova-calendar' + this.calendarUrl() + '/month?y='+vue.year+'&m='+vue.month;
-      if(vue.activeFilterKey) {
-        apiUrl += '&filter='+vue.activeFilterKey;
-      }
-      else if(isInitRequest) {
-        apiUrl += '&isInitRequest=1';
-      }
+
+      let apiUrl = '/nova-vendor/wdelfuego/nova-calendar' + this.calendarUrl() + '/calendar-views/'
+
       Nova.request().get(apiUrl)
         .then(response => {
-            vue.styles = response.data.styles;
-            vue.year = response.data.year;
-            vue.month = response.data.month;
-            vue.windowTitle = response.data.windowTitle;
-            vue.resetFiltersLabel = response.data.resetFiltersLabel;
-            vue.availableFilters = response.data.filters;
-            vue.activeFilterKey = response.data.activeFilterKey;
-            vue.title = response.data.title;
-            vue.columns = response.data.columns;
-            vue.weeks = response.data.weeks;
-            
-            this.setFilter(vue.activeFilterKey);
-            vue.loading = false;
-            this.storeSettings();
-        });
-    },
-    
-    open(e, url) {
-      if (e.metaKey || e.ctrlKey) {
-        window.open(Nova.url(url))
-      } else {
-        Nova.visit(url);
-      }
-    },
+          vue.calendarViews = response.data.calendar_views;
+          vue.windowTitle = response.data.windowTitle;
 
-    stylesForEvent(event) {
-      if(event.options.styles) {
-        let out = [this.styles.default];
-        event.options.styles.forEach(style => {
-          if(this.styles[style] === undefined)
-          {
-            console.log("[nova-calendar] Unknown custom style name '" + style + "'; does the eventStyles method of your CalendarDataProvider define it properly?");
-          }
-          else
-          {
-            out.push(this.styles[style]);
+          if (isInitRequest) {
+            this.setActiveView(vue.calendarViews[0]);
+          } else {
+            this.setActiveView(this.activeView);
           }
-        })
-        return out;
-      } else {
-        return this.styles.default;
-      }
-    },
-    
-    chooseFilter(filterKey) {
-      this.setFilter(filterKey);
-      this.reload();
+
+          vue.loading = false;
+        });
     },
-    
-    setFilter(filterKey) {
-      this.activeFilterKey = filterKey;
-      for(var filterKey in this.availableFilters)
-      {
-        if(this.activeFilterKey == filterKey)
-        {
-          this.activeFilterLabel = this.availableFilters[filterKey];
-        }
-      }
+
+    setActiveView(view) {
+      this.activeView = view;
+      this.storeSettings();
     },
-    
+
     calendarUrl() {
       return window.location.pathname.substring(Nova.url('').length);
     },
-    
+
     storageKey() {
-      return 'wdelfuego-nova-calendar-' + this.calendarUrl();
+      return 'wdelfuego-nova-calendar-' + this.calendarUrl() + '-views';
     },
-    
-    hasStoredSettings() { 
+
+    hasStoredSettings() {
       return (localStorage.getItem(this.storageKey()) !== null);
     },
-    
+
     storeSettings() {
       localStorage.setItem(this.storageKey(), JSON.stringify({
-        year: this.year,
-        month: this.month,
-        activeFilterKey: this.activeFilterKey
+        activeView: this.activeView
       }));
     },
-    
+
     restoreSettings() {
       const storedData = JSON.parse(localStorage.getItem(this.storageKey()));
       if (storedData) {
-        this.year = storedData.year;
-        this.month = storedData.month;
-        this.activeFilterKey = storedData.activeFilterKey;
+        this.activeView = storedData.activeView;
       }
     },
-    
-  },
-
-  props: {
-
-  },
-
-  data () {
-      return {
-          loading: true,
-          resetFiltersLabel: 'All events',
-          availableFilters: {},
-          activeFilterKey: null,
-          activeFilterLabel: null,
-          year: null,
-          month: null,
-          windowTitle: '',
-          title: '',
-          columns: Array(7).fill('-'),
-          weeks: Array(6).fill(Array(7).fill({})),
-          styles: {
-            default: { color: '#fff', 'background-color': 'rgba(var(--colors-primary-500), 0.9)' }
-          }
-      }
   }
-
 }
+
 </script>
 
 <style>
diff --git a/routes/api.php b/routes/api.php
index 3fd181c..db747d9 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -18,4 +18,5 @@
 use Illuminate\Support\Facades\Route;
 use Wdelfuego\NovaCalendar\Http\Controllers\CalendarController;
 
+Route::get('/calendar-views/', [CalendarController::class, 'getCalendarViews']);
 Route::get('/{view}/', [CalendarController::class, 'getCalendarData']);
diff --git a/src/CalendarDay.php b/src/CalendarDay.php
index 3a10287..66dbd68 100644
--- a/src/CalendarDay.php
+++ b/src/CalendarDay.php
@@ -38,6 +38,20 @@ public static function forDateInYearAndMonth(Carbon $date, int $year, int $month
             $date->isWeekend(),
         );
     }
+
+    public static function forDateInYearAndWeek(Carbon $date, int $year, int $week, int $firstDayOfWeek = null): self
+    {
+        $firstDayOfWeek = $firstDayOfWeek ?? NovaCalendar::MONDAY;
+
+        return new self(
+            $date->copy()->setTime(0, 0),
+            self::weekdayColumn($date, $firstDayOfWeek),
+            $date->format('j'),
+            $date->year == $year && $date->week == $week,
+            $date->isToday(),
+            $date->isWeekend(),
+        );
+    }
     
     public static function weekdayColumn(Carbon $date, int $firstDayOfWeek = 1) : int
     {
diff --git a/src/Contracts/CalendarDataProviderInterface.php b/src/Contracts/CalendarDataProviderInterface.php
index eb1db8e..3567fad 100644
--- a/src/Contracts/CalendarDataProviderInterface.php
+++ b/src/Contracts/CalendarDataProviderInterface.php
@@ -22,10 +22,16 @@ public function __construct();
 
     // Will be used for the browser window/tab title
     public function windowTitle() : string;
-    
+   
     // Will be displayed above the calendar
     public function titleForView(string $viewSpecifier) : string;
-    
+
+    // Trigers Week numbers to be displayed
+    public function shouldShowWeekNumbers(): bool;
+
+    // A 1D array of calendar views to be rendered
+    public function calendarViews(): array;
+
     // A 1D array with the names of the seven days of the week, in order of display L -> R
     public function daysOfTheWeek() : array;
     
diff --git a/src/DataProvider/AbstractCalendarDataProvider.php b/src/DataProvider/AbstractCalendarDataProvider.php
index fc05f8b..3796d90 100644
--- a/src/DataProvider/AbstractCalendarDataProvider.php
+++ b/src/DataProvider/AbstractCalendarDataProvider.php
@@ -76,7 +76,17 @@ public function windowTitle() : string
     {
         return $this->configValue('windowTitle') ?? '';
     }
-    
+
+    public function shouldShowWeekNumbers() : bool
+    {
+        return $this->configValue('shouldShowWeekNumbers') ?? true;
+    }
+
+    public function calendarViews(): array
+    {
+        return $this->configValue('calendarViews') ?? [];
+    }
+
     public function timezone(): string
     {
         return config('app.timezone') ?? 'UTC';
@@ -84,11 +94,11 @@ public function timezone(): string
     
     public function titleForView(string $viewSpecifier) : string
     {
-        if($viewSpecifier == View::MONTH)
+        if($viewSpecifier == View::MONTH || $viewSpecifier == View::WEEK)
         {
             return ucfirst($this->startOfRange()->translatedFormat('F \'y'));
         }
-        
+
         return __('Calendar');
     }
     
diff --git a/src/Event.php b/src/Event.php
index d532507..a35ee11 100644
--- a/src/Event.php
+++ b/src/Event.php
@@ -16,7 +16,7 @@
  
 namespace Wdelfuego\NovaCalendar;
 
-use DateTimeInterface;
+use Carbon\CarbonInterface;
 use Illuminate\Support\Carbon;
 use Illuminate\Database\Eloquent\Model as EloquentModel;
 use Laravel\Nova\Resource as NovaResource;
@@ -45,8 +45,8 @@ public static function fromResource(NovaResource $resource, string $dateAttribut
     
     public function __construct(
         string $name, 
-        DateTimeInterface $start,
-        DateTimeInterface $end = null, 
+        CarbonInterface $start,
+        CarbonInterface $end = null, 
         string $notes = '', 
         array $badges = [])
     {
@@ -63,6 +63,9 @@ public function toArray(Carbon $displayDate, Carbon $startOfRange, Carbon $endOf
             'name' => $this->name,
             'startDate' => $this->start->format("Y-m-d"),
             'startTime' => $this->start->format($this->timeFormat),
+            'startHour' => intval($this->start->format("G")),
+            'startMinute' => intval($this->start->format("i")),
+            'durationInMinutes' => $this->end ? $this->end->diffInMinutes($this->start): 0,
             'endDate' => $this->end ? $this->end->format("Y-m-d") : null,
             'endTime' => $this->end ? $this->end->format($this->timeFormat) : null,
             'isWithinRange' => $this->touchesRange($startOfRange, $endOfRange),
@@ -249,7 +252,7 @@ public function withTimeFormat(string $v)
         return $this;
     }
     
-    public function start(DateTimeInterface $v = null) : DateTimeInterface
+    public function start(CarbonInterface $v = null) : CarbonInterface
     {
         if(!is_null($v)) {
             $this->start = $v;
@@ -258,13 +261,13 @@ public function start(DateTimeInterface $v = null) : DateTimeInterface
         return $this->start;
     }
     
-    public function withStart(DateTimeInterface $v) : self
+    public function withStart(CarbonInterface $v) : self
     {
         $this->start($v);
         return $this;
     }
 
-    public function end(DateTimeInterface $v = null) : ?DateTimeInterface
+    public function end(CarbonInterface $v = null) : ?CarbonInterface
     {
         if(!is_null($v)) {
             $this->end = $v;
@@ -273,7 +276,7 @@ public function end(DateTimeInterface $v = null) : ?DateTimeInterface
         return $this->end;
     }
     
-    public function withEnd(DateTimeInterface $v) : self
+    public function withEnd(CarbonInterface $v) : self
     {
         $this->end($v);
         return $this;
diff --git a/src/Http/Controllers/CalendarController.php b/src/Http/Controllers/CalendarController.php
index 70095a4..f7683c1 100644
--- a/src/Http/Controllers/CalendarController.php
+++ b/src/Http/Controllers/CalendarController.php
@@ -80,6 +80,59 @@ public function getCalendarData(string $view = 'month')
         $view->initFromRequest($this->request);
         return $view->calendarData($this->request, $dataProvider);
     }
-    
+
+    /**
+     * gets calendar views defined by in nova-calendar config file and checked against allowed calendar views.
+     *
+     * @return array
+     */
+    public function getCalendarViews(): array
+    {
+        $requestUri = substr($this->request->url(), strlen($this->request->schemeAndHttpHost()));
+
+        // Get calendar URI from full request URI by ditching the prefix and the last path element (view)
+        $calendarUri = substr($requestUri, strlen(self::API_PATH_PREFIX));
+        $calendarUri = substr($calendarUri, 0, strrpos($calendarUri, '/'));
+
+        $dataProvider = $this->getCalendarDataProviderForUri($calendarUri)->withRequest($this->request);
+
+        return [
+            'calendar_views' => $this->sanitizeCalendarViews($dataProvider->calendarViews()),
+            'windowTitle' => $dataProvider->windowTitle(),
+        ];
+    }
+
+    /**
+     * Sanitizes array of provided calendar views. Chcecks if view name exists in View::VIEWS constant, removes duplicates, 
+     * throws an exception, if wrong view name defined in config/nova-calendar.php file.
+     *
+     * @param  array $cv
+     * @return array
+     */
+    protected function sanitizeCalendarViews(array $cv): array
+    {
+        if (empty($cv)) {
+            return View::VIEWS;
+        }
+
+        $out = [];
+        foreach ($cv as $view) {
+            if (View::isValidView($view))
+            {
+                if (!in_array($view, $out))
+                {
+                    $out[] = $view;
+                }
+            } else {
+                throw new \Exception("Unknown view: $view");
+            }
+        }
+
+        if (empty($out)) {
+            return View::VIEWS;
+        } else {
+            return $out;
+        }
+    }
 
 }
diff --git a/src/View/AbstractView.php b/src/View/AbstractView.php
index 9a5db6c..74158ec 100644
--- a/src/View/AbstractView.php
+++ b/src/View/AbstractView.php
@@ -24,9 +24,10 @@
 
 abstract class AbstractView implements ViewInterface
 {
-    const VIEWS = ['month'];
+    const VIEWS = ['month','week'];
     const MONTH = 'month';
-    
+    const WEEK = 'week';
+
     public static function isValidView(string $view) : bool
     {
         return in_array($view, self::VIEWS);
@@ -39,6 +40,10 @@ public static function get(string $view) : ViewInterface
             throw new \Exception("Unknown view: $view");
         }
         
+        if ($view == self::WEEK) {
+            return new Week();
+        }
+
         return new Month();
     }
 
@@ -63,7 +68,6 @@ public function calendarData(NovaRequest $request, CalendarDataProviderInterface
         $this->updateViewRanges($dataProvider);
 
         return array_merge([
-            'windowTitle' => $dataProvider->windowTitle(),
             'title' => $dataProvider->titleForView($this->specifier()),
             'styles' => array_replace_recursive($this->defaultStyles(), $dataProvider->eventStyles()),
             'filters' => $dataProvider->filtersToArray(),
diff --git a/src/View/Month.php b/src/View/Month.php
index 01eb11d..5e9761d 100644
--- a/src/View/Month.php
+++ b/src/View/Month.php
@@ -28,6 +28,7 @@ class Month extends AbstractView
 
     protected $year = null;
     protected $month = null;
+    protected $week = null;
     
     public function specifier() : string
     {
@@ -42,10 +43,12 @@ public function initFromRequest(NovaRequest $request)
     public function viewData(CalendarDataProviderInterface $dataProvider) : array
     {
         return [
+            'shouldShowWeekNumbers' => $dataProvider->shouldShowWeekNumbers(),
             'year' => $this->year,
             'month' => $this->month,
+            'week' => $this->week,
             'columns' => $dataProvider->daysOfTheWeek(),
-            'weeks' => $this->eventsByWeek($dataProvider),
+            'weeks' => $this->eventsByWeek($dataProvider)
         ];
     }
     
@@ -53,11 +56,19 @@ public function setYearAndMonth($year, $month) : self
     {
         $year  = is_null($year)  || !is_numeric($year)  ? now()->year  : intval($year);
         $month = is_null($month) || !is_numeric($month) ? now()->month : intval($month);
+
         while($month > 12) { $year += 1; $month -= 12; }
         while($month < 1)  { $year -= 1; $month += 12; }
-        
+
+        if (($year == now()->year) && ($month == now()->month)) {
+            $week = now()->weekOfYear;
+        } else {
+            $week = Carbon::createFromDate($year, $month, 1)->weekOfYear;
+        }
+
         $this->year = $year;
         $this->month = $month;
+        $this->week = $week;
 
         return $this;
     }
@@ -69,6 +80,9 @@ public function eventsByWeek(CalendarDataProviderInterface $dataProvider) : arra
 
         for($i = 0; $i < self::N_CALENDAR_WEEKS; $i++)
         {
+            $weekYear = $dateCursor->year;
+            $weekNumber = $dateCursor->weekOfYear;
+
             $week = [];
             for($j = 0; $j < 7; $j++)
             {
@@ -78,7 +92,12 @@ public function eventsByWeek(CalendarDataProviderInterface $dataProvider) : arra
                 
                 $dateCursor = $dateCursor->addDay();
             }
-            $out[] = $week;
+            $out[] = [
+                'year' => $weekYear,
+                'number' => $weekNumber,
+                'days' => $week
+            ];
+            // $out[] = $week;
         }
         
         return $out;
diff --git a/src/View/Week.php b/src/View/Week.php
new file mode 100644
index 0000000..0fab9ed
--- /dev/null
+++ b/src/View/Week.php
@@ -0,0 +1,231 @@
+<?php
+
+/*
+ * © Copyright 2022 · Willem Vervuurt, Studio Delfuego
+ * 
+ * You can modify, use and distribute this package under one of two licenses:
+ * 1. GNU AGPLv3
+ * 2. A perpetual, non-revocable and 100% free (as in beer) do-what-you-want 
+ *    license that allows both non-commercial and commercial use, under conditions.
+ *    See LICENSE.md for details.
+ * 
+ *    (it boils down to: do what you want as long as you're building and/or
+ *     using calendar views, but don't embed this package or a modified version
+ *     of it in free or paid-for software libraries and packages aimed at developers).
+ */
+ 
+namespace Wdelfuego\NovaCalendar\View;
+
+use Illuminate\Support\Carbon;
+use Laravel\Nova\Http\Requests\NovaRequest;
+
+use Wdelfuego\NovaCalendar\Contracts\CalendarDataProviderInterface;
+use Wdelfuego\NovaCalendar\CalendarDay;
+
+class Week extends AbstractView
+{
+    const LAYOUT = [
+        'openingHour' => 8,         // calendar not rendered prior this hour on Week views, 0 means opening hour is 0:00
+        'closingHour' => 20,        // calendar not rendered after this hour on Week views, 24 means closing hour is 0:00
+        'timelineInterval' => 30    // for UI purposes, sets granulation of timeslots
+    ];
+
+    protected $year = null;
+    protected $month = null;
+    protected $week = null;
+
+    private $openingHour = 9;
+    private $closingHour = 17;
+    private $timelineInterval = 30;
+    private $timeline = null;
+    
+    public function specifier() : string
+    {
+        return self::WEEK;
+    }
+    
+    public function initFromRequest(NovaRequest $request)
+    {
+        $this->setYearAndWeek($request->query('y'), $request->query('w'));
+        $this->openingHour = $this->calendarDayLayout()['openingHour'];
+        $this->closingHour = $this->calendarDayLayout()['closingHour'];
+        $this->timelineInterval = $this->calendarDayLayout()['timelineInterval'];
+        $this->timeline = $this->timeline();
+    }
+    
+    public function viewData(CalendarDataProviderInterface $dataProvider) : array
+    {
+        return [
+            'shouldShowWeekNumbers' => $dataProvider->shouldShowWeekNumbers(),
+            'year' => $this->year,
+            'month' => $this->month,
+            'week' => $this->week,
+            'columns' => $dataProvider->daysOfTheWeek(),
+            'layout' => $this->calendarDayLayout(),
+            'weekData' => $this->eventsByWeek($dataProvider),
+            'timeline' => $this->timeline,
+        ];
+    }
+
+    /**
+     * Sets Year and Week for week view
+     *
+     * @param  int $year
+     * @param  int $week
+     * @return self
+     */
+    public function setYearAndWeek($year, $week) : self
+    {
+        $year  = is_null($year)  || !is_numeric($year)  ? now()->year  : intval($year);
+        $week = is_null($week) || !is_numeric($week) ? now()->weekOfYear : intval($week);
+                  
+        while ($week > 52) { $year += 1; $week -= 52; }
+        while ($week < 1)  { $year -= 1; $week += 52; }
+
+        if (($year == now()->year) && ($week == now()->weekOfYear)) {
+            $month = now()->month;
+        } else {
+            $month = Carbon::today()->setISODate($year, $week)->month;
+        }
+        
+        $this->year = $year;
+        $this->month = $month;
+        $this->week = $week;
+        
+        return $this;
+    }
+    
+    public function eventsByWeek(CalendarDataProviderInterface $dataProvider) : array
+    {
+        $dateCursor = $dataProvider->startOfCalendar();
+
+        $week = [];
+        for($j = 0; $j < 7; $j++)
+        {
+            $calendarDay = CalendarDay::forDateInYearAndWeek($dateCursor, $this->year, $this->week, $this->firstDayOfWeek());
+            $calendarDay = $dataProvider->customizeCalendarDay($calendarDay);
+            $week[] = $calendarDay->withEvents($this->eventDataForDate($dataProvider, $dateCursor))->toArray();
+            
+            $dateCursor = $dateCursor->addDay();
+        }
+        
+        return $week;
+    }
+    
+    
+    protected function startOfRange() : Carbon
+    {
+        $start = Carbon::now()->setISODate($this->year, $this->week);
+        return Carbon::createFromFormat('Y-m-d H:i:s', $this->year . '-' . $start->month . '-' . $start->day . ' 00:00:00');
+    }
+    
+    protected function endOfRange() : Carbon
+    {
+        return $this->startOfRange()->addWeek()->subSecond();
+    }
+    
+    protected function startOfCalendar() : Carbon
+    {
+        return $this->startOfRange();
+    }
+    
+    protected function endOfCalendar() : Carbon
+    {
+        return $this->endOfRange();
+    }
+    
+    protected function eventDataForDate(CalendarDataProviderInterface $dataProvider, Carbon $date) : array
+    {
+        $date->setTime(0,0,0);
+        $isFirstDayOfWeek = ($date->dayOfWeekIso == $this->firstDayOfWeek());
+        
+        // Get all events that start today, and if the date is the first day of the week
+        // also get all multiday events that started before today and end on or after it
+        // ('running multiday events')
+        $events = array_filter($dataProvider->allEvents(), function($e) use ($date, $isFirstDayOfWeek) {
+            return $e->start()->isSameDay($date)
+                    ||
+                    ($isFirstDayOfWeek
+                        && $e->end() 
+                        && $e->start()->isBefore($date) 
+                        && $e->end()->gte($date));
+        });
+
+        // Sort events (as a heuristic, since CSS won't always match event order 
+        // between different week rows perfectly due to 'column dense')
+        usort($events, function($a, $b) use ($date, $isFirstDayOfWeek) { 
+
+            $aDays = min(7,$a->spansDaysFrom($date));
+            $bDays = min(7,$b->spansDaysFrom($date));
+
+            // Longer events first
+            if($aDays != $bDays) { return $bDays - $aDays; }
+
+            // If we're in the first day column and both events span 7 days,
+            // let running multi-day events precede events that start today
+            if($isFirstDayOfWeek && $aDays == 7 && $bDays == 7)
+            {
+                if(!$a->startsEvent($date)) { return -1 ;}
+                if(!$b->startsEvent($date)) { return 1 ;}
+                return 0;
+            }
+
+            // Events have the same length and don't span 7 full days
+            // Let the one that starts earlier come first.
+            return $b->start()->diffInMinutes($a->start(), false); 
+        });
+        
+        // Finally return the resultant event array, but convert each event to an array
+        // that the front-end can use to render the calendar
+        return array_map(fn($e): array => $e->toArray(
+            $date, 
+            $dataProvider->startOfRange(), 
+            $dataProvider->endOfRange(), 
+            $dataProvider->firstDayOfWeek()
+        ), $events);
+    }
+
+    /**
+     * Gets defualt calendar layout 
+     *
+     * @return array
+     */
+    public function calendarDayLayout(): array
+    {
+        return self::LAYOUT;
+    }
+
+    /**
+     * Gets default hours timeline for rendering purposes. 
+     * ToDo: add time locale support
+     *
+     * @return array
+     */
+    public function timeline(): array
+    {
+        $openingMinute = $this->openingHour * 60;
+        $closingMinute = $this->closingHour * 60;
+
+        $timeCursor = Carbon::today()->copy();
+        $end = $timeCursor->copy()->addDay()->subSecond();
+
+        $out = [];
+        while ($timeCursor->lessThanOrEqualTo($end)) {
+            $h = $timeCursor->hour;
+            $m = $timeCursor->minute;
+            $mm = $h * 60 + $m;
+            $hm = $timeCursor->format('G:i');
+            $out[] = [
+                'hour' => $h,
+                'minute' => $m,
+                'hour_minute' => $hm,
+                'is_open' => (($openingMinute <= $mm) && ($mm < $closingMinute)),
+            ];
+
+            $timeCursor->addMinutes($this->timelineInterval);
+        }
+
+        return $out;
+    }
+
+}