Frontend for Calendar Filter

A frontend application for managing and filtering calendar events using FullCalendar.

Usage

1. Clone the repository:

   git clone https://git.ldlda.com/lda/cal_filter_fe.git
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

Features

• FullCalendar integration for event visualization.
• UI for managing event sources and applying filters.
• Responsive design with Bootstrap.

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

ass pull

Got it! Let’s create a long-term plan to improve your project. The goal is to make it feature-rich, maintainable, and user-friendly while leveraging FullCalendar’s capabilities and your existing backend.

---

Long-Term Plan

1. Frontend Filtering

Move filtering logic (date, regex, etc.) to the frontend using FullCalendar’s getEvents() and eventDataTransform.

Steps:

1. Use getEvents() to retrieve all events from the calendar.
2. Apply filters (date range, regex, etc.) directly on the frontend.
3. Add a UI for users to specify filters (e.g., date pickers, regex input).
4. Use eventDataTransform to preprocess events when they are fetched.

---

2. Loading State

Replace the current placeholder/spinner logic with FullCalendar’s built-in loading callback.

Steps:

1. Use the loading callback to show/hide a spinner or loading message.
2. Remove manual spinner logic from your code.

---

3. List of Event Sources

Display a list of all added event sources and allow users to:

• Remove sources.
• Refetch events from a source.
• Toggle visibility of events from a source.

Steps:

1. Use getEventSources() to retrieve all sources.
2. Display them in a list with controls (e.g., remove, refetch, toggle).
3. Use EventSource::remove() and EventSource::refetch() for interactivity.

---

4. Improve CORS Handling

If the backend is only for bypassing Google Calendar’s CORS issues, consider:

• Adding a proxy endpoint for other calendar services.
• Allowing users to directly fetch events from public calendars without needing the backend.

---

5. Modularize Calendar Configuration

Centralize FullCalendar configuration into a reusable function or object.

Steps:

1. Create a getCalendarConfig() function that returns the calendar configuration.
2. Pass dynamic options (e.g., theme, initial view) as arguments.

---

6. Add Advanced Features

Enhance the app with the following features:

• Event Editing: Allow users to edit event details (e.g., title, date).
• Event Creation: Add a form to create new events.
• Export Events: Allow users to export filtered events as .ics files.

---

7. Improve UI/UX

Make the app more user-friendly:

• Add tooltips for buttons and inputs.
• Improve responsiveness for mobile devices.
• Add a dark mode toggle.

---

8. Clean Up CSS

• Remove hacky CSS rules (e.g., padding-bottom: 1em for #calendar).
• Use consistent spacing and alignment.
• Add comments to explain key styles.

---

9. Testing

Add automated tests for:

• Filtering logic.
• Event source management.
• UI interactions.

---

Implementation Plan

Phase 1: Frontend Filtering

1. Add a filter UI (date pickers, regex input).
2. Use getEvents() to retrieve events and apply filters.
3. Update the calendar dynamically based on the filtered events.

---

Phase 2: Loading State

1. Replace manual spinner logic with FullCalendar’s loading callback.
2. Test loading behavior with multiple event sources.

---

Phase 3: Event Source Management

1. Use getEventSources() to display a list of sources.
2. Add controls for removing, refetching, and toggling sources.

---

Phase 4: Advanced Features

1. Add event editing and creation forms.
2. Implement event export functionality.

---

Phase 5: UI/UX Improvements

1. Add tooltips and improve responsiveness.
2. Implement dark mode.

---

Phase 6: Cleanup and Testing

1. Refactor CSS and JavaScript for maintainability.
2. Add automated tests.

---

Next Steps

Let me know which phase you’d like to start with, and I’ll help you implement it step by step!