What is the best way to export currently visible jqxScheduler range to PDF while

[krishna_jpParticipant]

Hi everyone, I am working on a SaaS settings panel with Scheduler.

I am currently trying to solve this: What is the best way to export currently visible jqxScheduler range to PDF while keeping appointment colors and labels?

So far, I can reproduce it consistently in a small demo, but performance drops once the dataset grows.

Has anyone solved this in production?

[adminKeymaster]

Hi,

The easiest way is to create a snapshot that will be pdf exported.

// jqxScheduler production-safe PDF export (reliable approach: browser print → Save as PDF)

function exportSchedulerToPDF() {
  const scheduler = $("#scheduler");

  // Optional: ensure correct view before export
  // scheduler.jqxScheduler("view", "weekView");

  // Enable print mode styling hook
  document.body.classList.add("scheduler-print-mode");

  // Trigger print dialog (user saves as PDF in browser)
  window.print();

  // Cleanup after print completes
  window.onafterprint = function () {
    document.body.classList.remove("scheduler-print-mode");
  };
}

/* =========================
   PRINT CSS (must include)
   ========================= */

@media print {

  /* Hide everything except scheduler */
  body * {
    visibility: hidden !important;
  }

  #scheduler,
  #scheduler * {
    visibility: visible !important;
  }

  #scheduler {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
  }

  /* Hide jqxScheduler UI chrome */
  .jqx-scheduler-toolbar,
  .jqx-scheduler-legend,
  .jqx-scheduler-header {
    display: none !important;
  }

  /* Preserve appointment colors */
  .jqx-scheduler-appointment {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* Optional runtime hook styling */
.scheduler-print-mode .jqx-scheduler-toolbar {
  display: none !important;
}

Regards,
Peter

[Author]

Posts