Googly Calendar

Turns your Google Calendar into a task list. Helps to keep your busy school life/regular life organized and balanced. It can be used here: https://googlycalendar.web.app/.
I wanted to improve my React knowledge so I created this. I also use it daily so I think it's pretty good :)

Features

Sync to your Google Calendar, with up to 3 calendars supported
Mark tasks as completed/incomplete
Stored information inside Google Calendar with emoji, and can be synced across multiple browsers
Identify course codes in event names
Display information in a pleasing way and modern UI
Dark mode and auto dark mode
Custom animations
Color coded courses
Custom course color codes
Identifies courses automatically of the format XXX000 or XXXX000 where X is any letter and 0 is any number before the task name in the calendar
Pin tasks top top of list
Specify key words to highlight tasks
Specify key words to hide specific events
Support for description of events
Overdue events become red
Can add list of important events to highlight so you don't miss them
Support for 'all day' events
All possible sorting combinations are remembered when reloading the calendar
7 day view dynamically adjusts to use specification for 'Number of days to view setting'
Can mark tasks as complete in 7 day view
Can change the range of days to view in the 7 day view by navigating with arrows
Sort information based on Course/Completed/Task Name/Date set
Save settings to web browser cache
Save last preferred sorting method
Save last navigated tab
Specify number of events to load
Specify number of days to view tasks from
Load events before the current time (specify in settings)
Refresh and sync new data from your Google Calendar
Error detection when session times out
Welcome message, with change log and first time sign in button
Auto reload calendar when needed, for example on login
Configurable Pomodoro timer
Pomodoro timer sounds
Pomodoro timer tracking, and motivational messages
Calculate and track your marks across courses
Add any course name and keep track of the marks

Create and run a local copy

Setting up API keys

Setup Google API Keys
Create file in root of project (i.e. .\googleycalendar\) called apiGoogleconfig.json
Get Client ID (OAuth 2.0 Client IDs) and Key (API keys) from Google Developers website and pass in the following format into the JSON file:

{
    "clientId": "[Client ID]",
    "apiKey": "[Key]",
    "scope": "https://www.googleapis.com/auth/calendar",
    "discoveryDocs": ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"]
}

First time install

Ensure React and NPM are properly installed

cd .\googly-calendar\
npm install

Running development server after install

cd .\googly-calendar\
npm start
open localhost:3000 in preferred web browser

Hosting with Firebase

Proper project directory cd googly-calendar
Install the dependency npm install -g firebase-tools
Login to Firebase firebase login
Initialize Firebase firebase init
Yes to proceed
Select Hosting: Configure and deploy Firebase Hosting sites and hit enter
Select Use an existing project
Select googly-calendar (Googly Calendar)
Answer: What do you want to use as your public directory? build
Answer: Configure as a single-page app (rewrite all urls to /index.html)? No
Answer: Set up automatic builds and deploys with GitHub? No

Deploy to Firebase

Option 1:

Build the project npm run build
(Optional) Check out built project firebase serve --only hosting
Deploy to Firebase firebase deploy

Option 2:

Add to package.json

"scripts": {
    ...
    "predeploy": "npm run build",
    "deploy": "firebase deploy"
}

Use npm run deploy for all deployment

tesbarmix4/GooglyCalendar

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages