# Required property 'timeZone' missing or undefined React \`CalendarInput\` Component

**URL:** <https://community.dhis2.org/t/required-property-timezone-missing-or-undefined-react-calendarinput-component/59789>\
**Category:** App Development\
**Created:** [1 July 2024 12:59 UTC](https://community.dhis2.org/t/required-property-timezone-missing-or-undefined-react-calendarinput-component/59789 "2024-07-01T12:59:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![redet](https://dhis2.b-cdn.net/user_avatar/community.dhis2.org/redet/32/41782_2.png) [@redet](https://community.dhis2.org/u/redet)\
**Post date:** [1 July 2024 12:59 UTC](https://community.dhis2.org/t/required-property-timezone-missing-or-undefined-react-calendarinput-component/59789/1 "2024-07-01T12:59:20Z")

</div>

### Title: “Error with CalendarInput Component: ‘required property ‘timeZone’ missing or undefined’”

Hello Community,

I am currently working on application using React and have integrated the DHIS2 UI library for various components. However, I’ve encountered an issue when trying to use the `CalendarInput` component.

#### Error Message:

```auto
ERROR
required property 'timeZone' missing or undefined
TypeError: required property 'timeZone' missing or undefined
    at PrepareTemporalFields (http://localhost:3000/static/js/bundle.js:137726:32)
    at ToTemporalZonedDateTime (http://localhost:3000/static/js/bundle.js:138046:15)
    at ZonedDateTime.from (http://localhost:3000/static/js/bundle.js:144895:201)
    at http://localhost:3000/static/js/bundle.js:33115:103
    at mountMemo (http://localhost:3000/static/js/bundle.js:106169:23)
    at Object.useMemo (http://localhost:3000/static/js/bundle.js:106426:20)
    at useMemo (http://localhost:3000/static/js/bundle.js:122132:25)
    at useCalendarWeekDays (http://localhost:3000/static/js/bundle.js:33102:56)
    at useDatePicker (http://localhost:3000/static/js/bundle.js:33469:114)
    at Calendar (http://localhost:3000/static/js/bundle.js:2343:99)

```

#### My Code:

```javascript
import React from 'react';
import { CalendarInput } from '@dhis2/ui';

const MyComponent = () => {
    return (
        <div>
            <CalendarInput
                calendar="ethiopic"
                date="2019-01-01"
                dir="ltr"
                locale="am-ET"
                timeZone="Europe/London"
                onChange={console.log}
            />
        </div>
    );
};

export default MyComponent;

```

#### What I’ve Tried:

1. Double-checked the documentation to ensure I’m using the component correctly.
2. Attempted to pass different timezone formats to the `timeZone` prop.
3. Searched through community forums and GitHub issues for similar errors but haven’t found a solution.
4. Verified that I have set the `timeZone` prop on the `CalendarInput` component.

#### Additional Information:

- DHIS2 App Runtime Version: 3.10.4
- Operating System: Ubuntu 20.04

It seems like there might be an issue with how I’m implementing the `timeZone` prop or there might be another underlying problem. Could someone please guide me on how to correctly use the `timeZone` prop with the `CalendarInput` component or provide any other insights on resolving this error?

@mozafar

---

<div class="post-metadata">

**Author:** ![redet](https://dhis2.b-cdn.net/user_avatar/community.dhis2.org/redet/32/41782_2.png) [@redet](https://community.dhis2.org/u/redet)\
**Post date:** [1 July 2024 13:32 UTC](https://community.dhis2.org/t/required-property-timezone-missing-or-undefined-react-calendarinput-component/59789/2 "2024-07-01T13:32:27Z")

</div>

### Solution

I found a solution to the issue of the `required property 'timeZone' missing or undefined` error when using the `CalendarInput` component.

The problem can be resolved by updating the `@dhis2/cli-app-scripts` package to the latest version. Here are the steps:

1. Open your `package.json` file.
2. Update the `@dhis2/cli-app-scripts` dependency to the latest version. At the time of writing, the latest version is `11.5.1`.

```json
"@dhis2/cli-app-scripts": "^11.5.1"

```

1. Save the `package.json` file.
2. Run `yarn install` to update your dependencies.

To check for the latest version, you can visit [this link](https://classic.yarnpkg.com/en/package/@dhis2/cli-app-scripts).

After updating, your application should no longer encounter the `required property 'timeZone' missing or undefined` error.

---

<div class="post-metadata">

**Author:** ![Gassim](https://dhis2.b-cdn.net/user_avatar/community.dhis2.org/gassim/32/35347_2.png) [@Gassim](https://community.dhis2.org/u/Gassim)\
**Post date:** [2 July 2024 13:47 UTC](https://community.dhis2.org/t/required-property-timezone-missing-or-undefined-react-calendarinput-component/59789/3 "2024-07-02T13:47:12Z")

</div>

Amazing, thanks for sharing! 🙂

---

<div class="post-metadata">

**Author:** ![Rene](https://dhis2.b-cdn.net/user_avatar/community.dhis2.org/rene/32/36035_2.png) [@Rene](https://community.dhis2.org/u/Rene)\
**Post date:** [2 July 2024 13:55 UTC](https://community.dhis2.org/t/required-property-timezone-missing-or-undefined-react-calendarinput-component/59789/4 "2024-07-02T13:55:17Z")

</div>

Looks like you were indeed on a version that had a broken UI component. You can find more details here: [[LIBS-543] - Jira](https://dhis2.atlassian.net/browse/LIBS-543)

The actual fix is to update the UI library to at least version 8.9.8

Relevant PR:

> <https://github.com/dhis2/ui/pull/1525>
>
> Updates @dhis2/multi-calendar-dates dependency (part of \[LIBS-543\](https://dhis2….atlassian.net/jira/software/c/projects/LIBS/issues/LIBS-543))
> 
> \---
> 
> \### Description
> 
> Dependency bump of @dhis2/multi-calendar-dates
> 
> \---
> 
> \### Known issues
> 
> \- \[\] 
> 
> \---
> 
> \### Checklist
> 
> \- \[\] API docs are generated
> \- \[\] Tests were added
> \- \[\] Storybook demos were added
> 
> \_These are not relevant as this is bumping @dhis2/multi-calendar-dates dependency to pick up fix on timeZone related to change in temporal implementation\_
> 
> 
> 
> \[LIBS-543\]: https://dhis2.atlassian.net/browse/LIBS-543?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ