Scheduling Calendar App

Frontend Engineer

React

styled-components

Tailwind CSS

Scheduling Calendar

This is a Scheduling Calendar application built with React, Tailwind CSS, dayjs, and Ant Design. It utilizes Context to manage state across the application and offers various features to schedule appointments effectively.

Features

Day, Week, and Month Views: Switch between different calendar views to suit your needs.

Appointment Scheduling: Click on a day to open a modal and schedule an appointment with specific time and details.

Local Storage: Appointments are saved in local storage for persistent access.

Fully Responsive: The calendar adapts seamlessly to different screen sizes and devices.

Built with Context: Simplifies state management across the application.

Tailwind CSS: Utilizes Tailwind CSS for rapid and responsive styling.

Ant Design: Leverages Ant Design components for a clean and modern UI.

Requirements

Node.js 16+

NPM 7+

Installation

Clone this repository:

git clone https://github.com/layan2k/calender-main.git

Move into the project directory:

cd calendar-main

Install dependencies:

npm install or pnpn install or yarn

Development

Start the development server:

npm run dev or pnpm run dev or yarn dev

Open

http://localhost:5173

in your browser to access the application

Build for Production

Build the application for production:

npm run build or pnpm run buil or yarn build

The production build will be generated in the build directory.

Deployment

You can deploy the application to any static hosting platform like Netlify, Vercel, or Heroku.

Localstorage

The application utilizes localstorage to persist appointments. Appointments are stored as an array of objects, where each object contains the following properties:

{ date: "2023-12-05", time: "10:00", title: "Meeting with John Doe", details: "Discuss project progress and next steps.", }

Project Demo

https://ucalender.netlify.app/

Contributing

We welcome contributions to this project! If you have any bug fixes, feature suggestions, or pull requests, please feel free to create an issue or submit your contribution through GitHub.