vue-simple-calendar
Advanced tools
Comparing version 6.2.0 to 6.2.1
@@ -523,7 +523,7 @@ import { ICalendarItem, INormalizedCalendarItem, DateTimeFormatOption } from "./ICalendarItem"; | ||
itemComparer: (a: INormalizedCalendarItem, b: INormalizedCalendarItem) => 1 | -1; | ||
findAndSortItemsInWeek: (weekStart: Date) => Array<INormalizedCalendarItem>; | ||
findAndSortItemsInDateRange: (startDate: Date, endDate: Date) => Array<INormalizedCalendarItem>; | ||
findAndSortItemsInWeek: (weekStart: Date) => INormalizedCalendarItem[]; | ||
findAndSortItemsInDateRange: (startDate: Date, endDate: Date) => INormalizedCalendarItem[]; | ||
dayHasItems: (day: Date) => boolean; | ||
dayIsSelected: (day: Date) => boolean; | ||
getWeekItems: (weekStart: Date) => Array<INormalizedCalendarItem>; | ||
getWeekItems: (weekStart: Date) => INormalizedCalendarItem[]; | ||
getFormattedTimeRange: (item: INormalizedCalendarItem) => string; | ||
@@ -530,0 +530,0 @@ getItemTitle: (item: INormalizedCalendarItem) => string; |
@@ -8,3 +8,3 @@ interface ICalendarItem { | ||
url?: string; | ||
classes?: Array<string> | null; | ||
classes?: string[] | null; | ||
style?: string; | ||
@@ -15,3 +15,3 @@ } | ||
originalItem: ICalendarItem; | ||
classes: Array<string>; | ||
classes: string[]; | ||
itemRow?: number; | ||
@@ -18,0 +18,0 @@ } |
@@ -1,1 +0,1 @@ | ||
(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.CalendarView={},m.Vue))})(this,function(m,e){"use strict";var _e=Object.defineProperty;var et=(m,e,y)=>e in m?_e(m,e,{enumerable:!0,configurable:!0,writable:!0,value:y}):m[e]=y;var L=(m,e,y)=>(et(m,typeof e!="symbol"?e+"":e,y),y);const y=()=>F(new Date),Q=(t,r,a)=>{switch(r){case"year":return new Date(t.getFullYear(),0);case"month":return new Date(t.getFullYear(),t.getMonth());case"week":return E(t,a);default:return t}},J=t=>[...Array(7)].map((r,a)=>k(t,a)),k=(t,r)=>new Date(t.getFullYear(),t.getMonth(),t.getDate()+r,t.getHours(),t.getMinutes(),t.getSeconds()),E=(t,r)=>k(t,(r-t.getDay()-7)%-7),K=(t,r)=>k(E(t,r),7),S=t=>new Date(t.getFullYear(),t.getMonth()),X=t=>Math.ceil(t.getDate()/7),Z=(t,r,a)=>new Date(t.getFullYear()+(r=="year"?a:0),t.getMonth()+(r=="month"?a:0),t.getDate()+(r=="week"?a*7:0)),T=t=>("0"+String(t.getMonth()+1)).slice(-2),Y=t=>("0"+String(t.getDate())).slice(-2),x=t=>t.getFullYear()+"-"+T(t),_=t=>x(t)+"-"+Y(t),ee=t=>T(t)+"-"+Y(t),te=(t,r,a)=>{if(t.getHours()===0&&t.getMinutes()===0&&t.getSeconds()===0)return"";if(!w()){var l=new Date().getTimezoneOffset()*6e4;return new Date(t.getTime()-l).toISOString().slice(11,16)}return t.toLocaleTimeString(r,a)},ae=(t,r,a,l)=>{const u=t.getFullYear()===r.getFullYear(),h=R(t,r),b=!(a==="year")&&!(a==="month");let f=[];return f.push(l[t.getMonth()]),b&&(f.push(" "),f.push(t.getDate())),u||(f.push(b?", ":" "),f.push(t.getFullYear())),!h||!u?(f.push(" \u2013 "),h||f.push(l[r.getMonth()]),b&&f.push(" ")):b&&f.push(" \u2013 "),b?(f.push(r.getDate()),f.push(", ")):f.push(" "),f.push(r.getFullYear()),f.join("")},U=(t,r)=>{const a=Date.UTC(r.getFullYear(),r.getMonth(),r.getDate()),l=Date.UTC(t.getFullYear(),t.getMonth(),t.getDate());return(a-l)/864e5},ne=(t,r)=>!!t&&!!r&&U(t,r)===0,re=(t,r)=>!!t&&!!r&&t.getTime()===r.getTime(),R=(t,r)=>!!t&&!!r&&t.getFullYear()===r.getFullYear()&&t.getMonth()===r.getMonth(),oe=t=>S(t)<S(y()),se=t=>S(t)>S(y()),ie=t=>F(t)>y(),le=t=>F(t)<y(),de=t=>t.getMonth()!==k(t,7).getMonth(),ce=t=>t.getMonth()!==k(t,1).getMonth(),z=t=>{let r=[...Array(7)].map(a=>0);return t.split(/\D/,7).forEach((a,l)=>r[l]=Number(a)),r[1]--,new Date(r[0],r[1],r[2],r[3],r[4],r[5],r[6])},A=t=>typeof t=="string"?z(t):new Date(t),F=t=>{const r=new Date(t);return r.setHours(0,0,0,0),r},ue=t=>t.substring(0,2),w=()=>typeof Intl<"u",o={addDays:k,beginningOfMonth:S,beginningOfPeriod:Q,beginningOfWeek:E,dateOnly:F,dayDiff:U,daysOfWeek:J,endOfWeek:K,formattedPeriod:ae,formattedTime:te,fromIsoStringToLocalDate:z,getDefaultBrowserLocale:()=>typeof navigator>"u"?"unk":(navigator.languages&&navigator.languages.length?navigator.languages[0]:navigator.language).toLowerCase(),getFormattedMonthNames:(t,r)=>{if(!w())return[...Array(12)].map(l=>"");const a=new Intl.DateTimeFormat(t,{month:r});return[...Array(12)].map((l,u)=>a.format(new Date(2017,u,1)))},getFormattedWeekdayNames:(t,r,a)=>{if(!w())return[...Array(7)].map(u=>"");const l=new Intl.DateTimeFormat(t,{weekday:r});return[...Array(7)].map((u,h)=>l.format(new Date(2017,0,(h+1+a)%7)))},incrementPeriod:Z,instanceOfMonth:X,isFutureMonth:se,isInFuture:ie,isInPast:le,isLastDayOfMonth:ce,isLastInstanceOfMonth:de,isoMonthDay:ee,isoYearMonth:x,isoYearMonthDay:_,isPastMonth:oe,isSameDate:ne,isSameDateTime:re,isSameMonth:R,languageCode:ue,normalizeItem:(t,r)=>{var l;const a=t.classes?[...t.classes]:[];return r&&a.push("isHovered"),{originalItem:t,startDate:A(t.startDate),endDate:A(t.endDate||t.startDate),classes:a,title:t.title||"Untitled",id:t.id,url:t.url,tooltip:(l=t.tooltip)!=null?l:t.title}},paddedDay:Y,paddedMonth:T,supportsIntl:w,today:y,toLocalDate:A};class fe{constructor(){L(this,"currentDragItem");L(this,"dateSelectionOrigin");L(this,"currentHoveredItemId","");L(this,"CalendarMath",o)}}const ge={class:"cv-header-days"},me={key:0,class:"cv-weeknumber"},pe=["aria-multiselectable"],De={key:0,class:"cv-weeknumber"},he={class:"cv-weekdays"},ye=["draggable","aria-grabbed","aria-label","aria-selected","aria-dropeffect","onClick","onDragstart","onDrop","onDragover","onDragenter","onDragleave"],be={class:"cv-day-number"},Pe=["draggable","aria-grabbed","title","onDragstart","onMouseenter","onMouseleave","onClick","innerHTML"],ke=e.defineComponent({__name:"CalendarView",props:{showDate:{default:void 0},displayPeriodUom:{default:"month"},displayPeriodCount:{default:1},displayWeekNumbers:{type:Boolean,default:!1},locale:{default:void 0},monthNameFormat:{default:"long"},weekdayNameFormat:{default:"short"},showTimes:{type:Boolean,default:!1},timeFormatOptions:{default:()=>({})},disablePast:{type:Boolean,default:!1},disableFuture:{type:Boolean,default:!1},enableDateSelection:{type:Boolean,default:!1},selectionStart:{default:void 0},selectionEnd:{default:void 0},enableDragDrop:{type:Boolean,default:!1},startingDayOfWeek:{default:0},items:{default:()=>[]},dateClasses:{default:()=>({})},itemTop:{default:"1.4em"},itemContentHeight:{default:"1.4em"},itemBorderHeight:{default:"2px"},periodChangedCallback:{type:Function,default:void 0},currentPeriodLabel:{default:""},currentPeriodLabelIcons:{default:"\u21E4-\u21E5"},doEmitItemMouseEvents:{type:Boolean,default:!1}},emits:["period-changed","click-date","click-item","item-mouseenter","item-mouseleave","drag-start","drag-over-date","drag-enter-date","drag-leave-date","drop-on-date","date-selection","date-selection-start","date-selection-finish"],setup(t,{emit:r}){const a=t,l=e.reactive(new fe),u=e.computed(()=>a.locale||o.getDefaultBrowserLocale()),h=e.computed(()=>a.showDate?o.dateOnly(a.showDate):o.today()),p=e.computed(()=>o.beginningOfPeriod(h.value,a.displayPeriodUom,a.startingDayOfWeek)),C=e.computed(()=>o.addDays(o.incrementPeriod(p.value,a.displayPeriodUom,a.displayPeriodCount),-1)),b=e.computed(()=>{const n=o.beginningOfWeek(o.beginningOfPeriod(p.value,"year",0),a.startingDayOfWeek),s=o.beginningOfWeek(p.value,a.startingDayOfWeek);return 1+Math.floor(o.dayDiff(n,s)/7)}),f=e.computed(()=>o.beginningOfWeek(p.value,a.startingDayOfWeek)),N=e.computed(()=>o.endOfWeek(C.value,a.startingDayOfWeek)),Be=e.computed(()=>{const n=Math.floor((o.dayDiff(f.value,N.value)+1)/7);return[...Array(n)].map((s,d)=>o.addDays(f.value,d*7))}),W=e.computed(()=>o.getFormattedMonthNames(u.value,a.monthNameFormat)),Ee=e.computed(()=>o.getFormattedWeekdayNames(u.value,a.weekdayNameFormat,a.startingDayOfWeek)),$=e.computed(()=>a.items?a.items.map(n=>o.normalizeItem(n,n.id===l.currentHoveredItemId)):[]),V=e.computed(()=>o.beginningOfPeriod(o.today(),a.displayPeriodUom,a.startingDayOfWeek)),Te=e.computed(()=>o.addDays(o.incrementPeriod(V.value,a.displayPeriodUom,a.displayPeriodCount),-1)),Ye=e.computed(()=>o.formattedPeriod(p.value,C.value,a.displayPeriodUom,W.value)),Ae=e.computed(()=>{const n=V.value,s=p.value;return a.currentPeriodLabel?a.currentPeriodLabel==="icons"?a.currentPeriodLabelIcons[Math.sign(n.getTime()-s.getTime())+1]:a.currentPeriodLabel:o.formattedPeriod(n,Te.value,a.displayPeriodUom,W.value)}),Ne=e.computed(()=>({previousYear:M(-12),previousPeriod:M(-1),nextPeriod:M(1),previousFullPeriod:M(-a.displayPeriodCount),nextFullPeriod:M(a.displayPeriodCount),nextYear:M(12),currentPeriod:V.value,currentPeriodLabel:Ae.value,periodStart:p.value,periodEnd:C.value,displayLocale:u.value,displayFirstDate:f.value,displayLastDate:N.value,monthNames:W.value,fixedItems:$.value,periodLabel:Ye.value})),We=e.computed(()=>({periodStart:p,periodEnd:C,displayFirstDate:f,displayLastDate:N}));e.watch(()=>We,n=>{a.periodChangedCallback&&(r("period-changed"),a.periodChangedCallback(n,"watch"))},{immediate:!0,deep:!0});const $e=(n,s)=>{a.disablePast&&o.isInPast(n)||a.disableFuture&&o.isInFuture(n)||r("click-date",n,v(n,n),s)},Ve=(n,s)=>r("click-item",n,s),I=n=>"dow"+(n+a.startingDayOfWeek)%7,M=n=>{const s=o.incrementPeriod(p.value,a.displayPeriodUom,n),d=o.incrementPeriod(s,a.displayPeriodUom,a.displayPeriodCount);return a.disablePast&&d<=o.today()||a.disableFuture&&s>o.today()?null:s},He=(n,s)=>{l.currentHoveredItemId=n.id,a.doEmitItemMouseEvents&&r("item-mouseenter",n,s)},xe=(n,s)=>{l.currentHoveredItemId="",a.doEmitItemMouseEvents&&r("item-mouseleave",n,s)},Ue=(n,s)=>{var g,i;if(!a.enableDateSelection)return!1;(g=s.dataTransfer)==null||g.setData("text",n.toString());let d=new Image;return d.src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",(i=s.dataTransfer)==null||i.setDragImage(d,10,10),l.dateSelectionOrigin=n,r("date-selection-start",H(n),s),!0},Re=(n,s)=>{var d;return a.enableDragDrop?((d=s.dataTransfer)==null||d.setData("text",n.id),l.currentDragItem=n,l.dateSelectionOrigin=void 0,r("drag-start",n,s),!0):!1},H=n=>n<=l.dateSelectionOrigin?[n,l.dateSelectionOrigin]:[l.dateSelectionOrigin,n],ze=(n,s)=>{!a.enableDragDrop||r("drag-over-date",l.currentDragItem,n,s)},ve=(n,s)=>{if(a.enableDateSelection&&l.dateSelectionOrigin&&r("date-selection",H(n),s),!a.enableDragDrop)return;r("drag-enter-date",l.currentDragItem,n,s),s.target.classList.add("draghover")},je=(n,s)=>{if(a.enableDateSelection&&a.selectionStart||!a.enableDragDrop)return;r("drag-leave-date",l.currentDragItem,n,s),s.target.classList.remove("draghover")},qe=(n,s)=>{if(a.enableDateSelection&&l.dateSelectionOrigin){r("date-selection-finish",H(n),s);return}if(!a.enableDragDrop)return;r("drop-on-date",l.currentDragItem,n,s),s.target.classList.remove("draghover")},Ge=(n,s)=>n.startDate<s.startDate?-1:s.startDate<n.startDate?1:n.endDate>s.endDate?-1:s.endDate>n.endDate?1:n.id<s.id?-1:1,Qe=n=>v(n,o.addDays(n,6)),v=(n,s)=>$.value.filter(d=>d.endDate>=n&&o.dateOnly(d.startDate)<=s,this).sort(Ge),Je=n=>!!$.value.find(s=>s.endDate>=n&&o.dateOnly(s.startDate)<=n),j=n=>!(!a.selectionStart||!a.selectionEnd||n<o.dateOnly(a.selectionStart)||n>o.dateOnly(a.selectionEnd)),Ke=n=>{const s=Qe(n),d=[],g=[[],[],[],[],[],[],[]];for(let i=0;i<s.length;i++){const c=Object.assign({},s[i],{classes:[...s[i].classes],itemRow:0}),D=c.startDate<n,O=D?0:o.dayDiff(n,c.startDate),G=Math.min(7-O,o.dayDiff(o.addDays(n,O),c.endDate)+1);D&&c.classes.push("continued"),o.dayDiff(n,c.endDate)>6&&c.classes.push("toBeContinued"),o.isInPast(c.endDate)&&c.classes.push("past"),c.originalItem.url&&c.classes.push("hasUrl");for(let P=0;P<7;P++)if(P===O){let B=0;for(;g[P][B];)B++;c.itemRow=B,g[P][B]=!0}else P<O+G&&(g[P][c.itemRow]=!0);c.classes.push(`offset${O}`),c.classes.push(`span${G}`),d.push(c)}return d},Xe=n=>{const s='<span class="startTime">'+o.formattedTime(n.startDate,u.value,a.timeFormatOptions)+"</span>";let d="";return o.isSameDateTime(n.startDate,n.endDate)||(d='<span class="endTime">'+o.formattedTime(n.endDate,u.value,a.timeFormatOptions)+"</span>"),s+d},Ze=n=>a.showTimes?Xe(n)+" "+n.title:n.title,q=n=>{const s=n.itemRow,d=a.itemContentHeight,g=a.itemBorderHeight;return`calc(${a.itemTop} + ${s}*${d} + ${s}*${g})`};return(n,s)=>(e.openBlock(),e.createElementBlock("div",{"aria-label":"Calendar",class:e.normalizeClass(["cv-wrapper","locale-"+e.unref(o).languageCode(e.unref(u)),"locale-"+e.unref(u),"y"+e.unref(p).getFullYear(),"m"+e.unref(o).paddedMonth(e.unref(p)),"period-"+t.displayPeriodUom,"periodCount-"+t.displayPeriodCount,{past:e.unref(o).isPastMonth(e.unref(p)),future:e.unref(o).isFutureMonth(e.unref(p)),noIntl:!e.unref(o).supportsIntl}])},[e.renderSlot(n.$slots,"header",{headerProps:e.unref(Ne)}),e.createElementVNode("div",ge,[t.displayWeekNumbers?(e.openBlock(),e.createElementBlock("div",me)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(Ee),(d,g)=>e.renderSlot(n.$slots,"dayHeader",{index:I(g),label:d},()=>[(e.openBlock(),e.createElementBlock("div",{key:I(g),class:e.normalizeClass([I(g),"cv-header-day"])},e.toDisplayString(d),3))])),256))]),e.createElementVNode("div",{"aria-multiselectable":t.enableDateSelection,class:"cv-weeks"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(Be),(d,g)=>(e.openBlock(),e.createElementBlock("div",{key:`${g}-week`,class:e.normalizeClass(["cv-week","week"+(g+1),"ws"+e.unref(o).isoYearMonthDay(d)])},[t.displayWeekNumbers?(e.openBlock(),e.createElementBlock("div",De,[e.renderSlot(n.$slots,"weekNumber",{date:d,numberInYear:e.unref(b)+g,numberInPeriod:g+1},()=>[e.createElementVNode("span",null,e.toDisplayString(e.unref(b)+g),1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",he,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o).daysOfWeek(d),(i,c)=>(e.openBlock(),e.createElementBlock("div",{key:I(c),draggable:t.enableDateSelection,class:e.normalizeClass(["cv-day",I(c),"d"+e.unref(o).isoYearMonthDay(i),"d"+e.unref(o).isoMonthDay(i),"d"+e.unref(o).paddedDay(i),"instance"+e.unref(o).instanceOfMonth(i),{today:e.unref(o).isSameDate(i,e.unref(o).today()),outsideOfMonth:!e.unref(o).isSameMonth(i,e.unref(h)),past:e.unref(o).isInPast(i),future:e.unref(o).isInFuture(i),last:e.unref(o).isLastDayOfMonth(i),lastInstance:e.unref(o).isLastInstanceOfMonth(i),hasItems:Je(i),selectionStart:e.unref(o).isSameDate(i,t.selectionStart),selectionEnd:e.unref(o).isSameDate(i,t.selectionEnd)},...t.dateClasses&&t.dateClasses[e.unref(o).isoYearMonthDay(i)]||[]]),"aria-grabbed":t.enableDateSelection?j(i):void 0,"aria-label":i.getDate().toString(),"aria-selected":j(i),"aria-dropeffect":t.enableDragDrop&&l.currentDragItem?"move":t.enableDateSelection&&l.dateSelectionOrigin?"execute":"none",onClick:D=>$e(i,D),onDragstart:D=>Ue(i,D),onDrop:e.withModifiers(D=>qe(i,D),["prevent"]),onDragover:e.withModifiers(D=>ze(i,D),["prevent"]),onDragenter:e.withModifiers(D=>ve(i,D),["prevent"]),onDragleave:e.withModifiers(D=>je(i,D),["prevent"])},[e.createElementVNode("div",be,e.toDisplayString(i.getDate()),1),e.renderSlot(n.$slots,"dayContent",{day:i})],42,ye))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Ke(d),i=>e.renderSlot(n.$slots,"item",{value:i,weekStartDate:d,top:q(i)},()=>[(e.openBlock(),e.createElementBlock("div",{key:i.id,draggable:t.enableDragDrop,"aria-grabbed":t.enableDragDrop?i==l.currentDragItem:void 0,class:e.normalizeClass([i.classes,"cv-item"]),title:i.tooltip||i.title,style:e.normalizeStyle(`top:${q(i)};${i.originalItem.style}`),onDragstart:c=>Re(i,c),onMouseenter:c=>He(i,c),onMouseleave:c=>xe(i,c),onClick:e.withModifiers(c=>Ve(i,c),["stop"]),innerHTML:Ze(i)},null,46,Pe))])),256))])],2))),128))],8,pe)],2))}}),ot="",Me={class:"cv-header"},Se={class:"cv-header-nav"},Ce=["disabled"],Ie=["disabled","innerHTML"],Oe=["disabled"],Le=["disabled"],Fe={class:"periodLabel"},we=e.defineComponent({__name:"CalendarViewHeader",props:{headerProps:{type:Object,required:!0},previousYearLabel:{type:String,default:"<<"},previousPeriodLabel:{type:String,default:"<"},nextPeriodLabel:{type:String,default:">"},nextYearLabel:{type:String,default:">>"}},emits:["input"],setup(t,{emit:r}){const a=l=>r("input",l);return(l,u)=>(e.openBlock(),e.createElementBlock("div",Me,[e.createElementVNode("div",Se,[e.createElementVNode("button",{disabled:!t.headerProps.previousYear,class:"previousYear","aria-label":"Previous Year",onClick:u[0]||(u[0]=e.withModifiers(h=>a(t.headerProps.previousYear),["prevent"]))},e.toDisplayString(t.previousYearLabel),9,Ce),e.createElementVNode("button",{disabled:!t.headerProps.previousPeriod,class:"previousPeriod","aria-label":"Previous Period",onClick:u[1]||(u[1]=e.withModifiers(h=>a(t.headerProps.previousPeriod),["prevent"])),innerHTML:t.previousPeriodLabel},null,8,Ie),e.createElementVNode("button",{class:"currentPeriod","aria-label":"Current Period",onClick:u[2]||(u[2]=e.withModifiers(h=>a(t.headerProps.currentPeriod),["prevent"]))},e.toDisplayString(t.headerProps.currentPeriodLabel),1),e.createElementVNode("button",{disabled:!t.headerProps.nextPeriod,class:"nextPeriod","aria-label":"Next Period",onClick:u[3]||(u[3]=e.withModifiers(h=>a(t.headerProps.nextPeriod),["prevent"]))},e.toDisplayString(t.nextPeriodLabel),9,Oe),e.createElementVNode("button",{disabled:!t.headerProps.nextYear,class:"nextYear","aria-label":"Next Year",onClick:u[4]||(u[4]=e.withModifiers(h=>a(t.headerProps.nextYear),["prevent"]))},e.toDisplayString(t.nextYearLabel),9,Le)]),e.createElementVNode("div",Fe,[e.renderSlot(l.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.headerProps.periodLabel),1)])])]))}}),st="";m.CalendarMath=o,m.CalendarView=ke,m.CalendarViewHeader=we,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); | ||
(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.CalendarView={},m.Vue))})(this,function(m,e){"use strict";var _e=Object.defineProperty;var et=(m,e,y)=>e in m?_e(m,e,{enumerable:!0,configurable:!0,writable:!0,value:y}):m[e]=y;var L=(m,e,y)=>(et(m,typeof e!="symbol"?e+"":e,y),y);const y=()=>F(new Date),Q=(t,r,a)=>{switch(r){case"year":return new Date(t.getFullYear(),0);case"month":return new Date(t.getFullYear(),t.getMonth());case"week":return B(t,a);default:return t}},J=t=>[...Array(7)].map((r,a)=>k(t,a)),k=(t,r)=>new Date(t.getFullYear(),t.getMonth(),t.getDate()+r,t.getHours(),t.getMinutes(),t.getSeconds()),B=(t,r)=>k(t,(r-t.getDay()-7)%-7),K=(t,r)=>k(B(t,r),7),S=t=>new Date(t.getFullYear(),t.getMonth()),X=t=>Math.ceil(t.getDate()/7),Z=(t,r,a)=>new Date(t.getFullYear()+(r=="year"?a:0),t.getMonth()+(r=="month"?a:0),t.getDate()+(r=="week"?a*7:0)),E=t=>("0"+String(t.getMonth()+1)).slice(-2),T=t=>("0"+String(t.getDate())).slice(-2),x=t=>t.getFullYear()+"-"+E(t),_=t=>x(t)+"-"+T(t),ee=t=>E(t)+"-"+T(t),te=(t,r,a)=>{if(t.getHours()===0&&t.getMinutes()===0&&t.getSeconds()===0)return"";if(!w()){var l=new Date().getTimezoneOffset()*6e4;return new Date(t.getTime()-l).toISOString().slice(11,16)}return t.toLocaleTimeString(r,a)},ae=(t,r,a,l)=>{const u=t.getFullYear()===r.getFullYear(),h=R(t,r),b=!(a==="year")&&!(a==="month");let f=[];return f.push(l[t.getMonth()]),b&&(f.push(" "),f.push(t.getDate())),u||(f.push(b?", ":" "),f.push(t.getFullYear())),!h||!u?(f.push(" \u2013 "),h||f.push(l[r.getMonth()]),b&&f.push(" ")):b&&f.push(" \u2013 "),b?(f.push(r.getDate()),f.push(", ")):f.push(" "),f.push(r.getFullYear()),f.join("")},U=(t,r)=>{const a=Date.UTC(r.getFullYear(),r.getMonth(),r.getDate()),l=Date.UTC(t.getFullYear(),t.getMonth(),t.getDate());return(a-l)/864e5},ne=(t,r)=>!!t&&!!r&&U(t,r)===0,re=(t,r)=>!!t&&!!r&&t.getTime()===r.getTime(),R=(t,r)=>!!t&&!!r&&t.getFullYear()===r.getFullYear()&&t.getMonth()===r.getMonth(),oe=t=>S(t)<S(y()),se=t=>S(t)>S(y()),ie=t=>F(t)>y(),le=t=>F(t)<y(),de=t=>t.getMonth()!==k(t,7).getMonth(),ce=t=>t.getMonth()!==k(t,1).getMonth(),z=t=>{let r=[...Array(7)].map(a=>0);return t.split(/\D/,7).forEach((a,l)=>r[l]=Number(a)),r[1]--,new Date(r[0],r[1],r[2],r[3],r[4],r[5],r[6])},Y=t=>typeof t=="string"?z(t):new Date(t),F=t=>{const r=new Date(t);return r.setHours(0,0,0,0),r},ue=t=>t.substring(0,2),w=()=>typeof Intl<"u",o={addDays:k,beginningOfMonth:S,beginningOfPeriod:Q,beginningOfWeek:B,dateOnly:F,dayDiff:U,daysOfWeek:J,endOfWeek:K,formattedPeriod:ae,formattedTime:te,fromIsoStringToLocalDate:z,getDefaultBrowserLocale:()=>typeof navigator>"u"?"unk":(navigator.languages&&navigator.languages.length?navigator.languages[0]:navigator.language).toLowerCase(),getFormattedMonthNames:(t,r)=>{if(!w())return[...Array(12)].map(l=>"");const a=new Intl.DateTimeFormat(t,{month:r});return[...Array(12)].map((l,u)=>a.format(new Date(2017,u,1)))},getFormattedWeekdayNames:(t,r,a)=>{if(!w())return[...Array(7)].map(u=>"");const l=new Intl.DateTimeFormat(t,{weekday:r});return[...Array(7)].map((u,h)=>l.format(new Date(2017,0,(h+1+a)%7)))},incrementPeriod:Z,instanceOfMonth:X,isFutureMonth:se,isInFuture:ie,isInPast:le,isLastDayOfMonth:ce,isLastInstanceOfMonth:de,isoMonthDay:ee,isoYearMonth:x,isoYearMonthDay:_,isPastMonth:oe,isSameDate:ne,isSameDateTime:re,isSameMonth:R,languageCode:ue,normalizeItem:(t,r)=>{var l;const a=t.classes?[...t.classes]:[];return r&&a.push("isHovered"),{originalItem:t,startDate:Y(t.startDate),endDate:Y(t.endDate||t.startDate),classes:a,title:t.title||"Untitled",id:t.id,url:t.url,tooltip:(l=t.tooltip)!=null?l:t.title}},paddedDay:T,paddedMonth:E,supportsIntl:w,today:y,toLocalDate:Y};class fe{constructor(){L(this,"currentDragItem");L(this,"dateSelectionOrigin");L(this,"currentHoveredItemId","");L(this,"CalendarMath",o)}}const ge={class:"cv-header-days"},me={key:0,class:"cv-weeknumber"},pe=["aria-multiselectable"],De={key:0,class:"cv-weeknumber"},he={class:"cv-weekdays"},ye=["draggable","aria-grabbed","aria-label","aria-selected","aria-dropeffect","onClick","onDragstart","onDrop","onDragover","onDragenter","onDragleave"],be={class:"cv-day-number"},Pe=["draggable","aria-grabbed","title","onDragstart","onMouseenter","onMouseleave","onClick","innerHTML"],ke=e.defineComponent({__name:"CalendarView",props:{showDate:{default:void 0},displayPeriodUom:{default:"month"},displayPeriodCount:{default:1},displayWeekNumbers:{type:Boolean,default:!1},locale:{default:void 0},monthNameFormat:{default:"long"},weekdayNameFormat:{default:"short"},showTimes:{type:Boolean,default:!1},timeFormatOptions:{default:()=>({})},disablePast:{type:Boolean,default:!1},disableFuture:{type:Boolean,default:!1},enableDateSelection:{type:Boolean,default:!1},selectionStart:{default:void 0},selectionEnd:{default:void 0},enableDragDrop:{type:Boolean,default:!1},startingDayOfWeek:{default:0},items:{default:()=>[]},dateClasses:{default:()=>({})},itemTop:{default:"1.4em"},itemContentHeight:{default:"1.4em"},itemBorderHeight:{default:"2px"},periodChangedCallback:{type:Function,default:void 0},currentPeriodLabel:{default:""},currentPeriodLabelIcons:{default:"\u21E4-\u21E5"},doEmitItemMouseEvents:{type:Boolean,default:!1}},emits:["period-changed","click-date","click-item","item-mouseenter","item-mouseleave","drag-start","drag-over-date","drag-enter-date","drag-leave-date","drop-on-date","date-selection","date-selection-start","date-selection-finish"],setup(t,{emit:r}){const a=t,l=e.reactive(new fe),u=e.computed(()=>a.locale||o.getDefaultBrowserLocale()),h=e.computed(()=>a.showDate?o.dateOnly(a.showDate):o.today()),p=e.computed(()=>o.beginningOfPeriod(h.value,a.displayPeriodUom,a.startingDayOfWeek)),C=e.computed(()=>o.addDays(o.incrementPeriod(p.value,a.displayPeriodUom,a.displayPeriodCount),-1)),b=e.computed(()=>{const n=o.beginningOfWeek(o.beginningOfPeriod(p.value,"year",0),a.startingDayOfWeek),s=o.beginningOfWeek(p.value,a.startingDayOfWeek);return 1+Math.floor(o.dayDiff(n,s)/7)}),f=e.computed(()=>o.beginningOfWeek(p.value,a.startingDayOfWeek)),A=e.computed(()=>o.endOfWeek(C.value,a.startingDayOfWeek)),$e=e.computed(()=>{const n=Math.floor((o.dayDiff(f.value,A.value)+1)/7);return[...Array(n)].map((s,d)=>o.addDays(f.value,d*7))}),N=e.computed(()=>o.getFormattedMonthNames(u.value,a.monthNameFormat)),Be=e.computed(()=>o.getFormattedWeekdayNames(u.value,a.weekdayNameFormat,a.startingDayOfWeek)),W=e.computed(()=>a.items?a.items.map(n=>o.normalizeItem(n,n.id===l.currentHoveredItemId)):[]),V=e.computed(()=>o.beginningOfPeriod(o.today(),a.displayPeriodUom,a.startingDayOfWeek)),Ee=e.computed(()=>o.addDays(o.incrementPeriod(V.value,a.displayPeriodUom,a.displayPeriodCount),-1)),Te=e.computed(()=>o.formattedPeriod(p.value,C.value,a.displayPeriodUom,N.value)),Ye=e.computed(()=>{const n=V.value,s=p.value;return a.currentPeriodLabel?a.currentPeriodLabel==="icons"?a.currentPeriodLabelIcons[Math.sign(n.getTime()-s.getTime())+1]:a.currentPeriodLabel:o.formattedPeriod(n,Ee.value,a.displayPeriodUom,N.value)}),Ae=e.computed(()=>({previousYear:M(-12),previousPeriod:M(-1),nextPeriod:M(1),previousFullPeriod:M(-a.displayPeriodCount),nextFullPeriod:M(a.displayPeriodCount),nextYear:M(12),currentPeriod:V.value,currentPeriodLabel:Ye.value,periodStart:p.value,periodEnd:C.value,displayLocale:u.value,displayFirstDate:f.value,displayLastDate:A.value,monthNames:N.value,fixedItems:W.value,periodLabel:Te.value})),Ne=e.computed(()=>({periodStart:p,periodEnd:C,displayFirstDate:f,displayLastDate:A}));e.watch(()=>Ne,n=>{a.periodChangedCallback&&(r("period-changed"),a.periodChangedCallback(n,"watch"))},{immediate:!0,deep:!0});const We=(n,s)=>{a.disablePast&&o.isInPast(n)||a.disableFuture&&o.isInFuture(n)||r("click-date",n,v(n,n),s)},Ve=(n,s)=>r("click-item",n,s),I=n=>"dow"+(n+a.startingDayOfWeek)%7,M=n=>{const s=o.incrementPeriod(p.value,a.displayPeriodUom,n),d=o.incrementPeriod(s,a.displayPeriodUom,a.displayPeriodCount);return a.disablePast&&d<=o.today()||a.disableFuture&&s>o.today()?null:s},He=(n,s)=>{l.currentHoveredItemId=n.id,a.doEmitItemMouseEvents&&r("item-mouseenter",n,s)},xe=(n,s)=>{l.currentHoveredItemId="",a.doEmitItemMouseEvents&&r("item-mouseleave",n,s)},Ue=(n,s)=>{var g,i;if(!a.enableDateSelection)return!1;(g=s.dataTransfer)==null||g.setData("text",n.toString());let d=new Image;return d.src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",(i=s.dataTransfer)==null||i.setDragImage(d,10,10),l.dateSelectionOrigin=n,r("date-selection-start",H(n),s),!0},Re=(n,s)=>{var d;return a.enableDragDrop?((d=s.dataTransfer)==null||d.setData("text",n.id),l.currentDragItem=n,l.dateSelectionOrigin=void 0,r("drag-start",n,s),!0):!1},H=n=>n<=l.dateSelectionOrigin?[n,l.dateSelectionOrigin]:[l.dateSelectionOrigin,n],ze=(n,s)=>{!a.enableDragDrop||r("drag-over-date",l.currentDragItem,n,s)},ve=(n,s)=>{if(a.enableDateSelection&&l.dateSelectionOrigin&&r("date-selection",H(n),s),!a.enableDragDrop)return;r("drag-enter-date",l.currentDragItem,n,s),s.target.classList.add("draghover")},je=(n,s)=>{if(a.enableDateSelection&&a.selectionStart||!a.enableDragDrop)return;r("drag-leave-date",l.currentDragItem,n,s),s.target.classList.remove("draghover")},qe=(n,s)=>{if(a.enableDateSelection&&l.dateSelectionOrigin){r("date-selection-finish",H(n),s);return}if(!a.enableDragDrop)return;r("drop-on-date",l.currentDragItem,n,s),s.target.classList.remove("draghover")},Ge=(n,s)=>n.startDate<s.startDate?-1:s.startDate<n.startDate?1:n.endDate>s.endDate?-1:s.endDate>n.endDate?1:n.id<s.id?-1:1,Qe=n=>v(n,o.addDays(n,6)),v=(n,s)=>W.value.filter(d=>d.endDate>=n&&o.dateOnly(d.startDate)<=s,this).sort(Ge),Je=n=>!!W.value.find(s=>s.endDate>=n&&o.dateOnly(s.startDate)<=n),j=n=>!(!a.selectionStart||!a.selectionEnd||n<o.dateOnly(a.selectionStart)||n>o.dateOnly(a.selectionEnd)),Ke=n=>{const s=Qe(n),d=[],g=[[],[],[],[],[],[],[]];if(!s)return d;for(let i=0;i<s.length;i++){const c=Object.assign({},s[i],{classes:[...s[i].classes],itemRow:0}),D=c.startDate<n,O=D?0:o.dayDiff(n,c.startDate),G=Math.min(7-O,o.dayDiff(o.addDays(n,O),c.endDate)+1);D&&c.classes.push("continued"),o.dayDiff(n,c.endDate)>6&&c.classes.push("toBeContinued"),o.isInPast(c.endDate)&&c.classes.push("past"),c.originalItem.url&&c.classes.push("hasUrl");for(let P=0;P<7;P++)if(P===O){let $=0;for(;g[P][$];)$++;c.itemRow=$,g[P][$]=!0}else P<O+G&&(g[P][c.itemRow]=!0);c.classes.push(`offset${O}`),c.classes.push(`span${G}`),d.push(c)}return d},Xe=n=>{const s='<span class="startTime">'+o.formattedTime(n.startDate,u.value,a.timeFormatOptions)+"</span>";let d="";return o.isSameDateTime(n.startDate,n.endDate)||(d='<span class="endTime">'+o.formattedTime(n.endDate,u.value,a.timeFormatOptions)+"</span>"),s+d},Ze=n=>a.showTimes?Xe(n)+" "+n.title:n.title,q=n=>{const s=n.itemRow,d=a.itemContentHeight,g=a.itemBorderHeight;return`calc(${a.itemTop} + ${s}*${d} + ${s}*${g})`};return(n,s)=>(e.openBlock(),e.createElementBlock("div",{"aria-label":"Calendar",class:e.normalizeClass(["cv-wrapper",`locale-${e.unref(o).languageCode(e.unref(u))}`,`locale-${e.unref(u)}`,`y${e.unref(p).getFullYear()}`,`m${e.unref(o).paddedMonth(e.unref(p))}`,`period-${t.displayPeriodUom}`,`periodCount-${t.displayPeriodCount}`,{past:e.unref(o).isPastMonth(e.unref(p)),future:e.unref(o).isFutureMonth(e.unref(p)),noIntl:!e.unref(o).supportsIntl}])},[e.renderSlot(n.$slots,"header",{headerProps:e.unref(Ae)}),e.createElementVNode("div",ge,[t.displayWeekNumbers?(e.openBlock(),e.createElementBlock("div",me)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(Be),(d,g)=>e.renderSlot(n.$slots,"dayHeader",{index:I(g),label:d},()=>[(e.openBlock(),e.createElementBlock("div",{key:I(g),class:e.normalizeClass([I(g),"cv-header-day"])},e.toDisplayString(d),3))])),256))]),e.createElementVNode("div",{"aria-multiselectable":t.enableDateSelection,class:"cv-weeks"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref($e),(d,g)=>(e.openBlock(),e.createElementBlock("div",{key:`${g}-week`,class:e.normalizeClass(["cv-week",`week${g+1}`,`ws${e.unref(o).isoYearMonthDay(d)}`])},[t.displayWeekNumbers?(e.openBlock(),e.createElementBlock("div",De,[e.renderSlot(n.$slots,"weekNumber",{date:d,numberInYear:e.unref(b)+g,numberInPeriod:g+1},()=>[e.createElementVNode("span",null,e.toDisplayString(e.unref(b)+g),1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",he,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o).daysOfWeek(d),(i,c)=>(e.openBlock(),e.createElementBlock("div",{key:I(c),draggable:t.enableDateSelection,class:e.normalizeClass(["cv-day",I(c),`d${e.unref(o).isoYearMonthDay(i)}`,`d${e.unref(o).isoMonthDay(i)}`,`d${e.unref(o).paddedDay(i)}`,`instance${e.unref(o).instanceOfMonth(i)}`,{today:e.unref(o).isSameDate(i,e.unref(o).today()),outsideOfMonth:!e.unref(o).isSameMonth(i,e.unref(h)),past:e.unref(o).isInPast(i),future:e.unref(o).isInFuture(i),last:e.unref(o).isLastDayOfMonth(i),lastInstance:e.unref(o).isLastInstanceOfMonth(i),hasItems:Je(i),selectionStart:e.unref(o).isSameDate(i,t.selectionStart),selectionEnd:e.unref(o).isSameDate(i,t.selectionEnd)},...t.dateClasses&&t.dateClasses[e.unref(o).isoYearMonthDay(i)]||[]]),"aria-grabbed":t.enableDateSelection?j(i):void 0,"aria-label":i.getDate().toString(),"aria-selected":j(i),"aria-dropeffect":t.enableDragDrop&&l.currentDragItem?"move":t.enableDateSelection&&l.dateSelectionOrigin?"execute":"none",onClick:D=>We(i,D),onDragstart:D=>Ue(i,D),onDrop:e.withModifiers(D=>qe(i,D),["prevent"]),onDragover:e.withModifiers(D=>ze(i,D),["prevent"]),onDragenter:e.withModifiers(D=>ve(i,D),["prevent"]),onDragleave:e.withModifiers(D=>je(i,D),["prevent"])},[e.createElementVNode("div",be,e.toDisplayString(i.getDate()),1),e.renderSlot(n.$slots,"dayContent",{day:i})],42,ye))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Ke(d),i=>e.renderSlot(n.$slots,"item",{value:i,weekStartDate:d,top:q(i)},()=>[(e.openBlock(),e.createElementBlock("div",{key:i.id,draggable:t.enableDragDrop,"aria-grabbed":t.enableDragDrop?i==l.currentDragItem:void 0,class:e.normalizeClass([i.classes,"cv-item"]),title:i.tooltip||i.title,style:e.normalizeStyle(`top:${q(i)};${i.originalItem.style}`),onDragstart:c=>Re(i,c),onMouseenter:c=>He(i,c),onMouseleave:c=>xe(i,c),onClick:e.withModifiers(c=>Ve(i,c),["stop"]),innerHTML:Ze(i)},null,46,Pe))])),256))])],2))),128))],8,pe)],2))}}),ot="",Me={class:"cv-header"},Se={class:"cv-header-nav"},Ce=["disabled"],Ie=["disabled","innerHTML"],Oe=["disabled"],Le=["disabled"],Fe={class:"periodLabel"},we=e.defineComponent({__name:"CalendarViewHeader",props:{headerProps:{type:Object,required:!0},previousYearLabel:{type:String,default:"<<"},previousPeriodLabel:{type:String,default:"<"},nextPeriodLabel:{type:String,default:">"},nextYearLabel:{type:String,default:">>"}},emits:["input"],setup(t,{emit:r}){const a=l=>r("input",l);return(l,u)=>(e.openBlock(),e.createElementBlock("div",Me,[e.createElementVNode("div",Se,[e.createElementVNode("button",{disabled:!t.headerProps.previousYear,class:"previousYear","aria-label":"Previous Year",onClick:u[0]||(u[0]=e.withModifiers(h=>a(t.headerProps.previousYear),["prevent"]))},e.toDisplayString(t.previousYearLabel),9,Ce),e.createElementVNode("button",{disabled:!t.headerProps.previousPeriod,class:"previousPeriod","aria-label":"Previous Period",onClick:u[1]||(u[1]=e.withModifiers(h=>a(t.headerProps.previousPeriod),["prevent"])),innerHTML:t.previousPeriodLabel},null,8,Ie),e.createElementVNode("button",{class:"currentPeriod","aria-label":"Current Period",onClick:u[2]||(u[2]=e.withModifiers(h=>a(t.headerProps.currentPeriod),["prevent"]))},e.toDisplayString(t.headerProps.currentPeriodLabel),1),e.createElementVNode("button",{disabled:!t.headerProps.nextPeriod,class:"nextPeriod","aria-label":"Next Period",onClick:u[3]||(u[3]=e.withModifiers(h=>a(t.headerProps.nextPeriod),["prevent"]))},e.toDisplayString(t.nextPeriodLabel),9,Oe),e.createElementVNode("button",{disabled:!t.headerProps.nextYear,class:"nextYear","aria-label":"Next Year",onClick:u[4]||(u[4]=e.withModifiers(h=>a(t.headerProps.nextYear),["prevent"]))},e.toDisplayString(t.nextYearLabel),9,Le)]),e.createElementVNode("div",Fe,[e.renderSlot(l.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.headerProps.periodLabel),1)])])]))}}),st="";m.CalendarMath=o,m.CalendarView=ke,m.CalendarViewHeader=we,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); |
{ | ||
"name": "vue-simple-calendar", | ||
"version": "6.2.0", | ||
"version": "6.2.1", | ||
"private": false, | ||
@@ -26,5 +26,5 @@ "description": "Simple Vue 3 calendar event control", | ||
}, | ||
"./dist/index.css": { | ||
"import": "./dist/index.css", | ||
"require": "./dist/index.css" | ||
"./dist/style.css": { | ||
"import": "./dist/style.css", | ||
"require": "./dist/style.css" | ||
} | ||
@@ -60,3 +60,3 @@ }, | ||
"extends": [ | ||
"plugin:vue/base", | ||
"plugin:vue/vue3-recommended", | ||
"eslint:recommended", | ||
@@ -91,3 +91,4 @@ "@vue/prettier", | ||
"declaration-block-trailing-semicolon": null, | ||
"no-descending-specificity": null | ||
"no-descending-specificity": null, | ||
"selector-class-pattern": null | ||
} | ||
@@ -94,0 +95,0 @@ }, |
@@ -26,4 +26,4 @@ # VueSimpleCalendar | ||
- [header](#header) | ||
- [dayHeader](#dayHeader) | ||
- [dayContent](#dayContent) | ||
- [dayHeader](#day-header) | ||
- [dayContent](#day-content) | ||
- [item](#item) | ||
@@ -137,4 +137,4 @@ - [weekNumber](#item) | ||
// The next two lines are optional themes | ||
import "..relative-path-to-node_modules/vue-simple-calendar/static/css/default.css" | ||
import "..relative-path-to-node_modules/vue-simple-calendar/static/css/holidays-us.css" | ||
import "..relative-path-to-node_modules/vue-simple-calendar/dist/css/default.css" | ||
import "..relative-path-to-node_modules/vue-simple-calendar/dist/css/holidays-us.css" | ||
@@ -258,5 +258,5 @@ export default { | ||
### header | ||
### Header | ||
This named slot contains the component you want to use as the calendar's header. Generally, this would show the current date range, and allow the user to navigate back and forth through time. If you don't provide a component for this slot, there will be no header, just the calendar grid. This component comes with a nice default header component, `CalendarViewHeader`, which you can either use directly, or use as a template for creating your own. (Prior to 4.0, if you didn't provide a component, a default header would be shown. That is no longer the case for reasons explained in the CHANGELOG.) | ||
The named slot `header` contains the component you want to use as the calendar's header. Generally, this would show the current date range, and allow the user to navigate back and forth through time. If you don't provide a component for this slot, there will be no header, just the calendar grid. This component comes with a nice default header component, `CalendarViewHeader`, which you can either use directly, or use as a template for creating your own. (Prior to 4.0, if you didn't provide a component, a default header would be shown. That is no longer the case for reasons explained in the CHANGELOG.) | ||
@@ -296,17 +296,17 @@ ```HTML | ||
### dayHeader | ||
### Day Header | ||
This optional named slot **replaces** the default `div.day` elements that appear in the column headers for each day of the week. If all you need to do is change how the names are shown, it's probably better to override the `locale` and/or `weekdayNameFormat` property. This slot is intended for situations where you need to override the markup within each header cell. For example, if you want each day of the week to be clickable. | ||
The optional named slot `dayHeader` **replaces** the default `div.day` elements that appear in the column headers for each day of the week. If all you need to do is change how the names are shown, it's probably better to override the `locale` and/or `weekdayNameFormat` property. This slot is intended for situations where you need to override the markup within each header cell. For example, if you want each day of the week to be clickable. | ||
This slot passes two scoped variables: `index`, 0-7, and `label`, the text it would have used in the header based on the current `locale` and `weekdayNameFormat`. | ||
### dayContent | ||
### Day Content | ||
This optional named slot allows you to provide your own contents within the date cell. The day of the month is rendered in a separate (sibling) element with the class `cv-day-number`, so you should use CSS to hide this class if you want your slot to be the only content in the cell. Note that items are rendered _above_ the individual date cells, so your slot content will appear below any items on that day. | ||
The optional named slot `dayContent` allows you to provide your own contents within the date cell. The day of the month is rendered in a separate (sibling) element with the class `cv-day-number`, so you should use CSS to hide this class if you want your slot to be the only content in the cell. Note that items are rendered _above_ the individual date cells, so your slot content will appear below any items on that day. | ||
This slot passes one scoped variable: `day`, the date associated with the cell. | ||
### item | ||
### Item | ||
This optional named slot **replaces** the `div.item` for each item (not just the contents of the items element, the entire element). Use this if you want to override _entirely_ how items are rendered. For example, on a small mobile device, you may want to show just a thin stripe, dots, or icons to indicate items, without titles or times. This slot passes three scoped variables: | ||
The optional named slot `item` **replaces** the `div.item` for each item (not just the contents of the items element, the entire element). Use this if you want to override _entirely_ how items are rendered. For example, on a small mobile device, you may want to show just a thin stripe, dots, or icons to indicate items, without titles or times. This slot passes three scoped variables: | ||
@@ -319,5 +319,5 @@ - `value`: the _normalized_ calendar item | ||
### weekNumber | ||
### Week Number | ||
This optional named slot **replaces** the content shown in the "week number" column. By default, this shows the week number of that week within its year (given your chosen startingDayOfWeek, and where week "1" is the week that contains January 1). However, using the `weekNumber` slot, you can use this column to display anything -- a number, icons, text, etc. This slow passes three scoped variables: | ||
The optional named slot `weekNumber` **replaces** the content shown in the "week number" column. By default, this shows the week number of that week within its year (given your chosen startingDayOfWeek, and where week "1" is the week that contains January 1). However, using the `weekNumber` slot, you can use this column to display anything -- a number, icons, text, etc. This slow passes three scoped variables: | ||
@@ -501,3 +501,3 @@ - `weekStart`: The date that begins the week | ||
## Plans | ||
## Future Plans | ||
@@ -551,5 +551,5 @@ - [x] Keep it simple, not a kitchen-sink control. | ||
The **default theme** stylesheet builds on this baseline to provide a restrained, clean, simple theme for the calendar, and is useful if you don't intend to create your own theme. You can include it from `static/css/default.css`. The sample app uses this stylesheet. | ||
The **default theme** stylesheet builds on this baseline to provide a restrained, clean, simple theme for the calendar, and is useful if you don't intend to create your own theme. You can include it from `dist/css/default.css`. The sample app uses this stylesheet. | ||
A third stylesheet, `static/css/holidays-us.css`, shows how simple it is to use CSS to style specific days using CSS selectors (it adds emoji icons for various holidays). | ||
A third stylesheet, `dist/css/holidays-us.css`, shows how simple it is to use CSS to style specific days using CSS selectors (it adds emoji icons for various holidays). | ||
@@ -556,0 +556,0 @@ ### What styles can I _not_ override? |
Sorry, the diff of this file is not supported yet
130520
1779