Dayweave integration guide

Build a jQuery workshop calendar and date picker with Dayweave

A small workshop schedule needs clear dates, readable event details and a way to move to a chosen day. This example builds a three-event calendar and connects a separate date input to the same calendar instance.

Dayweave is a free original jQuery event calendar and reusable date picker. You can configure events in its studio, keep an editable JSON project and export a self-contained interactive HTML page. The example below uses fictional events and local files from the download.

Choose the setup that fits your page

For a standalone calendar, open the free studio, edit the fictional sample and use Export standalone HTML. The downloaded HTML includes event data, styling, jQuery, the calendar and the picker.

For an existing jQuery page, use the component files and initialize the calendar on a specific host element. The integration in this guide uses that route. Download and extract Dayweave without changing its folder structure. No dependency installation, account or paid API is required for use.

The extracted studio needs static HTTP so it can read its bundled sample and export runtime. For example, serve the extracted directory on your own computer:

python3 -m http.server 8790 --bind 127.0.0.1 --directory /path/to/dayweave

Open http://127.0.0.1:8790/app/index.html for the local studio. Opening the studio directly as a file: URL is outside its supported startup path. A downloaded standalone HTML output already contains its runtime and does not need that server service.

Use a practice schedule with an overlapping day

Call the calendar Studio Sessions practice calendar. Use these made-up entries to check both a date span and a single-day event:

Dayweave includes both ends of a date span. The printmaking event belongs to November 5, 6 and 7. It displays its start time on November 5 and “Continues” on later days. If you need a separate timed session every morning, enter separate events. There is no recurring-event rule or timezone conversion.

Initialize a calendar and attach the date picker

Create studio-calendar.html at the root of the extracted folder, beside app and vendor. Use the following complete example. Its script order is jQuery, Dayweave core, then the calendar/picker plugin. In an existing site, use your compatible jQuery instance and avoid loading a second copy; this local example uses the included 3.7.1 file.

<!doctype html>
<html lang="en-US"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Studio Sessions practice calendar</title>
<link rel="stylesheet" href="app/dayweave.css"></head><body>
<h1>Studio Sessions practice calendar</h1>
<div id="studio-calendar"></div>
<label for="visit-date">Choose a date</label>
<input id="visit-date" value="2026-11-06">
<script src="vendor/jquery-3.7.1.min.js"></script>
<script src="app/core.js"></script>
<script src="app/dayweave.js"></script>
<script>
const events = [
  {
    "id": "print_workshop",
    "title": "Printmaking workshop",
    "start": "2026-11-05",
    "end": "2026-11-07",
    "time": "09:30",
    "category": "Workshop",
    "location": "Practice Room A",
    "description": "A fictional three-day session. The listed time is the first-day start.",
    "url": ""
  },
  {
    "id": "portfolio_review",
    "title": "Portfolio review",
    "start": "2026-11-06",
    "end": "2026-11-06",
    "time": "14:00",
    "category": "Review",
    "location": "Practice Room B",
    "description": "A fictional single-day review.",
    "url": ""
  },
  {
    "id": "open_studio",
    "title": "Open studio",
    "start": "2026-11-14",
    "end": "2026-11-14",
    "time": "",
    "category": "Open studio",
    "location": "Practice Workshop",
    "description": "A fictional all-day practice event.",
    "url": ""
  }
];
const state = {
  "month": "2026-11",
  "selected": "2026-11-06",
  "view": "month",
  "query": "",
  "category": "all"
};
jQuery('#studio-calendar').dayweave({ events, state });
jQuery('#visit-date').on('change', function () {
  jQuery('#studio-calendar').dayweave('selectDate', this.value);
}).dayweavePicker();
</script></body></html>

With the same local server running, open http://127.0.0.1:8790/studio-calendar.html. Each event has a stable unique ID and every property expected by the plugin. Optional text values use empty strings. Leaving url empty produces an event without an external link. For your own links, use a full HTTP(S) URL without embedded credentials.

The calendar starts in November with November 6 selected. The picker makes its bound input read-only while active. Choosing a day emits a change event; the handler above passes that date to dayweave('selectDate', ...). Attaching or opening a picker alone does not submit a date choice.

Check the example before adding real events

1. Select November 6. The detail area should show Printmaking workshop and Portfolio review. The workshop continues on this day; the review starts at 14:00.
2. Select November 7. The workshop should remain visible. November 8 should have no matching events when all categories are shown and search is empty.
3. Return to November 6 and choose the Workshop category. The Portfolio review should disappear from the filtered result. Reset the category to all and search for “portfolio” to isolate the review.
4. Clear the search. Open Choose date, pick November 14, and confirm the input becomes 2026-11-14, the calendar selects that day and Open studio appears as an all-day event. Focus should return to the input after selection.
5. Switch to agenda to read matching events for the displayed month. Then return to month view to inspect individual dates.

Filters change the visible matches, not the underlying event list. If a date appears empty, clear search and category filters before assuming its event is missing. The included two-calendar integration sample also lets you check that navigating one calendar leaves the other instance’s state alone.

Edit in the studio and keep a portable project

To use the studio instead of maintaining the integration array, start from its fictional Makers Week sample and make a separate project. Apply the calendar title, then enter an event’s title, start date, inclusive end date and category. Time, location, description and link are optional. Click Add event to commit the form.

Select an existing event title to edit it and choose Update event. Unsubmitted form text is not added by Save project or Ctrl/Command+S. A selected event is not silently moved when you choose a different calendar day. Use Clear form to start a new event; Undo/Redo retains up to 30 applied project edits.

Save project downloads JSON with all events, the title and the calendar’s view/filter settings. Use Open project to reopen a saved file. Save before importing another project or restoring the sample, because those actions replace the project and reset edit history. Browser drafts are convenient local recovery; downloaded JSON is the portable backup if storage is cleared, disabled or full.

Share the output and test the page that will host it

Use Export standalone HTML after applying your edits. Open that output and test month navigation, filtering and the date picker. You can host the whole HTML document or embed it in an iframe. For a CMS that expects a component inside an existing page, use the plugin setup rather than pasting a complete HTML document into an arbitrary field. Check the actual host’s script policy, frame sizing and styles before sharing.

The complete fictional exported calendar shows the standalone format. Exported HTML embeds every event in the project, even if the current filter hides some events. Share only event details that should be readable by the recipients. The integration array and downloaded JSON likewise expose their included event data.

Dates must be real Gregorian dates in YYYY-MM-DD from 1900 through 2100. Use a blank time for all day or a local wall-clock HH:MM start time. Maximum capacity is 500 events. Calendar navigation and date selection do not create bookings, invitations, reminders, ticket sales, payments or external calendar synchronization.

Keyboard users can move among days with arrow keys and select with Enter or Space. PageUp/PageDown navigate months; Escape closes the picker. Test your audience’s actual browsers, screen readers and physical touch devices as part of your integration. A narrow desktop viewport alone does not certify those environments.

Use terms and local data

The calendar, picker, studio, project backups and HTML output are free under the included use terms. Keep the separate bundled jQuery MIT notice. The terms permit use and the outputs you create; they restrict resale or redistribution of the editor/package and competing rebranded copies. Optional custom integration requires a separate agreed scope, with no support, price or update commitment created by the download.

Downloaded studios and exported HTML contain no telemetry. The separate hosted product and studio pages use fixed anonymous diagnostic counts, respect Do Not Track and Global Privacy Control, and omit event/project content from those counts. Projects stay local unless you deliberately share or publish them. Read the setup and API guide for methods, lifecycle behavior and limits, or return to the Dayweave product page.