basic calendar view

package.json

@@ -8,7 +8,8 @@
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "typescript": "^3.9.7"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,24 +1,11 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
-
+import NepaliDatePicker from './nepali_date_picker'
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div >
+        <NepaliDatePicker />
     </div>
   );
 }

src/nepali_date_picker/calendar.tsx

@@ -0,0 +1,71 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './nepali_date_picker.css'
+
+class NepaliCalendar extends Component {
+    static propTypes = {
+        value: "2076-01-12"
+    }
+
+    constructor(props: Readonly<{}>) {
+        super(props)
+
+        this.state = {
+            selected_date: "2020-05-01"
+        };
+    };
+
+    render() {
+        return (
+            <div className='rl-nepali-date-panel'>
+                <div className="month-header">
+                    <div className='left-actions'>
+                        <div title="Previous Year" className='prev-year hand-cursor'>&#10094;&#10094;</div>
+                        <div title="Previous Month" className='prev-month hand-cursor'>&#10094;</div>
+                    </div>
+                    <div className='month-header-content'>
+                        August 2017</div>
+                    <div className='right-actions'>
+                        <div title="Next Month" className='next-month hand-cursor'>&#10095;</div>
+                        <div title="Next Year" className='next-year hand-cursor'>&#10095;&#10095;</div>
+                    </div>
+
+                </div>
+                <div className='rl-nepali-date-body'>
+                    <table className='rl-nepali-date-content'>
+                        <thead>
+                            <tr>
+                                <th>Mo</th>
+                                <th>Tu</th>
+                                <th>We</th>
+                                <th>Th</th>
+                                <th>Fr</th>
+                                <th>Sa</th>
+                                <th>Su</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {Array(6).fill("").map((it1,index1)=>{
+                                return <tr>
+                                    {Array(7).fill("").map((it2,index2)=>{
+                                        return <td className={`rl-picker-cell 
+                                        ${index1*7+index2==20?'active':''}
+                                        ${index1*7+index2==13?'today':''}
+
+                                        ${index1*7+index2<6||index1*7+index2>32?'other-month':''}`
+
+                                        }>
+                                            <div className='rl-picker-cell-inner'>{index1*7+index2}</div>
+                                        </td>
+                                    })}
+                                </tr>
+                            })}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default NepaliCalendar

src/nepali_date_picker/index.tsx

@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './nepali_date_picker.css'
+import NepaliCalendar from './calendar'
+
+class NepaliDatePicker extends Component {
+    static propTypes = {
+        value:"2076-01-12"
+    }
+
+    render() {
+        return (
+            <div className='rl-nepali-datepicker-wrapper'>
+                  <NepaliCalendar   />
+            </div>
+        )
+    }
+}
+
+export default NepaliDatePicker

src/nepali_date_picker/nepali_date_picker.css

@@ -0,0 +1,108 @@
+
+:root{
+    --cl-primary:#3851A3;
+    --cl-primary2: rgba(56, 81, 163, 0.2);
+    --cl-danger:#F15C61;
+    --cl-success:#3FBEB2;
+    --cl-secondary:#878F9D;
+
+}
+.hand-cursor{
+    cursor: pointer !important;
+  }
+
+.rl-nepali-datepicker-wrapper{
+
+}
+.rl-nepali-datepicker-wrapper ul {list-style-type: none;}
+
+.rl-nepali-date-panel{
+    width: 290px;
+}
+.rl-nepali-date-body{
+    padding: 8px 12px;
+}
+
+.rl-nepali-date-panel .left-actions div,
+.rl-nepali-date-panel .right-actions div
+{
+    color: #ddd;
+}
+
+.rl-nepali-date-panel .left-actions div:hover,
+.rl-nepali-date-panel .right-actions div:hover{
+    color: white;
+}
+
+.rl-nepali-date-panel .rl-nepalo-date-body{
+    padding: 8px 12px;
+}
+/* Month header */
+.month-header {
+    /* width: 100%; */
+    background: var(--cl-primary);
+    text-align: center;
+    padding: 12px 8px;
+    color: white;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+.month-header .left-actions , .month-header .right-actions{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.month-header .left-actions :first-child, .month-header .right-actions :first-child{
+    margin-right: 12px;
+}
+
+.rl-nepali-date-content{
+    width: 100%;
+}
+
+.rl-nepali-date-content th, .rl-nepali-date-content td{
+    color:black;
+    font-weight: 400;
+
+}
+.rl-picker-cell{
+    border-radius: 2px;
+    padding: 4px;
+    cursor: pointer;
+}
+.rl-picker-cell .rl-picker-cell-inner{
+    position: relative;
+    z-index: 2;
+    margin: auto;
+    min-width: 24px;
+    width: inherit;
+    text-align: center;
+    height: 24px;
+    line-height: 24px;
+    border-radius: 2px;
+    -webkit-transition: background .3s,border .3s;
+    transition: background .3s,border .3s;
+
+
+}
+.rl-picker-cell:hover  .rl-picker-cell-inner{
+    background-color: var(--cl-primary2);
+}
+
+.rl-picker-cell.active .rl-picker-cell-inner{
+    background-color: var(--cl-primary);
+    color: white;
+}
+
+.rl-picker-cell.today .rl-picker-cell-inner{
+    border-color: var(--cl-primary);
+    border: 1px solid;
+}
+
+.rl-picker-cell.other-month .rl-picker-cell-inner{
+   color:rgba(0,0,0,.4);
+   /* background-color:var(--cl-secondary) ; */
+}

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src"
+  ]
+}