@progress/kendo-react-dateinputs/calendar/components/View.js

React DateInput is a perfect input component for handling quick and efficient date values. KendoReact Date Inputs package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),r=require("prop-types"),k=require("@progress/kendo-date-math"),y=require("@progress/kendo-react-intl"),R=require("./CalendarCell.js"),M=require("./CalendarWeekCell.js"),v=require("../models/CalendarViewEnum.js"),w=require("../../utils.js"),S=require("../services/WeekNamesService.js"),a=require("@progress/kendo-react-common");function V(c){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const e in c)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(c,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>c[e]})}}return t.default=c,Object.freeze(t)}const n=V(W),C=(c,t)=>{const e=t;return n.createElement("td",{key:c,role:"gridcell",className:a.classNames(a.uCalendar.td({c:e,isEmpty:!0}))}," ")},h=class h extends n.Component{constructor(){super(...arguments),this.intl=null,this.weekService=null,this.buildWeekNumber=(t,e)=>{if(!this.firstDate(t))return C(`week-cell-${e}`);const i=this.firstDate(t),l=this.getWeekNumber(i),o=`kendo-react-calendar-week-cell-${l}`,d={value:l,firstDate:i,weekDays:t,unstyled:this.props.unstyled,onClick:this.handleWeekCellClick};return this.props.weekCell?n.createElement(this.props.weekCell,{...d,key:o},l):n.createElement(M.CalendarWeekCell,{...d,key:o},l)},this.buildRow=t=>t.map((e,s)=>{if(!e)return C(s);const i={"aria-selected":e.isSelected},l=`kendo-react-calendar-cell-${e.value.getTime()}`,o={...i,...e,isDisabled:!e.isInRange,view:this.props.activeView,showOtherMonthDays:this.props.showOtherMonthDays,allowReverse:this.props.allowReverse,unstyled:this.props.unstyled,onClick:this.handleClick,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave};return this.props.cell?n.createElement(this.props.cell,{...o,key:l},e.formattedValue):n.createElement(R.CalendarCell,{...o,key:l},e.formattedValue)}),this.firstDate=t=>{const e=this.firstWeekDateContext(t);return e?e.value:null},this.firstWeekDateContext=t=>{if(!this.weekNumber)return null;let e=0,s=t[e];for(;!s&&e<t.length;)s=t[++e];return s},this.handleClick=(t,e)=>{const{onChange:s}=this.props;if(s&&e){const i={value:k.cloneDate(t),target:this,nativeEvent:e&&e.nativeEvent,syntheticEvent:e};s.call(void 0,i)}},this.handleWeekCellClick=(t,e,s)=>{const{onWeekSelect:i}=this.props,l=e.findIndex(o=>o&&o.value===t);i&&s&&i.call(void 0,t,l,s)},this.handleMouseEnter=t=>{const{onCellEnter:e}=this.props;e&&e.call(void 0,k.cloneDate(t))},this.handleMouseLeave=t=>{const{onCellLeave:e}=this.props;e&&e.call(void 0,k.cloneDate(t))}}get min(){return this.props.min}get max(){return this.props.max}get isHorizontal(){return this.props.direction==="horizontal"}get isMonthView(){return this.props.activeView===v.CalendarViewEnum.month}get weekNumber(){return!!(this.props.showWeekNumbers&&this.props.activeView===v.CalendarViewEnum.month)}get selectedDate(){return this.props.selectedDate!==void 0?this.props.selectedDate:h.defaultProps.selectedDate}render(){const{service:t,weekDaysFormat:e,cellUID:s,focusedDate:i,bus:l,activeView:o,selectionRange:d,unstyled:D}=this.props,u=D&&D.uCalendar;this.intl=y.provideIntlService(this),this.weekService=new S.WeekNamesService(this.intl);const g=this.weekService.getWeekNames(this.weekNumber,e),N=t.rowLength(this.weekNumber),b=t.title(this.props.viewDate),E=w.getToday(),O=w.setTime(this.props.viewDate,E),q=t.data({cellUID:s,min:this.min,max:this.max,focusedDate:i,isActiveView:!l.canMoveDown(o),selectedDate:this.selectedDate,selectionRange:d,viewDate:O});return n.createElement(n.Fragment,null,this.isMonthView&&this.isHorizontal&&n.createElement("thead",{role:"rowgroup",className:a.classNames(a.uCalendar.thead({c:u}))},n.createElement("tr",{role:"row",className:a.classNames(a.uCalendar.tr({c:u}))},g.map((m,p)=>n.createElement("th",{key:p,className:a.classNames(a.uCalendar.th({c:u}))},m)))),n.createElement("tbody",{role:"rowgroup",className:a.classNames(a.uCalendar.tbody({c:u}))},!this.isHorizontal&&n.createElement("tr",{role:"presentation",className:a.classNames(a.uCalendar.tr({c:u}))},n.createElement("th",{scope:"col",colSpan:N,className:a.classNames(a.uCalendar.caption({c:u}))},b)),q.map((m,p)=>n.createElement("tr",{role:"row",className:a.classNames(a.uCalendar.tr({c:u})),key:p},this.weekNumber&&this.buildWeekNumber(m,p),this.buildRow(m)))))}getWeekNumber(t){return!this.weekNumber||!this.intl?null:k.weekInYear(t,this.intl.firstDay())}};h.propTypes={activeRangeEnd:r.oneOf(["start","end",null]),activeView:r.number.isRequired,cellUID:r.string.isRequired,direction:r.oneOf(["horizontal","vertical"]),focusedDate:r.instanceOf(Date).isRequired,max:r.instanceOf(Date).isRequired,min:r.instanceOf(Date).isRequired,onChange:r.func,selectedDate:r.oneOfType([r.instanceOf(Date),r.arrayOf(r.instanceOf(Date))]),showWeekNumbers:r.bool,showOtherMonthDays:r.bool,viewDate:r.instanceOf(Date).isRequired},h.defaultProps={direction:"vertical",selectedDate:w.getToday(),showWeekNumbers:!1};let f=h;y.registerForIntl(f);exports.View=f;