### Add Event Programmatically with scheduler.addEvent() Source: https://context7.com/dhtmlx/scheduler/llms.txt Shows how to add events to the scheduler using the `scheduler.addEvent()` method. Includes examples for simple events, events with custom properties, and multi-day events. ```javascript // Add a simple event const eventId = scheduler.addEvent({ start_date: new Date(2024, 4, 15, 9, 0), end_date: new Date(2024, 4, 15, 12, 0), text: "Team Meeting", details: "Discuss Q2 goals" }); console.log("Created event with id:", eventId); // Add event with custom properties scheduler.addEvent({ id: "custom_id_123", start_date: "2024-05-16 14:00", end_date: "2024-05-16 15:30", text: "Client Call", color: "#FF5722", textColor: "#FFFFFF", room: "Conference A", priority: "high" }); // Add multi-day event scheduler.addEvent({ start_date: "2024-05-20 00:00", end_date: "2024-05-25 00:00", text: "Company Retreat" }); ``` -------------------------------- ### Get and Remove Keyboard Shortcut Handler Source: https://context7.com/dhtmlx/scheduler/llms.txt Retrieves a specific shortcut handler by its key combination and scope, and demonstrates how to remove a registered shortcut. ```javascript // Get shortcut handler const handler = scheduler.getShortcutHandler("ctrl+n", "scheduler"); // Remove shortcut scheduler.removeShortcut("ctrl+n", "scheduler"); ``` -------------------------------- ### Get and Update Event Details Source: https://context7.com/dhtmlx/scheduler/llms.txt Retrieve an event by its ID to view or modify its properties. Use `scheduler.updateEvent()` to reflect changes visually. This method is useful for dynamic event adjustments. ```javascript // Get event by id const event = scheduler.getEvent("event_123"); if (event) { console.log("Event text:", event.text); console.log("Start date:", event.start_date); console.log("End date:", event.end_date); // Modify event properties event.text = "Updated Meeting Title"; event.color = "#4CAF50"; // Update the display after modification scheduler.updateEvent(event.id); } ``` ```javascript // Get all events in a date range const weekStart = new Date(2024, 4, 13); const weekEnd = new Date(2024, 4, 20); const events = scheduler.getEvents(weekStart, weekEnd); events.forEach(ev => { console.log(`${ev.text}: ${ev.start_date} - ${ev.end_date}`); }); ``` -------------------------------- ### Basic Initialization (HTML) Source: https://context7.com/dhtmlx/scheduler/llms.txt Demonstrates how to initialize DHTMLX Scheduler using HTML and JavaScript. ```APIDOC ## Basic Initialization Initialize the scheduler by including the required files, adding HTML markup for the container, and calling the init method with configuration options. ### Request Example ```html

``` ``` -------------------------------- ### Programmatically Show/Hide Quick Info Source: https://context7.com/dhtmlx/scheduler/llms.txt Control the visibility of the quick info popup using `showQuickInfo()` and `hideQuickInfo()` methods. `showQuickInfo()` requires an event ID. ```javascript // Programmatically show/hide quick info scheduler.showQuickInfo("event_123"); scheduler.hideQuickInfo(); ``` -------------------------------- ### Enable and Configure Quick Info Plugin Source: https://context7.com/dhtmlx/scheduler/llms.txt Activate the quick info plugin and configure its display behavior. `quick_info_detached` controls whether the popup appears near the event or at the screen edge. ```javascript // Enable quick info plugin scheduler.plugins({ quick_info: true }); // Configure quick info scheduler.config.show_quick_info = true; scheduler.config.quick_info_detached = true; // Show near event vs screen edge ``` -------------------------------- ### Basic DHTMLX Scheduler Initialization Source: https://context7.com/dhtmlx/scheduler/llms.txt Includes necessary HTML structure and JavaScript for initializing DHTMLX Scheduler with basic configuration and parsing initial events. Ensure the `dhtmlxscheduler.js` and `dhtmlxscheduler.css` files are included. ```html

``` -------------------------------- ### Initialize and Parse Data in DHTMLX Scheduler Source: https://github.com/dhtmlx/scheduler/blob/master/README.md Initialize the scheduler with configuration options and parse an array of event data. Ensure the container ID matches the HTML markup. ```javascript scheduler.config.first_hour = 6; scheduler.config.last_hour = 19; scheduler.init('scheduler_here', new Date(2024, 3, 20), "week"); scheduler.parse([ { id:1, start_date: "2024-04-15 09:00", end_date: "2024-04-15 12:00", text:"English lesson" }, { id:2, start_date: "2024-04-16 10:00", end_date: "2024-04-16 16:00", text:"Math exam" }, { id:3, start_date: "2024-04-16 10:00", end_date: "2024-04-21 16:00", text:"Science lesson" }, { id:4, start_date: "2024-04-17 16:00", end_date: "2024-04-17 17:00", text:"English lesson" }, { id:5, start_date: "2024-04-18 09:00", end_date: "2024-04-18 17:00", text:"Usual event" } ]); ``` -------------------------------- ### Configure Mini Calendar Options Source: https://context7.com/dhtmlx/scheduler/llms.txt Sets configuration options for the mini calendar, such as enabling event marking. ```javascript // Mini calendar configuration options scheduler.config.minicalendar = { mark_events: true }; ``` -------------------------------- ### ES6 Module Import Source: https://context7.com/dhtmlx/scheduler/llms.txt Shows how to import and initialize DHTMLX Scheduler using ES6 modules. ```APIDOC ## ES6 Module Import Import DHTMLX Scheduler as an ES6 module for use with modern bundlers and frameworks. ### Request Example ```javascript // Import scheduler as ES6 module import { scheduler } from "dhtmlx-scheduler"; // Or for Enterprise version with multiple instances import { Scheduler } from "dhtmlx-scheduler"; const scheduler = Scheduler.getSchedulerInstance(); // Configure and initialize scheduler.config.first_hour = 8; scheduler.config.last_hour = 20; scheduler.config.time_step = 30; scheduler.init("scheduler_container", new Date(), "week"); scheduler.parse([ { id: 1, start_date: "2024-05-01 10:00", end_date: "2024-05-01 12:00", text: "Meeting" } ]); ``` ``` -------------------------------- ### Create DataProcessor with scheduler.createDataProcessor() Source: https://context7.com/dhtmlx/scheduler/llms.txt Instantiate a `DataProcessor` for automatic CRUD synchronization with a server. Supports RESTful APIs or custom routing for fine-grained control over requests. ```javascript // REST API mode with automatic CRUD const dp = scheduler.createDataProcessor({ url: "/api/events", mode: "REST", headers: { "Authorization": "Bearer " + authToken, "Content-Type": "application/json" } }); ``` ```javascript // Handle server responses dp.attachEvent("onAfterUpdate", function(id, action, tid, response) { if (action === "inserted") { console.log("Event created on server with id:", tid); } else if (action === "updated") { console.log("Event updated on server"); } else if (action === "deleted") { console.log("Event deleted from server"); } else if (action === "error") { console.error("Server error:", response); scheduler.message({ type: "error", text: "Failed to save changes" }); } }); ``` ```javascript // Custom router for fine-grained control const dp2 = scheduler.createDataProcessor({ event: { create: function(data) { return fetch("/api/events", { method: "POST", body: JSON.stringify(data) }).then(res => res.json()); }, update: function(data, id) { return fetch("/api/events/" + id, { method: "PUT", body: JSON.stringify(data) }).then(res => res.json()); }, delete: function(id) { return fetch("/api/events/" + id, { method: "DELETE" }).then(res => res.json()); } } }); ``` -------------------------------- ### Enable Keyboard Navigation Source: https://context7.com/dhtmlx/scheduler/llms.txt Enables the keyboard navigation plugin and configures the step interval for navigation in minutes. This enhances accessibility and user experience. ```javascript // Enable keyboard navigation plugin scheduler.plugins({ key_nav: true }); // Enable keyboard navigation scheduler.config.key_nav = true; scheduler.config.key_nav_step = 30; // Navigation step in minutes ``` -------------------------------- ### Customize Quick Info Templates Source: https://context7.com/dhtmlx/scheduler/llms.txt Customize the title, content, and date templates for the quick info popup. This allows for dynamic display of event details. ```javascript // Customize quick info templates scheduler.templates.quick_info_title = function(start, end, event) { return event.text; }; scheduler.templates.quick_info_content = function(start, end, event) { let html = "

"; html += "

Time: " + scheduler.templates.event_date(start) + " - " + scheduler.templates.event_date(end) + "

"; if (event.location) { html += "

Location: " + event.location + "

"; } if (event.description) { html += "

" + event.description + "

"; } html += "

"; return html; }; scheduler.templates.quick_info_date = function(start, end, event) { return scheduler.date.date_to_str("%l, %F %d")(start); }; ``` -------------------------------- ### Enable and Export to PDF Source: https://context7.com/dhtmlx/scheduler/llms.txt Enables the export plugin and initiates an export of the current scheduler view to PDF format. Includes options for page format, orientation, header, and footer. ```javascript // Enable export plugin scheduler.plugins({ export_api: true }); // Export to PDF scheduler.exportToPDF({ format: "A4", orientation: "landscape", header: "

Team Schedule - " + new Date().toLocaleDateString() + "

", footer: "

Generated by DHTMLX Scheduler

", callback: function(result) { if (result.url) { window.open(result.url); } } }); ``` -------------------------------- ### Scheduler Configuration with scheduler.config Source: https://context7.com/dhtmlx/scheduler/llms.txt This section details the `scheduler.config` object, which allows customization of the scheduler's appearance, time scales, event handling behavior, and date formatting. ```APIDOC ## scheduler.config ### Description Configuration object that controls scheduler behavior, appearance, and functionality. ### Properties - **first_hour** (number) - The starting hour of the day view. - **last_hour** (number) - The ending hour of the day view. - **time_step** (number) - The time slot interval in minutes. - **hour_size_px** (number) - The height of one hour in pixels. - **details_on_create** (boolean) - Whether to open the lightbox on event creation. - **details_on_dblclick** (boolean) - Whether to open the lightbox on double-click. - **drag_create** (boolean) - Whether to allow creating events by dragging. - **drag_move** (boolean) - Whether to allow moving events. - **drag_resize** (boolean) - Whether to allow resizing events. - **dblclick_create** (boolean) - Whether to create an event on double-click. - **multi_day** (boolean) - Whether to enable the multi-day events section. - **multi_day_height_limit** (number) - The height limit for the multi-day section. - **mark_now** (boolean) - Whether to show the current time marker. - **start_on_monday** (boolean) - Whether the week view starts on Monday. - **scroll_hour** (number) - The initial scroll position in hours. - **xml_date** (string) - The date format for server communication (e.g., "%Y-%m-%d %H:%i"). - **date_format** (string) - The display date format (e.g., "%Y-%m-%d %H:%i"). ### Initialization Example ```javascript // Time scale configuration scheduler.config.first_hour = 8; scheduler.config.last_hour = 20; scheduler.config.time_step = 15; scheduler.config.hour_size_px = 44; // Event creation/editing scheduler.config.details_on_create = true; scheduler.config.details_on_dblclick = true; // Display options scheduler.config.mark_now = true; scheduler.config.start_on_monday = true; // Initialize scheduler scheduler.init("scheduler_here", new Date(), "week"); ``` ``` -------------------------------- ### Create Units View Source: https://context7.com/dhtmlx/scheduler/llms.txt Set up a Units view to organize events by resources in a column layout. This view is suitable for scenarios where events are assigned to specific individuals or groups. ```javascript scheduler.plugins({ units: true }); ``` ```javascript scheduler.serverList("employees", [ { key: 1, label: "John Smith" }, { key: 2, label: "Jane Doe" }, { key: 3, label: "Bob Johnson" }, { key: 4, label: "Alice Williams" } ]); ``` ```javascript scheduler.createUnitsView({ name: "unit", property: "employee_id", list: scheduler.serverList("employees"), size: 4, step: 1 }); ``` ```javascript scheduler.createUnitsView({ name: "unit_week", property: "employee_id", list: scheduler.serverList("employees"), days: 7 }); ``` ```javascript scheduler.templates.unit_scale_text = function(key, label, unit) { return "

" + "

" + label + "

"; }; ``` ```javascript scheduler.parse([ { id: 1, start_date: "2024-05-15 10:00", end_date: "2024-05-15 12:00", text: "Meeting", employee_id: 1 }, { id: 2, start_date: "2024-05-15 14:00", end_date: "2024-05-15 16:00", text: "Training", employee_id: 2 } ]); ``` ```javascript scheduler.init("scheduler_here", new Date(), "unit"); ``` -------------------------------- ### Configure Scheduler with scheduler.config Source: https://context7.com/dhtmlx/scheduler/llms.txt Customize scheduler's appearance and functionality using the `scheduler.config` object. Options control time scales, event interactions, display settings, and date formatting. ```javascript // Time scale configuration scheduler.config.first_hour = 8; // Start hour of day view scheduler.config.last_hour = 20; // End hour of day view scheduler.config.time_step = 15; // Time slot interval in minutes scheduler.config.hour_size_px = 44; // Height of one hour in pixels ``` ```javascript // Event creation/editing scheduler.config.details_on_create = true; // Open lightbox on event creation scheduler.config.details_on_dblclick = true; // Open lightbox on double-click scheduler.config.drag_create = true; // Allow creating events by dragging scheduler.config.drag_move = true; // Allow moving events scheduler.config.drag_resize = true; // Allow resizing events scheduler.config.dblclick_create = true; // Create event on double-click ``` ```javascript // Multi-day events scheduler.config.multi_day = true; // Enable multi-day events section scheduler.config.multi_day_height_limit = 150; // Limit height of multi-day section ``` ```javascript // Display options scheduler.config.mark_now = true; // Show current time marker scheduler.config.start_on_monday = true; // Week starts on Monday scheduler.config.scroll_hour = 8; // Initial scroll position ``` ```javascript // Date format for server communication scheduler.config.xml_date = "%Y-%m-%d %H:%i"; scheduler.config.date_format = "%Y-%m-%d %H:%i"; ``` ```javascript // Initialize with config scheduler.init("scheduler_here", new Date(), "week"); ``` -------------------------------- ### Enable and Render Mini Calendar Source: https://context7.com/dhtmlx/scheduler/llms.txt Enables the mini calendar plugin and renders it in a specified container. The handler function updates the scheduler's current view based on the selected date. ```javascript // Enable mini calendar plugin scheduler.plugins({ minical: true }); // Render mini calendar in a container const calendar = scheduler.renderCalendar({ container: "mini_calendar_container", navigation: true, handler: function(date) { scheduler.setCurrentView(date, scheduler.getState().mode); } }); ``` -------------------------------- ### scheduler.createUnitsView() Source: https://context7.com/dhtmlx/scheduler/llms.txt Creates a Units view, which displays events grouped by resources in a column-based layout. This is ideal for managing schedules for individuals or distinct groups. ```APIDOC ## scheduler.createUnitsView() Creates a Units view for displaying events grouped by resources in a column-based layout. ### Example 1: Basic Units view ```javascript // Enable required plugins scheduler.plugins({ units: true }); // Define units (resources) scheduler.serverList("employees", [ { key: 1, label: "John Smith" }, { key: 2, label: "Jane Doe" }, { key: 3, label: "Bob Johnson" }, { key: 4, label: "Alice Williams" } ]); // Create units view scheduler.createUnitsView({ name: "unit", property: "employee_id", list: scheduler.serverList("employees"), size: 4, step: 1 }); // Events need employee_id property scheduler.parse([ { id: 1, start_date: "2024-05-15 10:00", end_date: "2024-05-15 12:00", text: "Meeting", employee_id: 1 }, { id: 2, start_date: "2024-05-15 14:00", end_date: "2024-05-15 16:00", text: "Training", employee_id: 2 } ]); scheduler.init("scheduler_here", new Date(), "unit"); ``` ### Example 2: Multi-day units view with custom scale text ```javascript // Multi-day units view scheduler.createUnitsView({ name: "unit_week", property: "employee_id", list: scheduler.serverList("employees"), days: 7 }); // Customize unit labels scheduler.templates.unit_scale_text = function(key, label, unit) { return "

" + "

" + label + "

"; }; scheduler.init("scheduler_here", new Date(), "unit_week"); ``` ``` -------------------------------- ### Load Events from External Source Source: https://context7.com/dhtmlx/scheduler/llms.txt Load event data from a URL, supporting JSON, XML, and iCal formats. Dynamic loading can be configured using `scheduler.setLoadMode()`. Event handlers like `onLoadError` and `onLoadEnd` can be attached for managing the loading process. ```javascript // Load events from a JSON endpoint scheduler.load("/api/events", function() { console.log("Events loaded successfully"); }); ``` ```javascript // Load with date range parameters (dynamic loading) scheduler.setLoadMode("day"); // or "week", "month" scheduler.load("/api/events"); // Server receives: /api/events?from=2024-05-01&to=2024-05-07 ``` ```javascript // Load with error handling scheduler.attachEvent("onLoadError", function(response) { console.error("Failed to load events:", response); scheduler.message({ type: "error", text: "Failed to load events" }); }); ``` ```javascript scheduler.attachEvent("onLoadEnd", function() { console.log("Total events:", scheduler.getEvents().length); }); ``` ```javascript scheduler.load("/api/events.json"); ``` -------------------------------- ### Create Timeline View Source: https://context7.com/dhtmlx/scheduler/llms.txt Configure and create a Timeline view for displaying events across multiple resources with a horizontal time axis. Supports various configurations for time units, size, and rendering. ```javascript scheduler.plugins({ timeline: true }); ``` ```javascript scheduler.createTimelineView({ name: "timeline", x_unit: "hour", x_date: "%H:%i", x_step: 1, x_size: 24, x_start: 8, x_length: 12, y_unit: scheduler.serverList("rooms", [ { key: 1, label: "Conference Room A" }, { key: 2, label: "Conference Room B" }, { key: 3, label: "Meeting Room 1" }, { key: 4, label: "Meeting Room 2" } ]), y_property: "room_id", render: "bar", section_autoheight: false, dy: 50, event_dy: "full" }); ``` ```javascript scheduler.createTimelineView({ name: "resources", x_unit: "day", x_date: "%D %d", x_step: 1, x_size: 31, y_unit: scheduler.serverList("employees"), y_property: "employee_id", render: "bar", scrollable: true, column_width: 70, scroll_position: new Date(), smart_rendering: true, second_scale: { x_unit: "month", x_date: "%F %Y" } }); ``` ```javascript scheduler.init("scheduler_here", new Date(), "timeline"); ``` -------------------------------- ### Customize Event Display with Templates Source: https://context7.com/dhtmlx/scheduler/llms.txt Use template functions to control how event text, headers, and CSS classes are rendered. Customize month view day cells and tooltips for enhanced user experience. ```javascript scheduler.templates.event_text = function(start, end, event) { return "" + event.text + "
" + (event.location ? "" + event.location + "" : ""); }; ``` ```javascript scheduler.templates.event_header = function(start, end, event) { return scheduler.templates.event_date(start) + " - " + scheduler.templates.event_date(end); }; ``` ```javascript scheduler.templates.event_class = function(start, end, event) { let css = ""; if (event.priority === "high") css += "high_priority "; if (event.category) css += "category_" + event.category; return css; }; ``` ```javascript scheduler.templates.month_date_class = function(date) { if (date.getDay() === 0 || date.getDay() === 6) { return "weekend_cell"; } return ""; }; ``` ```javascript scheduler.templates.tooltip_text = function(start, end, event) { return "" + event.text + "
" + "Start: " + scheduler.templates.tooltip_date_format(start) + "
" + "End: " + scheduler.templates.tooltip_date_format(end); }; ``` ```javascript scheduler.templates.week_scale_date = function(date) { return scheduler.date.date_to_str("%D, %M %d")(date); }; ``` -------------------------------- ### Event Handling with attachEvent Source: https://context7.com/dhtmlx/scheduler/llms.txt This section covers how to attach event handlers to various scheduler events for custom logic, such as event creation, saving, modification, and deletion. It also shows how to detach handlers. ```APIDOC ## scheduler.attachEvent() ### Description Attaches an event handler to scheduler events. Returns handler id for later detachment. ### Method `scheduler.attachEvent(event_name, handler_function)` ### Parameters - **event_name** (string) - The name of the event to listen for (e.g., "onEventCreated", "onEventSave"). - **handler_function** (function) - The callback function to execute when the event is triggered. ### Event Examples - **onEventCreated**: Triggered when a new event is created. - **onEventSave**: Triggered before an event is saved. Returning `false` prevents saving. - **onEventChanged**: Triggered when an event is modified. - **onEventDeleted**: Triggered when an event is deleted. ### Code Example ```javascript // Handle event creation const handlerId = scheduler.attachEvent("onEventCreated", function(id, event) { console.log("New event created:", id); event.created_by = "current_user"; }); // Validate before saving scheduler.attachEvent("onEventSave", function(id, event, is_new) { if (!event.text || event.text.trim() === "") { scheduler.message({ type: "error", text: "Event title is required" }); return false; // Prevent save } if (event.end_date <= event.start_date) { scheduler.message({ type: "error", text: "End date must be after start date" }); return false; } return true; }); // Detach handler when no longer needed scheduler.detachEvent(handlerId); ``` ``` -------------------------------- ### Configure Recurring Events with RRULE Source: https://context7.com/dhtmlx/scheduler/llms.txt Enable the recurring events plugin and configure the lightbox to include a recurring event section. Add events using either a simplified 'rec_type' format or the standard RRULE string. Retrieves occurrences of a recurring event. ```javascript // Enable recurring events plugin scheduler.plugins({ recurring: true }); // Configure lightbox with recurring section scheduler.config.lightbox.sections = [ { name: "description", height: 50, map_to: "text", type: "textarea", focus: true }, { name: "recurring", type: "recurring", map_to: "rec_type", button: "recurring" }, { name: "time", height: 72, type: "time", map_to: "auto" } ]; // Add recurring event programmatically scheduler.addEvent({ id: "recurring_1", start_date: "2024-05-06 10:00", end_date: "2024-05-06 11:00", text: "Weekly Team Standup", rec_type: "week_1___1,3,5", // Every week on Mon, Wed, Fri event_length: 3600 // Duration in seconds }); // RRULE format (v7.1+) scheduler.addEvent({ id: "rrule_1", start_date: "2024-05-01 09:00", end_date: "2024-05-01 10:00", text: "Monthly Review", rrule: "FREQ=MONTHLY;BYDAY=1MO", // First Monday of each month duration: 3600 }); // Get all occurrences of a recurring event const occurrences = scheduler.getRecDates("recurring_1", 10); occurrences.forEach(occ => { console.log("Occurrence:", occ.start_date, "-", occ.end_date); }); ``` -------------------------------- ### Include DHTMLX Scheduler Files Source: https://github.com/dhtmlx/scheduler/blob/master/README.md Include the necessary JavaScript and CSS files for DHTMLX Scheduler in your HTML. ```html ``` -------------------------------- ### scheduler.load() Source: https://context7.com/dhtmlx/scheduler/llms.txt Loads event data from an external URL. The library automatically detects the data format (JSON, XML, iCal). ```APIDOC ## scheduler.load() ### Description Loads event data from an external data source (URL). Supports JSON, XML, and iCal formats with automatic format detection. ### Method `scheduler.load(url, callback)` ### Parameters #### Path Parameters - **url** (string) - Required - The URL to load event data from. - **callback** (function) - Optional - A function to execute after the data is loaded. ### Request Example ```javascript // Load events from a JSON endpoint scheduler.load("/api/events", function() { console.log("Events loaded successfully"); }); // Load with date range parameters (dynamic loading) scheduler.setLoadMode("day"); // or "week", "month" scheduler.load("/api/events"); // Server receives: /api/events?from=2024-05-01&to=2024-05-07 // Load with error handling scheduler.attachEvent("onLoadError", function(response) { console.error("Failed to load events:", response); scheduler.message({ type: "error", text: "Failed to load events" }); }); scheduler.load("/api/events.json"); ``` ``` -------------------------------- ### Export to PNG Source: https://context7.com/dhtmlx/scheduler/llms.txt Exports the scheduler view to a PNG image. A callback function is used to create a download link for the generated image. ```javascript // Export to PNG scheduler.exportToPNG({ header: "Monthly Overview", callback: function(result) { // Create download link const link = document.createElement("a"); link.href = result.url; link.download = "schedule.png"; link.click(); } }); ``` -------------------------------- ### Custom Locale Configuration Source: https://context7.com/dhtmlx/scheduler/llms.txt Define custom locale settings for dates and labels. This allows for full control over displayed text and date formats. ```javascript scheduler.locale = { date: { month_full: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], month_short: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], day_full: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], day_short: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] }, labels: { dhx_cal_today_button: "Today", day_tab: "Day", week_tab: "Week", month_tab: "Month", new_event: "New event", icon_save: "Save", icon_cancel: "Cancel", icon_details: "Details", icon_edit: "Edit", icon_delete: "Delete", confirm_closing: "Your changes will be lost. Continue?", confirm_deleting: "Event will be permanently deleted. Continue?", section_description: "Description", section_time: "Time period" } }; // Enable RTL mode for Arabic/Hebrew scheduler.config.rtl = true; scheduler.init("scheduler_here", new Date(), "week"); ``` -------------------------------- ### DHTMLX Scheduler ES6 Module Import Source: https://context7.com/dhtmlx/scheduler/llms.txt Demonstrates how to import DHTMLX Scheduler using ES6 modules, suitable for modern JavaScript projects and frameworks. Shows both default and enterprise version imports. ```javascript // Import scheduler as ES6 module import { scheduler } from "dhtmlx-scheduler"; // Or for Enterprise version with multiple instances import { Scheduler } from "dhtmlx-scheduler"; const scheduler = Scheduler.getSchedulerInstance(); // Configure and initialize scheduler.config.first_hour = 8; scheduler.config.last_hour = 20; scheduler.config.time_step = 30; scheduler.init("scheduler_container", new Date(), "week"); scheduler.parse([ { id: 1, start_date: "2024-05-01 10:00", end_date: "2024-05-01 12:00", text: "Meeting" } ]); ``` -------------------------------- ### scheduler.createTimelineView() Source: https://context7.com/dhtmlx/scheduler/llms.txt Creates a Timeline view for displaying events across multiple resources or sections, featuring a horizontal time axis. This view is useful for visualizing schedules over time for different entities. ```APIDOC ## scheduler.createTimelineView() Creates a Timeline view for displaying events across multiple resources/sections with horizontal time axis. ### Example 1: Timeline view with rooms ```javascript // Enable required plugins scheduler.plugins({ timeline: true }); // Create timeline view with rooms scheduler.createTimelineView({ name: "timeline", x_unit: "hour", x_date: "%H:%i", x_step: 1, x_size: 24, x_start: 8, x_length: 12, y_unit: scheduler.serverList("rooms", [ { key: 1, label: "Conference Room A" }, { key: 2, label: "Conference Room B" }, { key: 3, label: "Meeting Room 1" }, { key: 4, label: "Meeting Room 2" } ]), y_property: "room_id", render: "bar", section_autoheight: false, dy: 50, event_dy: "full" }); // Switch to timeline view scheduler.init("scheduler_here", new Date(), "timeline"); ``` ### Example 2: Scrollable timeline with smart rendering ```javascript // Create scrollable timeline with smart rendering scheduler.createTimelineView({ name: "resources", x_unit: "day", x_date: "%D %d", x_step: 1, x_size: 31, y_unit: scheduler.serverList("employees"), y_property: "employee_id", render: "bar", scrollable: true, column_width: 70, scroll_position: new Date(), smart_rendering: true, second_scale: { x_unit: "month", x_date: "%F %Y" } }); ``` ``` -------------------------------- ### Link Mini Calendar to Scheduler Source: https://context7.com/dhtmlx/scheduler/llms.txt Links the rendered mini calendar to the scheduler, allowing for automatic synchronization. The handler function determines which date to display in the mini calendar. ```javascript // Link mini calendar to scheduler (auto-sync) scheduler.linkCalendar(calendar, function(date) { return date; // Return date to display in mini calendar }); ``` -------------------------------- ### Add Custom Keyboard Shortcuts Source: https://context7.com/dhtmlx/scheduler/llms.txt Adds custom keyboard shortcuts for common actions like adding a new event or deleting a selected event. Shortcuts are registered with a key combination, a handler function, and a scope. ```javascript // Add custom keyboard shortcuts scheduler.addShortcut("ctrl+n", function(e) { const date = scheduler.getState().date; scheduler.addEventNow({ start_date: date, end_date: scheduler.date.add(date, 1, "hour") }); }, "scheduler"); scheduler.addShortcut("ctrl+d", function(e) { const selected = scheduler.getState().select_id; if (selected) { scheduler.deleteEvent(selected); } }, "scheduler"); scheduler.addShortcut("escape", function(e) { scheduler.hideLightbox(); }, "lightbox"); ``` -------------------------------- ### Data Synchronization with createDataProcessor Source: https://context7.com/dhtmlx/scheduler/llms.txt This section explains how to use `createDataProcessor` to automatically synchronize event changes (CRUD operations) with a server, supporting RESTful APIs and custom data handling. ```APIDOC ## scheduler.createDataProcessor() ### Description Creates a DataProcessor instance for automatic server synchronization of event changes (CRUD operations). ### Method `scheduler.createDataProcessor(config)` ### Parameters - **config** (object) - Configuration object for the DataProcessor. - **url** (string) - The URL for server requests. - **mode** (string) - The data processing mode (e.g., "REST"). - **headers** (object) - Custom headers to include in requests. - **event** (object) - Custom event handlers for create, update, and delete operations. - **create** (function) - Function to handle event creation. - **update** (function) - Function to handle event updates. - **delete** (function) - Function to handle event deletion. ### Events - **onAfterUpdate**: Triggered after a server update operation. - **id** (string|number) - The ID of the event. - **action** (string) - The action performed (e.g., "inserted", "updated", "deleted", "error"). - **tid** (string|number) - The server-assigned ID (if applicable). - **response** (any) - The server's response. ### Code Example (REST API Mode) ```javascript const dp = scheduler.createDataProcessor({ url: "/api/events", mode: "REST", headers: { "Authorization": "Bearer " + authToken, "Content-Type": "application/json" } }); dp.attachEvent("onAfterUpdate", function(id, action, tid, response) { if (action === "inserted") { console.log("Event created on server with id:", tid); } else if (action === "updated") { console.log("Event updated on server"); } else if (action === "deleted") { console.log("Event deleted from server"); } else if (action === "error") { console.error("Server error:", response); scheduler.message({ type: "error", text: "Failed to save changes" }); } }); ``` ### Code Example (Custom Event Handlers) ```javascript const dp2 = scheduler.createDataProcessor({ event: { create: function(data) { return fetch("/api/events", { method: "POST", body: JSON.stringify(data) }).then(res => res.json()); }, update: function(data, id) { return fetch("/api/events/" + id, { method: "PUT", body: JSON.stringify(data) }).then(res => res.json()); }, delete: function(id) { return fetch("/api/events/" + id, { method: "DELETE" }).then(res => res.json()); } } }); ``` ``` -------------------------------- ### Set Scheduler Locale Source: https://context7.com/dhtmlx/scheduler/llms.txt Use `scheduler.i18n.setLocale()` to set the scheduler's language. Ensure the locale data is loaded before initialization. ```javascript scheduler.i18n.setLocale("de"); // German ``` -------------------------------- ### Update Event Visually and in Batch Source: https://context7.com/dhtmlx/scheduler/llms.txt Apply visual updates to an event after programmatic modifications using `scheduler.updateEvent()`. For efficiency, use `scheduler.batchUpdate()` to group multiple event updates. ```javascript // Get and modify an event const event = scheduler.getEvent("meeting_001"); event.text = "Updated: Project Review"; event.start_date = new Date(2024, 4, 15, 10, 0); event.end_date = new Date(2024, 4, 15, 11, 30); event.color = "#2196F3"; // Apply the visual update scheduler.updateEvent("meeting_001"); ``` ```javascript // Batch update multiple events efficiently scheduler.batchUpdate(function() { const events = scheduler.getEvents(); events.forEach(ev => { if (ev.category === "meeting") { ev.color = "#9C27B0"; scheduler.updateEvent(ev.id); } }); }); ``` -------------------------------- ### scheduler.parse() Source: https://context7.com/dhtmlx/scheduler/llms.txt Loads event data directly from a client-side resource such as an array, JSON string, or XML string. ```APIDOC ## scheduler.parse() ### Description Loads event data from a client-side resource (array, JSON string, or XML string). ### Method `scheduler.parse(data, type)` ### Parameters #### Path Parameters - **data** (any) - Required - The data to parse. Can be an array of event objects, a JSON string, or an XML string. - **type** (string) - Optional - The format of the data if it cannot be auto-detected (e.g., "json", "xml"). ### Request Example ```javascript // Parse array of events scheduler.parse([ { id: 1, start_date: "2024-05-15 09:00", end_date: "2024-05-15 12:00", text: "Meeting" }, { id: 2, start_date: "2024-05-16 14:00", end_date: "2024-05-16 16:00", text: "Training" } ]); // Parse JSON string const jsonData = JSON.stringify([ { id: 3, start_date: "2024-05-17 10:00", end_date: "2024-05-17 11:00", text: "Call" } ]); scheduler.parse(jsonData); // Parse with data preprocessing scheduler.attachEvent("onEventLoading", function(event) { event.duration = (event.end_date - event.start_date) / (1000 * 60 * 60); return true; // Return false to skip event }); scheduler.parse(eventData); ``` ``` -------------------------------- ### scheduler.updateEvent() and scheduler.batchUpdate() Source: https://context7.com/dhtmlx/scheduler/llms.txt Refresh the visual display of events after programmatic modifications or perform multiple updates efficiently. ```APIDOC ## scheduler.updateEvent() ### Description Updates the visual display of an event after its properties have been modified programmatically. ### Method `scheduler.updateEvent(id)` ### Parameters #### Path Parameters - **id** (string) - Required - The unique identifier of the event to update. ### Request Example ```javascript const event = scheduler.getEvent("meeting_001"); event.text = "Updated: Project Review"; scheduler.updateEvent("meeting_001"); ``` ## scheduler.batchUpdate() ### Description Allows for efficient batch updates of multiple events. Changes are applied together for better performance. ### Method `scheduler.batchUpdate(callback)` ### Parameters #### Path Parameters - **callback** (function) - Required - A function containing the event update logic. ### Request Example ```javascript scheduler.batchUpdate(function() { const events = scheduler.getEvents(); events.forEach(ev => { if (ev.category === "meeting") { ev.color = "#9C27B0"; scheduler.updateEvent(ev.id); } }); }); ``` ```