Contact person: Business Client

Phone:Show

Email:Show

Location: Amman, Jordan

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"I need a clean, standalone implementation of FullCalendar’s Resource TimeGrid so users can book conference rooms and assign personnel in one unified view. All resources and existing events must be pulled from my current REST-style API (JSON), and any changes made in the calendar—create, resize, drag-and-drop, or delete—should be pushed back through the same endpoints in real time.

I am not using any front-end framework, so the solution has to run on plain HTML5, vanilla JavaScript, and CSS3 only. No React, Vue, or jQuery helpers, please. Styling can stay close to FullCalendar’s defaults; I just need a tidy CSS file where I can later tweak colours and fonts.

Key points you’ll cover:
• Initialise FullCalendar in Resource TimeGrid mode with hour blocks and adjustable slot duration.
• Show two resource groups—“Conference rooms” and “Personnel”—fetched from the API on page load.
• Render existing bookings from the API, respecting start/end times and resource mapping.
• Enable interactive booking: click-to-create, drag-to-resize, drag-and-drop between resources, and immediate persistence via fetch() calls.
• Handle basic collision checks (no double booking the same room or person).
• Return graceful error messages from failed API calls.

Deliverables:
1. [login to view URL], [login to view URL], and [login to view URL] with clearly commented code.
2. A short README explaining where to set my API base URL and any headers.
3. A brief screencast or GIF showing the drag-and-drop workflow working against a mock endpoint (optional but helpful for quick testing).

If you have shipped a similar FullCalendar resource grid before, mention it; otherwise, just outline how you’ll structure the fetch calls and event handlers. I expect concise, maintainable code and a turnaround that lets me plug the files straight into my existing project folder." (client-provided description)