Gig  Overview: The goal is to convert a Calendar Page into a fully responsive and functional interface using Vue.js 3 Composition API and TailwindCSS. This page will include features such as event scheduling, viewing upcoming events, and navigating between months/weeks/days. The page will provide a user-friendly experience while ensuring seamless functionality. You are provided with a link to UI design for the conversion of the Calendar page.

Scope of Work:

1. Calendar Overview Page:

-Required Features:

-A calendar interface displaying:

-Month, week, and day views.

-Days and dates clearly marked

-Events displayed within appropriate date/time slots.

-Navigation controls:

-Next and previous buttons for navigating between months/weeks.

-An active tab to switch views (month, week, day).

-Dynamic event fetching and rendering from the API.

-Hover or click functionality to view event details.

-Filter button.

Expected Tasks:

-Vue.js 3 Composition API:

-Develop a dynamic calendar component that adjusts based on selected views.

-Integrate event data fetching and display using API calls.

-Add functionality for navigating between months, weeks, and days.

TailwindCSS:

-Style the calendar layout for clarity and responsiveness.

-Ensure a visually appealing display for events (e.g., color-coded event tags).

2. Event Details Modal:

Required Features:

-A modal displaying:

-Event title, description, time, and location.

-Buttons for editing or deleting events.

"Add to Calendar" option.

-Smooth animations for opening and closing the modal.

Expected Tasks:

-Vue.js 3 Composition API:

-Develop a reusable modal component.

-Fetch and display detailed event data on demand.

TailwindCSS:

-Style the modal/sidebar for a modern and intuitive design.

-Ensure mobile-friendly accessibility.

3. Add/Edit Event Form:

Required Features:

-A form allowing users to:

-Add new events with title, description, date, time, and location.

-Edit existing events with pre-filled values.

-Form validation for required fields.

-Success/error messages upon submission.

Expected Tasks:

-Vue.js 3 Composition API:

-Create a form component for adding/editing events.

-Handle form submission and integrate with the API.

TailwindCSS:

-Design a clean and organized form layout.

-Ensure accessibility and responsive behavior.

Required Skills:

Strong proficiency in Vue.js 3 with experience in using the Composition API.

Expertise in TailwindCSS for creating responsive and modern UI layouts.

Ability to work with Vue.js state management (Vuex or Composition API’s reactive states) for dynamic data rendering.

Experience with form validation and handling user input securely in frontend applications.

Knowledge of responsive design principles and mobile-first development.

Familiarity with Git for version control.

Design & Aesthetic Requirements:

Color Scheme:

-Primary color: #D50036 

-Secondary color: #C4C4C4

-Primary-green: #00B454

-Primary-yellow:#F39D1C

-Primary-gray:#4B5054

-Primary-black:#0F151F

-Primary-red:#E50303

-Background color: #F5F5F5 

-Text color: #000000, #D50036, #FFFFFF 

-Button color: #D50036

-Border color: #E5E5E5

• These color codes are the company’s brand colors and design guide

Fonts:

-Use a clean, modern font like Source-san.

Spacing:

-Generous padding and margin for a spacious design that enhances readability.

Responsiveness:

-Ensure that all pages are responsive across all device sizes, from desktop to mobile.

Layout:

-Use TailwindCSS grid and flex utilities for consistent alignment.

-Ensure buttons, progress bars, and question layouts are accessible and easy to interact with on all devices.

Expectations: 

As a Techo chosen to participate in this gig, we have some expectations.

-Timely Completion: complete each gig within the given timeframe. If the gig has not been completed within this frame, the project will be re-assigned.

-Communication: Stay in touch with the Community Manager for guidance, support and feedback throughout the project. This can be done through the chat box in the My Gigs section underneath the gig description.

-Work-Ethic Alignment: Make a concerted effort to comply with our standards.

Figma Link: https://www.figma.com/design/3hIvRjqCKBuh9uBAHp8giG/Calendar?node-id=0-1&p=f&t=YZD2rcdJGE5jLL4r-0

Repository Link: Clone from lms_calendar branch for this project. https://github.com/suburban-fiber-company/Suburban_LMS_Student/tree/lms_calendar