All Projects → drydenwilliams → react-calendar

drydenwilliams / react-calendar

Licence: other
A Calendar made with React and Redux with reminders and different months

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to react-calendar

Elegantcalendar
The elegant full screen calendar missed in SwiftUI.
Stars: ✭ 224 (+540%)
Mutual labels:  calendar
GCCalendar
A customizable calendar view for iOS 9+ written in Swift.
Stars: ✭ 53 (+51.43%)
Mutual labels:  calendar
aircal
Visualize Airflow's schedule by exporting future DAG runs as events to Google Calendar.
Stars: ✭ 66 (+88.57%)
Mutual labels:  calendar
Ipoli Android
Fun & Motivational Todo List with Calendar for Android written in Kotlin. Using Redux, coroutines, Firebase and Clean Architecture.
Stars: ✭ 234 (+568.57%)
Mutual labels:  calendar
Vue Datepicker Ui
Datepicker Component For Vue
Stars: ✭ 252 (+620%)
Mutual labels:  calendar
Android-Alarm
This repository is an Alarm application, demonstrate how to use multiple pending intent to set alarm's time wake up. use popup menu, RecyclerView Adapter, use SQLite to store data
Stars: ✭ 25 (-28.57%)
Mutual labels:  calendar
Calendarview
A highly customizable calendar library for Android, powered by RecyclerView.
Stars: ✭ 2,862 (+8077.14%)
Mutual labels:  calendar
shamsi date
A Flutter and Dart package for using Jalali (Shamsi, Solar, Persian or Jalaali) calendar. You can convert, format and manipulate Jalali and Gregorian (Miladi) date and times.
Stars: ✭ 59 (+68.57%)
Mutual labels:  calendar
kalendar
📅This is a lib for creating calendars
Stars: ✭ 12 (-65.71%)
Mutual labels:  calendar
ical
📅 Golang iCalendar lexer/parser implementing RFC 5545
Stars: ✭ 28 (-20%)
Mutual labels:  calendar
React Native Calendario
📆 React Native Calendar
Stars: ✭ 234 (+568.57%)
Mutual labels:  calendar
Supercalendar
@deprecated android 自定义日历控件 支持左右无限滑动 周月切换 标记日期显示 自定义显示效果跳转到指定日期
Stars: ✭ 2,732 (+7705.71%)
Mutual labels:  calendar
UltraWeekCalendar
UltraWeekCalendar - Clean UI to select day through weeks
Stars: ✭ 29 (-17.14%)
Mutual labels:  calendar
Kin Web Client
Desktop Web Client for Kin Calendar.
Stars: ✭ 234 (+568.57%)
Mutual labels:  calendar
SUCAL
Sorbonne Université calendar
Stars: ✭ 14 (-60%)
Mutual labels:  calendar
React Native Add Calendar Event
Create, view or edit events in react native using the standard iOS / Android dialogs
Stars: ✭ 225 (+542.86%)
Mutual labels:  calendar
lunar-typescript
日历、公历(阳历)、农历(阴历、老黄历)、佛历、道历,支持节假日、星座、儒略日、干支、生肖、节气、节日、彭祖百忌、每日宜忌、吉神宜趋凶煞宜忌、吉神(喜神/福神/财神/阳贵神/阴贵神)方位、胎神方位、冲煞、纳音、星宿、八字、五行、十神、建除十二值星、青龙名堂等十二神、黄道黑道日及吉凶等。lunar is a calendar library for Solar and Chinese Lunar.
Stars: ✭ 62 (+77.14%)
Mutual labels:  calendar
RaspberryPi-WeatherStation
7.5 ePaper Waveshare Outlook WeatherStation 墨水屏台历
Stars: ✭ 30 (-14.29%)
Mutual labels:  calendar
THCalendar
Calendar like iOS
Stars: ✭ 21 (-40%)
Mutual labels:  calendar
yii2-fullcalendar-scheduler
Yii 2 component for easy fullcalendar scheduler integration
Stars: ✭ 24 (-31.43%)
Mutual labels:  calendar

React/Redux Developer Task - React Calender with Reminders

The aim of this exercise is to create a demo calendar application using React & Redux. You should take no more than 1h30m to complete this task.

You should start by rendering a single month view of a calendar for the current month - along the lines of the below illustration:

Design from React calendar dev test

Once this is rendered, please implement as many of the following requirements as time allows:

  • Ability to add a new “reminder” (max 30 chars) for a user entered day and time.
  • Display reminders on the calendar view in the correct time order.
  • Allow the user to select a colour when creating a reminder and display it appropriately.
  • Properly handle overflow when multiple reminders appear on the same date.
  • Ability to edit reminders – including changing text, day and time & colour.
  • Ability to delete reminders.
  • Expand the calendar to support more than current month.

Taken from: An Example Senior React/Redux Developer Task - Developer Jobs Board


My React Calendar Dev Test

Here's what my final UI looked like.

Screenshot from React calendar dev test

Installation

yarn

yarn start // http://localhost:3000/

Comments

  • It would have been nice to have more time on this, it was very rushed for the time limit.
  • The styling is just CSS. I could have added something like classnames or styled-components but think importing the index.css works perfectly well for this example.
  • I would have liked to have cleaned up the reducers a bit and adding immutable-js.
  • Could have wrote some nice tests for the createCalendarMonth in the calender-reducer using Enzyme
  • I've gone back through and commented much of the code to help show logic for others. (please don't comment about code should be clear enough just to read without comments)

Bugs and Todo's

  • It doesn't work for December because the weeksIndex is higher than the first of Jan
  • If a day of the next month is shown on the current month. And you enter a reminder for that. Then navigate to the next month. The reminder will not show. I have not merged the reminders for this.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].