@progress/kendo-react-dateinputs/calendar/components/Calendar.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 P=require("react"),a=require("prop-types"),h=require("@progress/kendo-react-common"),o=require("@progress/kendo-date-math"),S=require("@progress/kendo-react-intl"),M=require("./ViewList.js"),A=require("./Navigation.js"),d=require("../models/CalendarViewEnum.js"),r=require("../../utils.js"),q=require("../services/BusViewService.js"),L=require("../services/DOMService.js"),T=require("../services/NavigationService.js"),B=require("../services/ScrollSyncService.js");function R(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(i,t,e.get?e:{enumerable:!0,get:()=>c[t]})}}return i.default=c,Object.freeze(i)}const g=R(P),b=c=>c?c.virtualization:null,y=(c=v.defaultProps.min,i=v.defaultProps.max,t,e)=>e!==void 0?e!==null&&r.isInRange(o.getDate(e),c,i)?e:null:t!==null&&r.isInRange(o.getDate(t),c,i)?t:null,l=class l extends g.Component{constructor(i){super(i),this.scrollSyncService=null,this.focusedDate=null,this.Navigation=null,this.calendarViewList=null,this._element=null,this.intl=null,this.service=null,this.isActive=!1,this.didNavigationChange=!1,this.focus=()=>{this._element&&this._element.focus()},this.shouldScroll=()=>this.didNavigationChange,this.handleScroll=e=>{this.scrollSyncService&&this.scrollSyncService.sync(b(this.Navigation),b(this.calendarViewList),e)},this.handleNavigationChange=e=>{if(this.props.disabled)return;this.didNavigationChange=!0;const s=o.cloneDate(e.value);this.setState({focusedDate:s})},this.handleViewChange=({view:e})=>{this.scrollSyncService&&this.scrollSyncService.configure(e),this.setState({activeView:e})},this.handleDateChange=e=>{const s=o.cloneDate(e.value),n=o.cloneDate(e.value),f=this.bus.canMoveDown(this.state.activeView);if(this.props.disabled)return;if(f)if(e.isTodayClick)this.bus.moveToBottom(this.state.activeView);else{this.bus.moveDown(this.state.activeView,e.syntheticEvent),this.setState({focusedDate:n});return}this.setState({value:s,focusedDate:n}),this.valueDuringOnChange=s;const{onChange:p}=this.props;if(p){const u={syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,value:s,target:this};p.call(void 0,u)}this.valueDuringOnChange=void 0},this.handleFocus=e=>{if(this.isActive=!0,!this.calendarViewList)return;this.calendarViewList.focusActiveDate();const{onFocus:s}=this.props;s&&s.call(void 0,e)},this.handleBlur=e=>{if(this.isActive=!1,!this.calendarViewList)return;this.calendarViewList.blurActiveDate();const{onBlur:s}=this.props;s&&s.call(void 0,e)},this.handleKeyDown=e=>{const{keyCode:n,ctrlKey:f,metaKey:p}=e;if(!(!this.focusedDate||!this.service)){if(n===84&&this.setState({focusedDate:r.getToday()}),(f||p)&&(n===h.Keys.left||n===h.Keys.right)){if(this.props.disabled)return;this.didNavigationChange=!0,this.focusedDate.getDate()===31&&this.focusedDate.setDate(30);const u=n===h.Keys.left?this.focusedDate.getMonth()-1:this.focusedDate.getMonth()+1,m=new Date(this.focusedDate.setMonth(u)),V=o.cloneDate(m);this.setState({focusedDate:V})}if(n===h.Keys.enter){if(this.value!==null&&o.isEqualDate(this.focusedDate,this.value)){const m=r.dateInRange(this.focusedDate,this.min,this.max);b(this.calendarViewList).scrollToIndex(this.service.skip(m,this.min))}const u={syntheticEvent:e,nativeEvent:e.nativeEvent,value:this.focusedDate,target:this};this.handleDateChange(u)}else{const u=r.dateInRange(this.navigation.move(this.focusedDate,this.navigation.action(e),this.state.activeView,this.service,e),this.min,this.max);if(o.isEqualDate(this.focusedDate,u))return;this.setState({focusedDate:u})}e.preventDefault()}},this.handleMouseDown=e=>{e.preventDefault()},this.handleClick=e=>{this._element&&this._element.focus({preventScroll:!0})};const t=y(this.min,this.max,this.props.defaultValue||l.defaultProps.defaultValue,this.props.value);this.state={value:t,activeView:r.viewInRange(d.CalendarViewEnum[i.defaultActiveView],this.bottomView,this.topView),focusedDate:r.dateInRange(i.focusedDate||t||r.getToday(),this.min,this.max)},this.dom=new L.DOMService,this.bus=new q.BusViewService(this.handleViewChange),this.navigation=new T.NavigationService(this.bus),this.oldValue=t}get cellUID(){return this.props.id+"-cell-uid"}get id(){return this.props.id+"-id"}get element(){return this._element}get value(){return this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value}get min(){return o.getDate(this.props.min!==void 0?this.props.min:l.defaultProps.min)}get max(){return o.getDate(this.props.max!==void 0?this.props.max:l.defaultProps.max)}get bottomView(){return d.CalendarViewEnum[this.props.bottomView!==void 0?this.props.bottomView:l.defaultProps.bottomView]}get topView(){return d.CalendarViewEnum[this.props.topView!==void 0?this.props.topView:l.defaultProps.topView]}componentDidMount(){const{unstyled:i}=this.props;Promise.resolve().then(()=>{h.setScrollbarWidth(),this._element&&(this.dom.calculateHeights(this._element,i),this.scrollSyncService=new B.ScrollSyncService(this.dom),this.scrollSyncService.configure(this.state.activeView),this.forceUpdate())})}componentDidUpdate(i,t){h.setScrollbarWidth(),t.activeView!==this.state.activeView&&this.scrollSyncService&&this.scrollSyncService.configure(this.state.activeView),this.calendarViewList&&(this.isActive?this.calendarViewList.focusActiveDate:this.calendarViewList.blurActiveDate)(),this.didNavigationChange=!1,this.isActive&&(this.oldValue=this.value)}render(){const{_ref:i,unstyled:t,bottomView:e,topView:s,disabled:n,weekNumber:f,mobileMode:p,className:u}=this.props;i&&i(this);const m=t&&t.uCalendar,V=this.value!==null&&this.oldValue!==null?!o.isEqualDate(this.value,this.oldValue):this.value!==this.oldValue,I=r.viewInRange(this.state.activeView,d.CalendarViewEnum[e!==void 0?e:l.defaultProps.bottomView],d.CalendarViewEnum[s!==void 0?s:l.defaultProps.topView]),D=y(this.min,this.max,this.value,this.value),O=D?o.getDate(D):null;this.focusedDate=o.getDate(r.dateInRange(V&&D!==null?D:this.state.focusedDate,this.min,this.max)),this.intl=S.provideIntlService(this),this.bus.configure(this.bottomView,this.topView),this.service=this.bus.service(I,this.intl);const{smoothScroll:x=Number.parseFloat(g.version)<18}=this.props,N=h.classNames(h.uCalendar.wrapper({c:m,disabled:n,weekNumber:f,mobileMode:p}),u),k=[this.props.navigation&&g.createElement(A.Navigation,{key:0,ref:w=>{this.Navigation=w},activeView:this.state.activeView,focusedDate:this.focusedDate,min:this.min,max:this.max,onScroll:this.handleScroll,onChange:this.handleNavigationChange,service:this.service,dom:this.dom,navigationItem:this.props.navigationItem,tabIndex:this.props.tabIndex,unstyled:t}),g.createElement(M.ViewList,{key:1,ref:w=>{this.calendarViewList=w},activeView:this.state.activeView,focusedDate:this.focusedDate,min:this.min,max:this.max,bus:this.bus,shouldScroll:this.shouldScroll,onScroll:this.handleScroll,service:this.service,cell:this.props.cell,weekCell:this.props.weekCell,dom:this.dom,smoothScroll:x,showWeekNumbers:this.props.weekNumber,onChange:this.handleDateChange,value:O,cellUID:this.cellUID,headerTitle:this.props.headerTitle,header:this.props.header,tabIndex:this.props.tabIndex,weekDaysFormat:this.props.weekDaysFormat,showOtherMonthDays:this.props.showOtherMonthDays,unstyled:t})];return g.createElement("div",{ref:w=>{this._element=w},className:N,id:this.props.id||this.id,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-disabled":this.props.disabled,tabIndex:this.props.disabled?void 0:this.props.tabIndex||0,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onClick:this.handleClick},k)}};l.displayName="Calendar",l.propTypes={className:a.string,defaultActiveView:a.oneOf(["month","year","decade","century"]),defaultValue:a.instanceOf(Date),disabled:a.bool,focusedDate:a.instanceOf(Date),id:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,weekDaysFormat:a.oneOf(["short","abbreviated","narrow"]),max:a.instanceOf(Date),min:a.instanceOf(Date),navigation:a.bool,smoothScroll:a.bool,onBlur:a.func,onChange:a.func,onFocus:a.func,tabIndex:a.number,value:a.instanceOf(Date),weekNumber:a.bool,topView:(i,t,e)=>{const s=i[t],n=i.bottomView;return s&&n&&d.CalendarViewEnum[s]<d.CalendarViewEnum[n]?new Error(`Invalid prop + ${t} suplied to ${e}.
                    ${t} can not be smaller than bottomView.
                    `):null},bottomView:(i,t,e)=>{const s=i[t],n=i.topView;return s&&n&&d.CalendarViewEnum[s]>d.CalendarViewEnum[n]?new Error(`Invalid prop + ${t} suplied to ${e}.
                    ${t} can not be bigger than topView.
                    `):null}},l.defaultProps={disabled:!1,min:r.MIN_DATE,max:r.MAX_DATE,weekDaysFormat:"short",navigation:!0,defaultActiveView:"month",defaultValue:null,topView:"century",bottomView:"month",showOtherMonthDays:!1};let v=l;const C=h.createPropsContext(),E=h.withIdHOC(h.withPropsContext(C,h.withUnstyledHOC(v)));E.displayName="KendoReactCalendar";S.registerForIntl(v);exports.Calendar=E;exports.CalendarPropsContext=C;exports.CalendarWithoutContext=v;