Public
Like
3
FlexCal
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data β all from the browser, and deployed in milliseconds.
index.ts
https://malcolmocean--bd5c7b0c366811f088eb9e149126039e.web.val.run
A flexible Google Calendar alternative interface that syncs two-way with Google Calendar via OAuth. This application allows for creating and using different views and interfaces for Google Calendar data.
- OAuth integration with Google Calendar
- Two-way sync with Google Calendar
- Vertical-scrolling year view with week-grid layout
- Custom event formatting and colorization based on rules
- Secondary calendar for metadata storage
- Extensible architecture for future interfaces
βββ backend/
β βββ index.ts # Main entry point and API routes
β βββ auth/
β β βββ google-oauth.ts # Google OAuth implementation
β βββ calendar/
β β βββ api.ts # Google Calendar API integration
β β βββ events.ts # Event handling functions
β β βββ metadata.ts # Metadata calendar management
β βββ utils/
β βββ formatting.ts # Event formatting utilities
βββ frontend/
β βββ index.html # Main HTML template
β βββ index.tsx # Frontend entry point
β βββ components/
β β βββ App.tsx # Main application component
β β βββ Auth.tsx # Authentication component
β β βββ views/
β β β βββ ViewSelector.tsx # Interface for selecting views
β β β βββ YearView/ # Year view implementation
β β β β βββ index.tsx # Year view component
β β β β βββ Day.tsx # Day cell component
β β β β βββ Week.tsx # Week row component
β β β βββ [Future Views]/ # Placeholder for future views
β β βββ settings/
β β βββ FormatRules.tsx # UI for managing formatting rules
β β βββ Settings.tsx # General settings component
β βββ utils/
β βββ date.ts # Date manipulation utilities
β βββ formatting.ts # Event formatting utilities
βββ shared/
βββ types.ts # Shared TypeScript types
βββ constants.ts # Shared constants
- Authenticate with your Google account
- NB: this app isn't verified with Google, so in order to log in you either need to remix this and set up your own google auth, or DM me your email so I can add you to the list of testers
- The app will create a secondary calendar for metadata if it doesn't exist
- View your calendar in the vertical-scrolling year view
- Create formatting rules for events
Events can be formatted based on various criteria:
- Event title contains specific text
- Event is in a specific calendar
- Event has specific properties (all-day, recurring, etc.)
- Custom rules using simple expressions
Formatting options include:
- Background color
- Text color
- Custom display format (e.g., "XYZβABC" for flights)
- Visibility options
The architecture is designed to easily add new views and interfaces in the future.